优化Web前端性能

Page Speed优化Web前端性能

1、使用gzip压缩

这里放在第一，是性能优化效果最显著的一步。所谓gzip压缩是一种开发的压缩算法，目前的主流浏览器（Firefox， Safari， Chrome，IE4及以上）与主流服务器（Apache， Lighttpd， Nginx）均对其有很好的支持。gzip压缩是通过HTTP 1.1协议中的Content-Encoding ： gzip来进行标记说明，其可以明显减少文本文件的大小，从而节省带宽和加载时间。我做过的一个实验，发现启用gzip后，jquery 1.2.6 minify版本的大小从54.4k减少到16k，减少了70%。gzip适用的情况包括：HTML\CSS\JavaScript文件，gzip算法对于文本文件的效率比较高，而jpg/gif/png/pdf等二进制文件本身已经进 行了一次压缩，再使用gzip的成效已经不明显了。而且gzip压缩需要消耗服务器的资源，而解压缩需要消耗浏览器的资源，对于比较大的二进制文件具有非 常高的性能消耗；

2、尽量使用一种大小写方式，要么全部大写，要么全部小写。学过数据结构和算法的同学一定知道压缩其本身就是对冗余信息熵进行压缩，如何数据原素的类型种类太多，其信息冗余度会降低，从而压缩率降低；

3、过小的文件（通常小于150个字节）不宜进行gzip压缩，因为gzip会在文件头加入相关信息，对于小文件反而会增加文件的长度；

关于各服务器如何启用gzip，可以参加相关文档说明。

 

如何检查gzip是否启用？使用Firebug，在Net模块中进行检查HTTP Header是否有Content-Encoding gzip标记，参见下图：

apache开启gzip

1. httpd.conf中打开deflate_Module和headers_Module模块 http://robin.sh

2. httpd.conf中添加: simple is beautiful

<IfModuledeflate_module>

SetOutputFilter DEFLATE

# Don’t compress images and other

SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png)$ no-gzipdont-vary

SetEnvIfNoCase Request_URI .(?:exe|t?gz|zip|bz2|sit|rar)$no-gzip dont-vary

SetEnvIfNoCase Request_URI .(?:pdf|doc)$ no-gzipdont-vary

AddOutputFilterByType DEFLATE text/html text/plaintext/xml text/css

AddOutputFilterByType DEFLATE application/x-javascript

</IfModule>

 

4、最小化JS和图片

对于JavaScript文件本身具有非常大的优化空间。所谓JavaScript压缩，就是通过一些工具将函数、变量名进行优化（其实就是尽可能 缩短变量名长度），消除多余字符（比如空格、换行符、注释等），最终得到的代码可以在分析和执行上得到性能提升。压缩后得到的代码对于机器而言是可读的， 对于人来说就不行了，因为文件内容已经面目全非。所以压缩一般用于生产期的代码，不能使用于开发期。

同样的道理，图片内容中也有一定的冗余信息，比如文件头部的一些内容描述（这些内容在jpg）图片上尤其如此。通过一定的工具（比如GIMP）可以 去除这些信息，从而节省一定的空间。

幸运的是，Page Speed已经内置了这些功能，我们不需要找第三方的工具。如下图所示，可以看到对JS文件进行最小化可以得到的预期效果：

5、启用浏览器缓存

这是经常使用的方法。当请求的资源在浏览器本地得到缓存后，第二次请求这些内容就可以从直接缓存中取出，减少了连线的HTTP请求。

HTTP 1.1提供的缓存方法主要有两种：

1.Expires andCache-Control： max-age. 即内容在缓存中的生命有效期。第一次请求后，在生命有效期之内的后期请求直接从本地缓存中取，不过问服务器；

2.Last-Modifiedand ETag. 其中Last-Modified标记文件最后一次修改的时间，浏览器第二次请求是在头部加入上次请求缓存下来的Last-Modified时间，如何两次 请求期间服务器的内容没有进行修改，服务器直接返回304 Not Modified，浏览器接到以后直接使用本地缓存。否则，服务器会返回200以及更新后的版本。ETag是服务器对于文件生成的Hash散列，其生成算法与最后一次修改的时间相关。浏览器第二次请求发送上次的ETag信息，服务器通过简单的比对就知道是否应该返回304还是200。

