最近翻了翻《高性能网站建设指南》一书,学习了一些前端性能优化的知识,收获还是蛮多的。全书主要详细介绍了14条前端性能优化规则及实践案例,虽然这书出版已经有些年份了,但是书中的大部分规则依旧还是适用的,不过目前Yahoo!'s Exceptional Performance team 总结的性能优化规则已经增加到34条,而且对这些规则做了不同的分类。另外一本《高性能网站建设进阶指南》是上一本的进阶之作,涵盖更多性能优化方面的实践,内容博大精深,还得花点时间消化消化。以下是对性能优化知识的一些简单的总结:
内容优化
减少HTTP请求
网站响应时间有80%是花在HTML文档所引用的所有组件(图片、脚步、样式、Flash等)进行的HTTP请求上的,所以改善响应时间的简单方法就是减少组件的数量,从而减少HTTP的请求数量。
以下的方法能够有效地减少HTTP的请求:
1、图片地图
在图片上关联多个URL,目标URL的选择取决于用户点击了图片哪个位置上。
2、CSS Sprites
将多个图片合并到一个单独的图片中。
3、内联图片
通过使用data:URL模式可以在Web页面中包含图片但无需带来额外的HTTP请求。
4、脚本、样式表合
将多个文件合并成一个文件,减少HTTP请求。
减少DNS查找
DNS(Domain Name System),即域名系统,主要是将主机名映射到IP地址上,当在浏览器输入域名例如:www.example.com 时,连接到浏览器的DNS服务器就会解析域名,返回对应的IP地址,然后请求服务器内容。这个过程会造成一定开销,从而增加页面响应时间。
可以通过DNS缓存和TTL方法减少DNS的查找时间
1、DNS缓存
DNS查找可以被缓存起来以提高性能。这种缓存可以发生在你ISP或局域网的一台缓存服务器上,还可以是在用户计算机上的DNS缓存。当用户请求一个主机后,DNS信息就会缓存下来,用户下次再访问主机时,就直接在DNS缓存里面查找,节省了查找的时间。
2、TTL
TTL(Time-to-live):表示DNS记录缓存的一个存活时间,该值告诉客户端该记录可以缓存多久。
避免重定向
重定向用于将用户从一个URL重新路由到另外一个URL。
使用Ajax缓存
服务器优化
使用CDN
添加Expires头
压缩组件
配置ETag
Cookie优化
JavaScript优化
CSS优化
图像优化
更多阅读
Yahoo!'s Exceptional Performance team promotes best practices for improving web page performance.
高性能网站建设进阶指南
高性能网站建设指南