《高性能网站建设指南》读书笔记

 读完这本书，对于网站性能有了一个更加深入的理解，以前对于网站的优化，还以为只是服务器的事，是后台设计模式或编码技巧的原因，是数据库优化的问题，没怎么考虑到前端的优化，但是这本书改变了我的局限思维，让我认识到前端对网站性能的影响是如此巨大：80%的最终用户响应时间花在了页面中的组件上，也就是说，如果我们可以将后端的响应时间缩短一半，整体响应时间只能减少5%~10%；而如果关注前端，缩短前端响应时间的一半，那么整体响应时间可以减少40%~45%。而前端改善网站性能的方法也不是无迹可寻，而是很有技巧很有方法的。这其中就包括书中介绍的14条规则：

1、减少http请求；

2、使用内容发布网络；

3、添加expires头部；

4、压缩组件；

5、将样式表放在顶部；

6、将脚本放在底部；

7、避免css表达式；

8、使用外部的javascript和css；

9、减少dns查找；

10、精简javascript；

11、避免重定向；

12、移除重复脚本；

13、配置etag；

14、使ajax缓存。

 当然这些规则，以前自己写代码的时候有意无意的根据前人的经验而遵守着，比如，添加expires头部，将样式表放在顶部，将脚本放在底部，大量小图片用css sprite处理，将样式表和脚本以引用的方式导入html。但是都没有认真的考虑过为什么要这样做，这样做-的好处，看完书之后，我找到了答案。这14条规则主要围绕着在不影响效果的前提下减少服务器和浏览器交互时的数据，更好地使用缓存。减少数据传递包括第1，4规则；更好的使用缓存，包括第2，3，8，9，11，14等规则，当然还要考虑页面渲染时的问题，这包括第5，6等规则。

1、减少http请求包括使用图片地图，css sprites，内联图片等技术，让服务器和浏览器之间的通信量尽量减少，通信数据降低，达到加快页面呈现的效果。

2、使用内容发布网络CDN，是为了减少各个地方用户与服务器的距离，达到反应速度快的效果。

3、而添加expires头部是为了让浏览器端在一定时间内缓存信息，避免传送重复不变的信息而浪费带宽，同时影响响应速度。

4、而将样式表放在顶部是为了防止页面渲染错乱，将脚本放在顶部是为了避免影响并行下载。

5、将样式表和脚本以外部文件的方式引用进来也是为了方便用户下一次访

问网站，可以直接提取缓存中的样式表和脚本文件，因为他们可以被用户缓存，等等。

6、将脚本放在底部，是因为脚本会影响到网页的并行下载。如果将脚本放在顶部，那么页面中的所有东西都位于脚本之后，整个页面的呈现和下载都会被阻塞，知道脚本加在完毕。

7、减少DNS查询，DNS查询是开销，一般浏览器查找一个给定的主机名IP地址要花费20~120毫秒，在DNS查找完成之前，浏览器不能从主机名那里下载到任何东西。一般是通过使用Keep-Alive和较少的域名来减少DNS查询。

8、避免重定向，在重定向完毕之前并且HTML文档下载完毕之前，没有任何东西现实给用户，所以重定向会使用户体验变慢。

9、移除重复脚本，这是由于团队开发和脚本数量管理时产生的出现一个页面重复引用同一个脚本的现象。重复脚本的引入，不仅会损伤页面载入效果，同时有可能带来性能上的问题，所以要确保脚本植被包含一次。

等等。

不仅对与网页优化有了更深入的了解，同时对于网页标志，交互流程有了更清晰的理解。

在网上又看到了一篇关于前端优化的文章《再谈Yahoo关于性能优化的N条军规》其中讲到了35条规则，增加了一些包括：开发智能事件处理程序；使用无cookie的域；尽量减少iframe的个数；根据域名划分页面内容；用<link>代替@import等等，我想规则可以有很多，但是要根据实际环境和需求来考虑网页前端优化，不可能面面俱到，规则只是我们进行参考的依据，不能完全以他作为指挥棒。