读《高性能建站指南》（上）

绪言部分介绍了为什么要进行web前端性能的优化以及HTTP协议的简单知识。为什么要进行web前端性能的优化？作者提出了一个前端性能的黄金法则：一般情况下，web页面的显示展示过程中，10%~20%用于下载HTML文档，而80%左右的现在前端组件（图片、js、css），因此对前端组件的处理会对web性能有很大的影响。此外，单纯的从系统整体调优的角度考虑，前端性能调优的工作量更小（相对于后台设计、架构的调整），而产生的效果也更加明显。对于HTTP协议，绪言中重点介绍了HTTP头（header），包括压缩（Content-Encoding）、条件Get请求（If-Modified-Since、Last-Modified）、缓存（Expired）、持久连接（Connect:keep-live）。

        接下来介绍了第一条优化规则：减少HTTP请求，这条规则对用户第一次请求web页面性能影响很大（因为没有缓存）。该规则下重点介绍了减少图片的方式。1.图片地图，将图片合并到一张图片中，使用css坐标定位到大图片中具体位置；2.css sprites，也是将图片合并到一张大图中，然后使用css的background，动态设置图片显示的位置；3.内联图片，将图片直接包含到web页面中，但IE支持存在问题；4.合并脚本和css，将多个js和css文件合并到一个文件中，可以配合压缩的方式。第4条规则的应用比较多，目前在线服务和第三方框架都有支持，大名鼎鼎的YUI compressor还有Eclipse的插件。

        第二条规则：使用内容发布网络（CDN），大概的思路就是将web组件发布到第三方服务器上，当然第三方的web请求相应直接影响了web页面的性能。

        第三条规则：添加Expires头，在绪言中已经介绍了大概的思路，具体就是使用Max-Age和Expires，两者分别在http1.1和http1.0下支持。此外，书中还介绍了使用修改文件名的方式实现对已修改文件的下下载，这一点觉得还好，因为我们不能告诉用户“你应该用Ctrl+F5的方式请求新的页面”，具体的实施步骤还没有动手尝试，后续需要补充。在tomcat7中已经加入了ExpireFilter，通过配置的方式实现对不同类型前端组件的不同缓存方式。

第四条规则：压缩组件，思路就是减小文件大小，提高传输速率。书中介绍了一种比较常用的压缩方式：gzip。主流的服务器和浏览器均支持该方式，其中tomcat只需要在server.xml的connector中增加配置即可，如下：

compression="on"
        compressionMinSize="50"
        compressableMimeType="text/html,text/css,text/javascript"

书中还介绍了，对于不支持gzip的浏览器、缓存、代理服务器三种结合时出现的复杂情况的处理方式，不得不佩服，考虑的的确周到。由于目前很多系统中js代码很多，也都开始使用了模块化的管理方式，因此在压缩时也有两种处理方式：单文件压缩和按逻辑压缩。单文件压缩的方式就是工作量小，傻瓜式，但是当对文件有很小的改动时，都会导致缓存失效。按逻辑压缩会是前端逻辑复杂度增加，工作量加大，但是目前已经有第三方框架对这这方面进行了努力，如require.js。

 

        第五条规则：将样式表放在顶端。页面的展示是在html文档下载完和css下载完之后，通过浏览器的渲染后展示的，开发人员希望html文档能够先显示，然后再使用css对样式进行重绘，当css靠后就会阻止HTML文件的展示，造成整体性能的下降。

        第六条规则：将脚本放在底部。浏览器存在并行下载的特性，而js阻止并行下载，因此需要将js尽量靠后放置，以充分利用并行下载。