前端性能优化

针对《高性能网站建设指南》的阅读总结：

一、减少HTTP请求

1. 图片地图：将多个图片请求url 合并为在一个图片上关联多个URL。

在导航栏或其他超链接中使用图片地图是加速页面的最简单方法。

缺点：用手工方式难以准确的定义图片地图的区域坐标而且除了矩形无法定义其他形状。

2. CSS Sprites （css雪碧图 ）

将多个图片合并为一张 单独的图片

3. 内联图片

通过使用data：URL模式可以在Web页面中包含图片，无需额外请求HTTP。

       

.home{background-image:url(data:image/gif;base64,RJJKKK)}

4.合并脚本和样式表

二、使用内容发布网络（CDN）

三、为组件添加长久的Expires头

添加一个长久的Expires头，可以使页面组件被缓存，如图片，脚本，样式表。

1.在Http1.1中，用Cache-Control:max-age=7888888(秒为单位)指定组件被缓存多久

2.使用Expires头可以减少浏览器响应时间，但是如果服务器有更新，不能及时获取最新组件。可以通过修订文件名，采用变量命名文件，将版本号加到文件名 中，如yahoo-3.9.js

四、压缩脚本和样式表

HTTP请求头中Accept-Encoding标识对压缩的 支持 ，Accept-Encoding：gzip，deflate。

Web服务器响应头Content-Encoding:gzip 通知 客户端压缩 方法。

五、使用LINk标签将样式表放到文档HEAD中。

六、将脚本移到页面底部。

七、避免CSS表达式。

八、将JavaScript和CSS放到外部文件中。

九、通过使用Keep-Alive和较少的域名来减少 DNS查找。

十、对JavaScript源代码进行精简。

十一、避免重定向。

十二、移除重复脚本，确保脚本只被保护一次。

十三、配置或移除ETag

ETag是唯一标识一个组件的一个特定版本的字符串。

十四、确保Ajax请求遵守性能指导，尤其应具有长久的Expires头。

参考：

《高性能网站建设指南》