◆◆0

Web前端性能优化教程01：减少Http请求
被墙跳转TG:@qianhenetwork QQ 851617266

来源：teroy博客园 2019-02-28 17:10:56 SEO优化 280 0

本文是Web前端性能优化系列文章中的第一篇，主要讲述如何减少减少Http请求。完整教程可查看：Web前端性能优化

性能黄金法则

只有10%-20%的最终用户响应时间花在接收请求的HTML文档上，剩下的80%-90%时间花在HTML文档所引用的所有组件(图片，script，css，flash等等)进行的HTTP请求上。

前言

有关前端性能优化的资料参考于《高性能网站建设》这本书，这一系列的文章可以看作是对这本书的阅读笔记。

改善响应时间的最简单途径就是减少组件的数量，并由此减少HTTP请求的数量。接下来将探讨几个技术实现。

1. 图片地图

图片地图允许你在一个图片上关联多个URL。目标URL的选择取决于用户单击了图片上的哪个位置。

以导航栏为例，当点击图标的时候将打开一个新的窗口。要实现的效果如下图：

我们可以通过使用五个分开的图片，然后让每个图片对应一个超链接。然而这样无疑就产生了5个Http请求，我们的目标是要减少HTTP请求，这里图片地图就可以派上用场了，通过将五个图片合并为一张图片，然后以位置信息定位超链接，这样就把HTTP请求减少为一个了，又可以保证设计的完整性和功能的齐全性，实现代码如下：

<img usemap="#map1" border=0 src="">

<map name="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">

    <area shape="rect" coords="141,0,171,31" href="javascript:alert('Help')" title="Help">

</map>

2. CSS Sprites

CSS Sprites中文翻译为CSS精灵，通过使用合并图片，通过指定css的backgroud-image和backgroud-position来显示元素。

这里重点提一下backgroud-position属性。backgroud-position:x y; x和y可以写负值也可以写正值，我们可以想象图片的左上方为(0,0)，以(0,0)坐标向右是为负数的x轴，以(0,0)坐标向下是为负数的y轴。正值的情况则以图片左下方为(0,0)，向右是为正数的x轴，向上是为正数的y轴。

来看一张来自豆瓣的翻页图片：

可以明显地看到这里组合了4张图片，上面两个按钮是初始显示按钮样式，当鼠标移到上面的时候就变为下面两个按钮样式，实现代码如下：

<html>

<head>

    <title></title>

    <style type="text/css">

        .left{ background-image:url(2.png); background-position:0px 0px; width:18px; height:18px; }

        .right{ background-image:url(2.png); background-position:-18px 0px; width:18px; height:18px; }

        .left:hover{ background-position:0px -18px; }

        .right:hover{ background-position:-18px -18px; }

    </style>

</head>

<body>

    <div>

        <div class="left"></div>

        <div class="right"></div>

    </div>

</body>

</html>