读《高性能建站指南》(上)

绪言部分介绍了为什么要进行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中增加配置即可,如下:

[html] view plaincopy
 
  1. compression="on"  
  2.         compressionMinSize="50"  
  3.         compressableMimeType="text/html,text/css,text/javascript"  

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

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

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

原文地址:https://www.cnblogs.com/littlehb/p/3053980.html