【读书笔记】《高性能网站建设指南》之前端优化实践

最近翻了翻《高性能网站建设指南》一书，学习了一些前端性能优化的知识，收获还是蛮多的。全书主要详细介绍了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记录缓存的一个存活时间，该值告诉客户端该记录可以缓存多久。

燎原之火的菠萝格

Just for fun

【读书笔记】《高性能网站建设指南》之前端优化实践

内容优化

减少HTTP请求

1、图片地图

2、CSS Sprites

3、内联图片

4、脚本、样式表合

减少DNS查找

1、DNS缓存

2、TTL

避免重定向

使用Ajax缓存

服务器优化

使用CDN

添加Expires头

压缩组件

配置ETag

Cookie优化

JavaScript优化

CSS优化

图像优化

更多阅读

公告