6、JavaScript延迟加载

通常浏览器在解析HTML时遇到JS文件会先下载，解析执行后才会下载后面的内容，期间自然会造成一定的延时。为了提高性能，尽可能将JS文件的位 置后移，如果可能，还可以通过部分代码进行异步加载。另外，对于JS和CSS在必须放置在一起情况，需要报JS放置在CSS之后，这样CSS与JS文件可 以同步下载。

7、文件拼接

这里主要包括JS/CSS等文本文件和图片。对于文本文件，尽可能将同一类型放置到一个文件中，减少HTTP请求。对于CSS背景图片，可以使用 Sprit技术将图片拼接到一起，然后使用background-position属性选择对应的图片。

 

分析自己写的页面

1、提供压缩后的图片

适当地调整图片的大小，可节省大量的数据字节空间。在HTML或CSS中的大小经过了重新调整。使用缩小的图片可腾出的一定的空间，假如页面需要的图片大小是106*80，应该使用ps技术把原始图片1588*1191调整成106*80.，而不是通过css中width、height设成106和80.

2、使用浏览器缓存

在 HTTP 标头中为静态资源设置有效期或最长存在时间，可指示浏览器从本地磁盘中加载以前下载的资源而不是从网络中加载。

3、优化图片

适当地设置图片的格式并进行压缩，可节省大量的数据字节空间。

4、启用压缩

使用 gzip 或 deflate 压缩资源，可减少通过网络发送的字节数。

5、压缩 JavaScript

压缩 JavaScript 代码可以节省大量的数据字节空间，并提高下载、解析和执行的速度。

6、压缩 CSS

压缩 CSS 代码可以节省大量的数据字节空间，并提高下载、解析和执行的速度。

7、暂缓 JavaScript 解析

通过最大程度地减少显示网页所需的 JavaScript 数据量，并暂缓解析不需要的 JavaScript（等到需要执行时再进行解析），您可以提高网页的初始加载速度。

8、压缩 HTML

压缩 HTML 代码（包括其中所含的任何内嵌 JavaScript 和 CSS）可节省大量的数据字节空间，并提高下载、解析和执行的速度。

9、避免出现错误的请求

删除“已损坏的链接”或会导致 404/410 错误的请求，可避免发出无效的请求。

10、避免在 CSS 中使用 @import

在外部样式表中使用 CSS @import 会增加网页加载时的延迟。

11、请指定缓存验证工具

通过指定缓存验证工具（Last-Modified 或 ETag 标头），您可以确保系统能够有效地确定缓存资源的有效性。若没有为资源指定缓存验证工具，该资源将无法高效刷新。请为资源指定 Last-Modified 或 ETag 标头，以便为这些资源启用缓存验证：

12、指定图片大小

为所有的图片指定宽度和高度，可消除进行不必要重排与重绘的需求，从而加快图片的显示速度

13、将 CSS 放在文档标头处

将内嵌样式块和 <link> 元素从文档主体移至文档标题，可改善显示性能

14、请指定一个“Vary: Accept-Encoding”标头

指示代理服务器缓存资源的两个版本：压缩版与未压缩版。这样有助于避免公共代理无法正确检测 Content-Encoding 标头的问题。

15、优化样式表和脚本的排列顺序

正确地排列外部样式表与外部和内嵌脚本的顺序，可增加下载时同时加载的数据量，并提高浏览器显示网页的速度。

16、内嵌小型 CSS

将小型样式表内嵌到主 HTML 网页中，可减少在下载其他资源时的往返时间 (RTT) 和延迟时间。

17、内嵌小型 JavaScript

将小型 JavaScript 文件内嵌到主 HTML 网页中，可减少在下载其他资源时的往返时间 (RTT) 和延迟时间。

18、将图片组合为 CSS 贴图定位

尽量减少使用 CSS 贴图定位合并图片后的文件数量，可减少在下载其他资源时的往返时间和延迟时间、节省请求开销，并减少网页下载的总字节数

19、尽量减少请求的数据量

