前端性能优化规则总结—读《高性能网站建设指南》

标签：

规则1—减少HTTP请求

1.使用图片地图

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

    比如导航栏菜单有五个选项，为了美观，我们将菜单对应的超链接关联到图片上，可以使用五个分开的图片分别关联五个分开的超链接，此时加载这个导航菜单就要通过五次HTTP请求下载五张图片，如果将五个单独的图标合成一张图片，使用图片地图就可以将HTTP请求减少到一次。具体HTML代码如下：

<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">
  <area shape="rect" coords="141,0,171,31" href="javascript:alert(‘Help‘)" title="Help">
</map>

  在<img>标签中我们中加载了一张包含所有图标的图片，在<map>标签中定义了一个客户端图像映射，图像映射（image-map）指带有可点击区域的一幅图像。area 元素永远嵌套在 map 元素内部，定义了图像映射中的区域。<img>的 usemap 属性可引用 <map> 中的 id 或 name 属性（取决于浏览器），所以我们最好同时向 <map> 添加 id 和 name 属性。

这些标签的具体用户可以参考w3cschool<map>、<area>

缺点：

• 图片地图上的区域坐标比较难确定

• 图片地图中的图片要按次序并且连续

2.CSS Sprites

  和图片地图一样，CSS SPrites也可以合并图片，要使用CSS SPrites也需要将多个图片合并到一个单独的图片中，但是其对图片的次序、排列方向、是否连续没有硬性要求，因此推荐实际开发过程中采用此方法。任何支持背景图片的HTML元素，使用CSS的background-position属性，可以将HTML元素放置到背景图片中期望的位置（或者说，可以选取图片中期望的位置区域作为元素的背景）。关于background-position属性的用法可以参考background-position

<div id="navbar" style="background-color: #F4F5EB; border: 2px ridge #333; width: 180px; height: 32px; padding: 4px 0 4px 0;">
  <a href="javascript:alert(‘Home‘)" title="Home"><span class="home"></span></a>
  <a href="javascript:alert(‘Gifts‘)" title="Gifts"><span class="gifts"></span></a>
  <a href="javascript:alert(‘Cart‘)" title="Cart"><span class="cart"></span></a>
  <a href="javascript:alert(‘Settings‘)" title="Settings"><span class="settings"></span></a>
  <a href="javascript:alert(‘Help‘)" title="Help"><span class="help"></span></a>
</div>

<style>
#navbar span {
    width: 31px;
    height: 31px;
    display: inline;
    float: left;
    background-image: url(/images/spritebg.gif?t=1462159036);
    /*加载的图片仍为上面例子中的图片
}
.home {
    background-position: 0 0;
    margin-right: 4px;
    margin-left: 4px;
}
.gifts {
    background-position: -32px 0;
    margin-right: 4px;
}
/*比较多，后面的就省略了*/
</style>

3.合并脚本和样式表

  JS具有阻塞特性，每次遇到<script>，页面都必须停下来等待脚本下载并执行，这会停止页面绘制，分散过多的js和css文件会导致HTTP请求增加。因此建议合理的合并脚本和样式表文件，从而减少请求次数。

规则2—使用内容发布网络（CDN）

     内容分发网络（Content delivery network或Content distribution network，缩写：CDN）是指一种通过互联网互相连接的电脑网络系统，利用最靠近每位用户的服务器，更快、更可靠地将音乐、图片、视频、应用程序及其他文件发送给用户，来提供高性能、可扩展性及低成本的网络内容传递给用户。CDN的基本原理是广泛采用各种缓存服务器，将这些缓存服务器分布到用户访问相对集中的地区或网络中，在用户访问网站时，利用全局负载技术将用户的访问指向距离最近的工作正常的缓存服务器上，由缓存服务器直接响应用户请求。对于前端开发来说，可以将CDN用于发布静态内容，如图片、脚本、样式表。

规则3-添加Expires头和Cache-Control头（使用缓存）

   浏览器（和代理）使用缓存来减少HTTP请求的数量，并减小HTTP响应的大小，使页面加载的更快。缓存的实现是Web服务器在相应中添加Expires头来告诉客户端它可以使用一个组件直到过期为止。

/*从服务器发送到客户端*/
Expires:Mon, 15 Apr 2024 20:00:00 GMT

    这个响应头告诉浏览器该响应的有效性持续到2014年4月15日为止。需要指出的是使用Expires头要求服务器和客户端的时钟严格同步并且要经常检测过期时间。在HTTP1.1中引入了Cache-Control头来克服Expires头的限制，它使用max-age指令指定组件被缓存多久，单位为秒，为了兼容低版本的HTTP协议，可以同时使用上述两个响应头，HTTP规范规定max-age指令将重写Expires头

