如何分析并优化网页的性能？

一个网站的网页是好是坏，往往是体现在速度和高度两个方面，速度是网页所展示出来的时间，能否为浏览用户节约时间。高度则是一个网站网页本身的质量，能否为浏览用户带来真正的好体验。然而看似简单的两个点，但是背后要实现起来是需要花费精力和时间的。任何网站的终极目标不仅仅是让其运行很快，而是让使用该网站的用户满意。用户花在网站上的大多数时间不是等待加载，而是在使用过程中等待响应。

一个网页打开速度慢，图片加载慢，浏览卡顿，页面的动画效果不流畅，或者突然崩坏等，这种网站无疑在用户心里就是“垃圾网站”。作为一个网站开发者，谁愿意看到这种情况?所以提高网页性能势在必行!

第一，要对页面性能进行分析，那么首要了解浏览器加载的过程，主要包括连接和渲染。

1、建立连接过程

1) 浏览器查找域名的IP地址

2) 浏览器给web服务器发送一个HTTP请求

3) 服务器发送永久重定向响应

4) 浏览器跟踪重定向地址

5) 服务器“处理”请求

6) 服务器发回一个HTML响应

2、浏览器渲染

解析HTML->构建DOM树->渲染树构建->渲染树布局->绘制渲染树

第二，优化网页性能的大概方法

1、开启浏览器缓存

浏览器要根据域名找出IP地址，而DNS查找过程的第一步是在浏览器缓存中查找，根据Chrome的PageSpeed给出的建议：要利用浏览器缓存存储可缓存的资源。在 HTTP 标头中为静态资源设置有效期或最长存在时间，可指示浏览器从本地磁盘中加载以前下载的资源而不是从网络中加载。

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

1) Expires和Cache-Control：max-age.即内容在缓存中的生命有效期。第一次请求后将在生命有效期之内直接从本地缓存中拿取。

2) Last-Modified和ETag.：Last-Modified标记文件最后一次修改的时间，浏览器请求是在头部加入上次请求缓存下来的Last-Modified时间，若两次请求期间服务器的内容没有修改，服务器返回304 Not Modified，则不下载资源，浏览器直接使用本地缓存;否则，服务器会返回200以及更新后的版本。ETag是服务器对于文件生成的Hash散列，其生成算法与最后一次修改的时间相关。浏览器第二次请求发送上次的ETag信息，服务器通过简单的比对就知道是否应该返回304还是200。PageSpeed建议，要为资源指定Last-Modified或ETag标头，以便启动缓存验证。

2、页面内容组织

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

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

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

3、HTML

1)压缩HTML。

2)为图片指定大小，减少重排。

3)减少HTML标签嵌套深度，嵌套越深，在移动端的Web页面渲染速度以及滚动流畅度都会有所减低。

4)使用HTML5新标签，例如header、footer、section、nav、article。因为它们语义化，速度快，结构合理，浏览器上识别能力强。

4、CSS

1)避免使用滤镜。

2)不使用@import。

3)合并和压缩CSS代码。

4)减少渐变、阴影的使用。

5)模块化、精简css，提高复用率。

6)合理使用CSS3高性能动画，Translate3d支持硬件加速。

7)使用CssSprite将零星的背景图包含到一张图中，通过background-position来使它显示在正确的位置;只请求一张图，减少了HTTP请求的次数。

5、Java

1)模块化代码：SeaJs。

2)合并和压缩Java代码。

3)压缩工具：YUI Compressor或JSMin等。

4)使用事件委托机制，避免频繁操作DOM节点。

5)暂缓 Java 解析，暂缓解析不需要的 Java(等到需要执行时再进行解析)，可以提高网页的初始加载速度。

6、 图片优化

1)压缩图片

2)图片时页面大部分加载时间所花的地方，在图片设计的时候应该考虑相应的图片大小和格式

第三，网页性能优化实战分析

以Chrome Developer Tools作为示例工具讲解(可通过F12键打开)，目前各大主流浏览器都有类似的插件功能。

1、 Network可以查看页面加载时长，资源加载情况(状态、时长)，资源加载时间具体分析，从而针对性的优化页面

2、timeline 可看页面渲染情况，从而进行页面优化

3、profiles可看函数执行情况

第四，网页性能优化推荐工具

1、Chrome(Firefox) Developer Tools ——分析性能

2、HttpWatch ——IE插件，分析网页性能

2、PageSpeed —— 查看性能建议

3、Fiddler —— HTTP/HTTPS网络调试

最后，别忘记了一件事，完成相关的网页优化操作后，再进行适当的网页性能测试，以防前面的工作变成无用功。一个好的网站不是开发一个人的事情，还有产品、设计、SEO、测试等人员参与其中。