尽量减少 Cookie 和请求标头的大小，可确保将 HTTP 请求放入单个数据包中。

20、尽量减少重定向

尽量减少从一个网址到另一个网址的 HTTP 重定向次数，以减少额外的往返时间 (RTT) 和用户等待的时间。

21、指定字符集

尽早为您的 HTML 文档指定字符集，可让浏览器立即开始执行脚本。

22、由同一网址提供资源

请务必通过唯一的网址发布资源，这样才能避免下载重复的字节以及产生额外的往返时间 (RTT)。

23、首选异步资源

错开资源的加载时间可减小网页加载时出现资源堵塞的概率。

雅虎的卓越性能团队已经确定了23个军规：

1. 减少HTTP请求次数

合并图片、CSS、JS，改进首次访问用户等待时间。

2. 使用CDN

就近缓存==>智能路由==>负载均衡==>WSA全站动态加速

3. 避免空的src和href

当link标签的href属性为空、script标签的src属性为空的时候，浏览器渲染的时候会把当前页面的URL作为它们的属性值，从而把页面的内容加载进来作为它们的值。

4. 为文件头指定Expires

使内容具有缓存性。避免了接下来的页面访问中不必要的HTTP请求。

5. 使用gzip压缩内容

压缩任何一个文本类型的响应，包括XML和JSON，都是值得的。

6. 把CSS放到顶部

7. 把JS放到底部

防止js加载对之后资源造成阻塞。

8. 避免使用CSS表达式

9. 将CSS和JS放到外部文件中

目的是缓存，但有时候为了减少请求，也会直接写到页面里，需根据PV和IP的比例权衡。

10. 权衡DNS查找次数

减少主机名可以节省响应时间。但同时，需要注意，减少主机会减少页面中并行下载的数量。

IE浏览器在同一时刻只能从同一域名下载两个文件。当在一个页面显示多张图片时，IE 用户的图片下载速度就会受到影响。所以新浪会搞N个二级域名来放图片。

11. 精简CSS和JS

12. 避免跳转

同域：注意避免反斜杠 “/” 的跳转；

跨域：使用Alias或者mod_rewirte建立CNAME（保存域名与域名之间关系的DNS记录）

13. 删除重复的JS和CSS

重复调用脚本，除了增加额外的HTTP请求外，多次运算也会浪费时间。在IE和Firefox中不管脚本是否可缓存，它们都存在重复运算JavaScript的问题。

14. 配置ETags

它用来判断浏览器缓存里的元素是否和原来服务器上的一致。比last-modified date更具有弹性，例如某个文件在1秒内修改了10次，Etag可以综合Inode(文件的索引节点(inode)数)，MTime(修改时间)和Size来精准的进行判断，避开UNIX记录MTime只能精确到秒的问题。 服务器集群使用，可取后两个参数。使用ETags减少Web应用带宽和负载

15. 可缓存的AJAX

“异步”并不意味着“即时”：Ajax并不能保证用户不会在等待异步的JavaScript和XML响应上花费时间。

16. 使用GET来完成AJAX请求

当使用XMLHttpRequest时，浏览器中的POST方法是一个“两步走”的过程：首先发送文件头，然后才发送数据。因此使用GET获取数据时更加有意义。

17. 减少DOM元素数量

是否存在一个是更贴切的标签可以使用？人生不仅仅是DIV+CSS

18. 避免404

有些站点把404错误响应页面改为“你是不是要找***”，这虽然改进了用户体验但是同样也会浪费服务器资源（如数据库等）。最糟糕的情况是指向外部 JavaScript的链接出现问题并返回404代码。首先，这种加载会破坏并行加载；其次浏览器会把试图在返回的404响应内容中找到可能有用的部分当作JavaScript代码来执行。

19. 减少Cookie的大小

20. 使用无cookie的域

比如图片 CSS 等，Yahoo! 的静态文件都在 yimg.com 上，客户端请求静态文件的时候，减少了 Cookie 的反复传输对主域名 (yahoo.com) 的影响。

21. 不要使用滤镜

png24的在IE6半透明那种东西，别乱使，淡定的切成PNG8+jpg

22. 不要在HTML中缩放图片

23. 缩小favicon.ico并缓存