html5 内嵌网页_如何分析并优化网页的性能？新梦想软件测试

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

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

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

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。