浅谈高性能web前端技术栈——如何让小白轻松上手

下面分别从以下几点开篇:图片地图,CSS Sprites,内联图片,样式表合并,脚本文件合并,脚本文件加载和执行

  1. 图片地图:服务器端图片地图和客户端图片地图。 操作原理:利用用户点击图片的x,y坐标,提交一个目标URL,或者映射一个操作。

    举个栗子:页面的导航栏模块,由四个图片组成,用户点击每个图片会链接到不同的URL地址。 方式一:四个分开的图片对应四个分开的超链接,需要四个HTTP请求(效率较低); 方式二:一个图片由四个导航组成,用图像映射实现,需要一个HTTP请求,响应时间降低(效率提高

    代码实例:

    方法一(效率低)

    <div>
        <a href="javascript:alert('Home')" title="Home">
            <img border="0" src="/images/home.gif?t=1525702714">
        </a>
        <a href="javascript:alert('Gift')" title="Gift">
            <img border="0" src="/images/gift.gif?t=1525702714">
        </a>
        <a href="javascript:alert('Cart')" title="Cart">
            <img border="0" src="/images/cart.gif?t=1525702714">
        </a>
        <a href="javascript:alert('Settings')" title="Settings">
            <img border="0" src="/images/settings.gif?t=1525702714">
        </a>
    </div>

    方法二(效率高

    <div>
        <img usemap="#map1" border="0" src="/images/imagemap.gif?t=1525702507">
        <map name="map1" id="map1">
              <area shape="rect" coords="0,0,31,31" href="javascript:alert('Home')" title="Home">
              <area shape="rect" coords="36,0,66,31" href="javascript:alert('Gifts')" title="Gifts">
              <area shape="rect" coords="71,0,101,31" href="javascript:alert('Cart')" title="Cart">
              <area shape="rect" coords="106,0,136,31" href="javascript:alert('Settings')" title="Settings">
        </map>
    </div>
原文链接:segmentfault.com

上一篇:CSS3之mix-blend-mode
下一篇:vue的事件委托实现

相关推荐

官方社区

扫码加入 JavaScript 社区