/*从服务器发送到客户端*/
Expires:Mon, 15 Apr 2024 20:00:00 GMT
Cache-Control: max-age=315360000

规则4—压缩组件（使用gzip编码压缩HTTP响应包）

   从HTTP1.1开始，Web客户端可以通过添加HTTP请求头Accept-Encoding来表示对压缩的支持

/*从客户端发送到服务器*/
Accept-Encoding: gzip, deflate

/*从客户端发送到服务器*/
Content-Encoding: gzip

规则5—将样式表放在顶部（使用LINK标签将样式表放在文档的HEAD中）

规则6—将脚本放在底部

规则7—避免使用CSS表达式

p{
    /*IE浏览器会识别这一项，忽略min-width,其他浏览器则相反*/
    width: expression(document.body.clientWidth<600?"600px":"auto");
    min-width: 600px;
    border: 1px solid;
}

<script>
function doOnload() {
    // Do the downloading awhile AFTER the onload.
    setTimeout("downloadComponents()", 1000);
}
window.onload = doOnload;
// Download external components dynamically using JavaScript.
function downloadComponents() {
    downloadCSS("http://stevesouders.com/hpws/testsm.css?t=1462242339");
    downloadJS("http://stevesouders.com/hpws/testsma.js?t=1462242339");
    downloadJS("http://stevesouders.com/hpws/testsmb.js?t=1462242339");
    downloadJS("http://stevesouders.com/hpws/testsmc.js?t=1462242339");
}
// Download a stylesheet dynamically.
function downloadCSS(url) {
    var elem = document.createElement("link");
    elem.rel = "stylesheet";
    elem.type = "text/css";
    elem.href = url;
    document.body.appendChild(elem);
}
// Download a script dynamically.
function downloadJS(url) {
    var elem = document.createElement("script");
    elem.src = url;
    document.body.appendChild(elem);
}
</script>

规则10—精简Javascript

    精简是从代码中移除不必要的字符以减小其大小，进而改善加载时间的实践。在代码被精简后，所有的注释以及不必要的空白字符（空格、换行和制表符）都将被移除。对于 JavaScript 而言，这可以改善响应时间效率，因为需要下载的文件大小减小了。
精简 CSS 能够带来的节省通常要小干精简 JavaScript, 因为通常 CSS 中的注释和空白比JavaScript少。最大的潜在节省来自于优化 CSS——合并相同的类、移除不使用的类等。CSS的依赖顺序的本质决定了这将是一个复杂的问题。这个领域还需要进一步研究和工具开发。最佳的解决方案还是移除注释和空白 ，并进行一些直观的优化，比如使用缩写（用 “#606” 代替 “#660066”和移除不必要的字符串 （用 “0”代替 “Opx”）。
在线 JS/CSS/HTML压缩工具
http://tool.oschina.net/jscompress

/*从服务器发送到客户端*/
Expires:Mon, 15 Apr 2017 20:00:00 GMT

/*客户端请求*/
GET /i/yahoo.gif  HTTP 1.1
Host: us.yimg.com

/*服务器应答*/
HTTP 1.1 200 OK
Last-Modified:tue, 12 Dec 2006 03:03:59 GMT
Content-Length: 1195

/*客户端请求*/
GET /i/yahoo.gif  HTTP 1.1
Host: us.yimg.com
If-Modified-Since:Tue,12 Dec 2006 03:03:59 GMT

/*服务器应答*/
HTTP 1.1 304 Not Modified

/*客户端请求*/
GET /i/yahoo.gif  HTTP 1.1
Host: us.yimg.com

/*服务器应答*/
HTTP 1.1 200 OK
Last-Modified:tue, 12 Dec 2006 03:03:59 GMT
ETag: "10c24bc-4ab-457e1c1f"
Content-Length: 1195

/*客户端请求*/
GET /i/yahoo.gif  HTTP 1.1
Host: us.yimg.com
If-Modified-Since:Tue,12 Dec 2006 03:03:59 GMT
If-None-Match: "10c24bc-4ab-457e1c1f"

/*服务器应答*/
HTTP 1.1 304 Not Modified

/ws/mail /vl / formrpc?m=GetMessage&yid=steve_souders

前端性能优化规则总结—读《高性能网站建设指南》

标签：

原文地址：http://www.cnblogs.com/star91/p/5459364.html