[转]Web前端性能优化

JS优化功能详解

    * 首屏尽量不要出现JS文件
    * 支持并行下载
    * JS文件不宜过大
    * 精简 JS代码
    * JS文件不宜过多
    * 用gzip 压缩JS文件

 

 

首屏尽量不要出现JS文件
用户打开页面时，首先看到就是首屏的内容，因此首屏能否快速显示，直接影响到用户体验的好坏。
JS文件的下载与解析会阻塞其它请求的下载（支持并行下载的JS除外）。 如果把JS放到首屏中，将降低首屏性能。
因此，我们建议把JS文件放到首屏之后。而一般来说，这也是可以做到的，如果有非要在首屏中出现的JS代码， 那么我们建议把这部分JS代码做为内联代码放到html文档中。

 

支持并行下载
在传统浏览器中（firefox-3.1b及以上版本例外），下载JS文件会阻塞后面文件的下载，这时浏览器会由并行下载变成串行下载。 因此如何让JS文件与其它文件并行下载便变得很有意义。这里有6种方法可以使JS文件与其他资源并行下载：
    * XHR eval -- 通过XHR(XMLHttpRequest对象)下载script，然后用eval方法执行XHR的responseText。
    * XHR Injection -- 通过XHR下载script，然后建立一个script标签并把它插入文档中(body或者head标签内)，接着把script标签的text属性设置为XHR的responseText的值。
    * XHR in Iframe -- 把script标签放到一个iframe里，通过iframe下载它。
    * Script DOM Element -- 创建script标签并把它的src属性指向你的脚本地址。
    * Script Defer -- 添加script标签的defer属性，这个在ie和firefox3.1中有效。
    * 使用document.write方法在页面中写入<script src="">,这个只在ie里有效。
本规则将检查所有不能并行下载的JS文件，并给出警告。注意：如果某个JS请求是页面中的最后一个请求， 那么该JS文件将同样被视为可并行的，原因是把JS文件放到页面末尾，同样不会阻塞其它请求下载，起到的作用其实跟并行JS是一样的。

 

JS文件不宜过大
JS文件下载会阻塞其它请求的下载（支持并行下载的JS除外）， 过大的JS文件则会进一步加剧这种阻塞，同时也会对浏览器的解析效率造成很大的影响。
因此我们建议精简js代码，去掉不需要的库代码及无用函数，并让JS文件支持并行下载。
这里我们的标准是JS文件压缩前不要超过30KB，超过30KB将被认定为过大。

 

精简JS代码
 精简JS代码是指除去不必要的字节，比如多余的空格、换行、缩进以及注释等等。精简JS代码不仅可以节约流量，加快代码下载，还能加快浏览器的加载和执行。
下面是三个常用的精简JS代码的工具
    *  Closure Compiler
    * JSMin
    * YUI Compressor

 

JS文件不多于8个
 前面在JS文件不宜过大中说过， 我们建议将过大的JS文件拆分到多个可支持并行下载的较小的文件中， 然而如果JS文件过多，将会产生过多的RTT(Round-Trip Time，往返时延)，也会影响页面性能。
好的开发者在设计Web程序的时候都注重模块化和可重用性，将不同模块的代码放入不同的文件中在软件工程的角度来讲毫无疑问是非常好的选择。 但是这种做法将大大增加页面加载的时间。 首先，对于没有cache的浏览器来讲，浏览器需要对每一个JS文件发出一个HTTP请求,一次HTTP请求就会增加一次往返时间。其次，大部分的浏览器 在JS（支持并行下载的JS除外）加载和解析的过程中，会阻止页面其它部分的加载。
然而在实际的web开发中，也有其它的因素会决定最终JS文件的个数。首先，对那些不需要在页面加载时就执行的JS，可以让其支持并行下载和进行延迟加载。 其次，部分代码需要经常进行更新，维护多个版本，在这种情况下通常需要将这部分代码独立出来。最后，可能有一些JS文件是放在你不能控制的域名中， 比如广告、数据统计、用户跟踪等。

 

用gzip压缩JS文件
大部分的现在浏览器都支持对HTML代码、CSS、Javascript的压缩，这就允许数据在传送过程中使用更加紧凑的方式，从而明显地减少下载的时间。
建议用gzip压缩JS文件。使用gzip压缩JS文件可以减少约2/3的网络传输。
本规则将检查没有采用gzip压缩的JS文件。

CSS优化功能详解

   *  CSS文件不宜过大
    * 没有多余CSS代码
    * 最多只有一个CSS文件
    * 用 gzip压缩CSS文件
    * 避免使用CSS表达式
    * 把CSS放到 head中

CSS文件不宜过大
一般页面的样式表代码不可能太大，我们的建议是CSS文件压缩前不要超过20K。如果超过20K，请查看规则没有多余CSS代码，检查是否有多余的CSS代码。

没有多余CSS代码
该规则将在所有内联(inline)CSS代码和外部CSS文件中找出没有被当前页面用到的样式块。

最多只有一个CSS文件
我们认为一个页面中的CSS代码完全可以放到一个文件中。如果CSS文件多于一个，请合并到一个文件中。

用gzip压缩CSS文件
建议用gzip压缩CSS文件。使用gzip压缩CSS文件可以减少约2/3的网络传输。

避免使用CSS表达式
CSS表达式只能应用于IE5~IE7浏览器中，其它浏览器都不支持CSS表达式。 使用CSS表达式会降低浏览器的渲染速度，用其它方式来代替CSS表达式将提高IE的渲染速度。

把CSS放到head中
把内联的CSS代码和<link>元素（外部CSS文件）从body中移到head中将提升渲染性能，这是因为：
    * 首先，浏览器将阻塞直到所有的外部CSS文件下载完后才开始渲染。
    * 其次，内联的CSS代码可能会使内容重新渲染，导致内容产生“漂移”或“闪烁”。
