因为别人的推荐，所以看了《高性能网站建设指南》，之前一直想好好做个总结，但是拖延症有点严重，过两天可能会有一个转正面试，正好好好总结下。
《高性能网站建设指南》结合Web2.0以来Web开发领域的最新形势和特点，介绍了网站性能问题的现状、产生的原因，以及改善或解决性能问题的原则、技术技巧和最佳实践。全面涵盖了前端性能问题的方方面面。在本书中，作者给出了14条具体的优化原则，每一条原则都配以范例佐证，并提供了在线支持。
前端性能的重要性
性能黄金法则：
只有10%20%的最终用户响应时间花在了下载HTML文档上，其余的80%90%的时间花在了下载页面中的所有组件上。
所以，如果希望能够有效地减少页面的响应时间，进而提高网站整体的性能，就必须把关注点放在这80%90%中。如果我们可以将后端响应时间缩短一半，整体响应时间只能减少5%10%，而如果关注前端性能，同样是减少一半响应时间，那么整体的响应时间可以减少40%~50%，这绝对是一个巨大的提升。
规则一：减少HTTP请求
减少了HTTP请求，不管用户是在第一次访问还是后续浏览，响应时间都会有显著的减少。主要使用的方法有：图片地图，CSS Sprites，内联图片和脚本，样式表的合并。
其实简单要说就是把能包在一起的东西全部都包在一起就好了。
1、图片地图，就是把页面上用到的多个图片合并成一张图片，利用map控制显示的位置，接着在这张图片上关联多个URL，加载的时候就只要发送一次HTTP请求获取这张图片就行了。
2、CSS Sprites合并图片，减少HTTP请求
3、内联图片。浏览器不会缓存这种图像。dataurl节省了HTTP请求,但是如果这个图像在网页多个地方显示会加大网页的内容，延长下载时间。还有一点IE8以下都不支持这种图像,所以一般不用。
4、合并脚本和样式表，尽量减少js和css的请求数量
规则二：使用内容发布网络
内容发布网络（content delivery network）是一组分布在多个不同地理位置的Web服务器，用于更加有效地向用户发布内容。就是可以使用cdn，租用或者自建都可以，不仅可以缩短响应时间，还可以缓和Web流量峰值压力，而且还有提供其他服务，自行百度吧。
CDN发布的内容主要是静态内容，如图片、脚本、样式表和Flash。主要是静态内容更容易存储且具有较少的依赖性。
规则三：添加Expires头
这个规则主要是针对缓存的，使用缓存来减少加载组件的数量，不是针对首次访问的优化，但是对于多次浏览的响应时间的优化还是巨大的。通过使用一个长久的Expires头，可以使需要缓存的组件被缓存，这会在后续的页面浏览中避免不必要的HTTP请求。
Expires: Mon, 15 Apr 2024 20:20:20 GMT
这是一个有效期非常长久的Expires头，它告诉浏览器该响应的有效期持续到2024年4月15日为止。如果为页面中的一个图片返回了这个头，浏览器在后续的页面浏览中会使用缓存的图片。
Expires存在限制，要求服务器和客户端的时间严格同步，过期日期需要检查，并提供新日期，所以还有另外一种选择，cache-control使用max-age指令指定用户被缓存多久，达到的效果也是一样的。
作为一个比较low的前端开发，虽然可以看懂其中的逻辑，但是讲真，我之前完全没有听过这个词，看完之后也还不是很懂得怎么把这个付诸实践，然而这并不影响这个的规则的有效性。
规则四：压缩组件
这个其实没有什么好解释的，就是启用Gzip压缩，压缩文档、脚本、样式表，传输的大小变小了，响应时间自然就减少了。
规则五：将样式表放在顶部
规则六：将脚本放在底部
在下载脚本时浏览器会阻塞并行下载，如果放在上面的话有可能要等到页面加载完成才能看到界面的整体效果，这对用户体验是很差的。
规则七：避免CSS表达式。
表达式的问题在于对其进行的求值，它们不只在页面呈现和大小改变时求值，当页面滚动、甚至用户鼠标在页面上移过时都要被求值。所以对页面的性能影响是很大的。
CSS3提供了calc()函数，可以用来实现css的一些求值运算。
规则八：使用外部的JS和CSS
因为外部的JS和CSS是可以被缓存的，而如果是内联的话就要每次都要加载。
规则九：减少DNS查找
方法：通过使用Keep-Alive和较少的域名来减少DNS查找
其他
- 规则十、精简JS，相当于压缩，且会除去注释及空格
- 规则十一、避免重定向。重定向会延迟整个HTML文档的传输
- 规则十二、移除重复脚本
- 规则十三、配置或移除Etag
- 规则十四、使用Ajax可缓存。确保ajax请求遵守性能指导，尤其应具有长久的expires头
网友评论