因此，把<link>和<style>标签都放到head中便变得有意义，不仅可以避免以上问题，还可以使到浏览器对页面进行逐步渲染。

 

图片优化功能详解

    *  指定图片尺寸
    * 最小化图片
    * 小图片请求不应过多
    * 控制图片数量
    * 图片文件不宜过大
    * 图片至少来自 2个域名

指定图片尺寸
图片是一种可代替的页面元素，浏览器可以在图片下载完成之前就开始渲染页面，前提是它知道图片的尺寸， 这样才能为周围那些不可代替的页面元素布局。如果图片没有指定尺寸，或者指定尺寸与真实图片不符合， 那么在图片下载完成之后，浏览器将需要重新布局和重绘。所以，为了避免重复重复渲染，需要为页面中所有图片指定高度和宽度。

最小化图片
一般图片制作完成后，可能会包含多余的信息。页面中的图片也可能出现真实尺寸大于页面中的指定尺寸（这时图片其实被扭曲了）。
本规则将对以上2种情况进行优化：
    * 压缩图片，在不影响图片质量的前提下，对图片进行最小化压缩。
    * 检查图片真实尺寸是否与页面中指定的尺寸一致。

小图片请求不应过多
页面请求过多将延长用户下载页面的时间。对于多个小图片请求，可以通过Image Maps或CSS Sprites等技术来合并图片， 并且如果小图片数量很多，建议采用分屏合并的方法，按先后屏的顺序合并，若干屏合成一个图， 这样既通过小图片合并减少了页面请求数，又不会产生过大的图片而影响到首屏的性能。
在本规则是针对首屏的，小于5K的图片将被认为是小图片。如果首屏中小图片数超过20个将会被认为过多。

控制图片数量
过多的图片请求将延长用户下载页面的时间。本规则将进行以下3个方面的检查：
    * 图片总数是否过多。这里将根据页面高度来评判图片数量，如果图片数大于20+6h/800,其中h为页面高度，将认为过多。
    * 来自mat和img域名的图片是否过多。
    * 小图片是否过多

图片文件不宜过大
本规则将针对一般网页上的图片进行检查（本规则不适用于评判高清大图），主要有以下3个方面：
    * 50K以上的图片都将认为过大。
    * 15K~50K的图片，如果图片面积(即宽像素 x 高像素)小于(图片文件大小 * 1.25)，将认为该图片过大。
    * 10K~15K的图片，如果图片面积小于11440（130 x 88，这个值取自“积木标准项目-图片规范.doc”中10K图片文件的最小面积），将认为该图片过大。

图片至少来自2个域名
图片一般分为素材图片和内容图片两种，这两种图片分别来自不同的域名。因此如果发现所有图片只来自同一个域名，则可能某些图片放错了域名。

 

服务器端优化功能详解
    * 设置浏览器缓存
    * 相同的资源从同一URL获取
    * 减少 DNS查找
    * 把静态资源放到无cookie的域名中
    * 避免重定向
    * 避免 404错误
    * 减少 cookie大小

设置浏览器缓存
为静态资源设置缓存可以让浏览器下次访问该页面时直接从本地磁盘直接获取页面资源。页面中的JS、 CSS、图片、flash等都视为可缓存资源。
本规则将检查以下几种情况：
    * 没有指定缓存时间的可缓存资源。
    * 头部用Vary头。IE会禁止缓存任何使用了Vary头部的资源，因此要避免使用Vary头部。
    * 指定的缓存时间不够长。一般图片和flash指定一年以上的缓存时间，CSS和JS文件指定一周以上的缓存时间。
    * URL冲突。在Firefox中，磁盘缓存所用的哈希函数对于相差很小的URL会产生冲突。

相同的资源从同一URL获取
本规则检查页面中是否有重复资源：即两个资源，内容一样，但是URL不同。

减少DNS查找
本规则将检查以下2种情况：
    * 对于整个head及body的前10%中出现的script标签，如果这些标签的域名跟页面URL的域名不同，则认为违法规则。 理由是出现在前部（这里限定为整个head及body的前10%）的JS请求本来就会阻塞后面请求的下载（除非采用了JS文件可并行下载的方法）， 如果这些JS文件的URL跟页面URL不同，则为了获取这些JS文件还需再这之前进行DNS查找。这将会对页面的逐步渲染造成较大影响。
    * 对于只存放了一个资源的域名，也会进行提示，原因是一般是可以做到一个域名存放多个资源的， 如果一个域名只存放一个资源，则引起的DNS查找就显得过于浪费了。

把静态资源放到无Cookie的域名中
静态资源如图片、flash、CSS和JS文件是不需要Cookie的，如果把这些文件放到有Cookie的域名中，则会产生多余的Cookie流量。
本规则将检查并提示是否有静态资源放在有Cookie的域名中。

避免重定向
重定向将产生额外的请求。
本规则将检查页面中的重定向请求。

避免404错误
产生404错误的原因是服务器找不到对应的url请求，这实质上也是产生了额外的请求。
本规则将检查页面中是否出现返回404的请求。

减少cookie大小
Cookie没必要也不宜过大。
本规则将检查以下2种情况：
    * 如果某个Cookie超过1K，则认为该Cookie过大。
    * 如果所有Cookie的平均大小超过400个字节，则认为平均Cookie过大。

 

其它优化功能详解
    * 首屏高度是否合适
    * 避免使用iframe

首屏高度是否合适
首屏高度过大或过小都将影响用户体验。
本规则以900像素为准来判断首屏高度是否合适，并列出首屏内的所有请求。

避免使用iframe
iframe会增加额外的请求，应尽量避免iframe的使用。
本规则将找出页面中的所有iframe。