Web前端性能分析

Web前端性能通常上代表着一个完全意义上的用户响应时间，包含从开始解析HTML文件到最后渲染完成开始的整个过程，但不包括在输入url之后与服务器的交互阶段。下面是整个过程的各个步骤：

1. 开始解析html文件，从head到body按顺序从上到下。
2. 当解析到head部分的css外部链接时，同步去下载，如果遇到外部js链接也是下载
3. 接着解析body部分，边解析边开始生成对应的DOM树，同时等待css文件下载
4. 等到css文件下载完毕，那么就同步去用已经生成的DOM节点+css去生成渲染树
5. 渲染树生成结构模型，接着同步计算渲染树节点的布局位置
6. 计算完成节点坐标后，同步开始渲染
7. 进行过程中如果遇到图片则跳过去渲染下面内容，等待图片下载成功后会返回来在渲染原来图片的位置
8. 如果渲染过程中出现js代码调整DOM树机构的情况，也会再次重新来过，从修改DOM那步开始
9. 最终所有节点和资源都渲染完成

整个过程中会有很多的分别请求，所以TCP连接会很多，并且每一个用完都会自己关了，或者需要在keep-live字段标记上不自动关闭。

对于Web前端的性能分析从HTML网页的结构出发，分析其代码的合理性。性能分析工具使用Page Speed。Page Speed最初是Google内部使用的改进网页设计的工具——它整合在Firefox的著名插件Firebug中。当用户运行Page Speed，可以立即获得如何改进网页载入速度的建议。Page Speed工具提供浏览器插件和在线网站测评两种方式，这里使用在线网站的方式进行评测。

Page Speed Insights能根据以下内容衡量网页如何提升其性能：

l  首屏加载时间：从用户请求新页面到浏览器呈现首屏内容所用的时间。

l  完整的网页加载时间：从用户请求新网页到浏览器完全呈现网页所用的时间。

Page Speed的网站为：

https://developers.google.com/speed/pagespeed/insights/?hl=zh-CN

网页截图如下：

 

在文本框中分别输入我们需要评测的两个网站http://sse.hust.edu.cn和http://cs.hust.edu.cn，即可获得对应评分。Page Speed得分范围是从0到100分。分数越高，代表性能越好。85分或更高分表明网页性能良好。

其评分规则在以下链接：

https://developers.google.com/speed/docs/best-practices/rules_intro

包括10个Page Speed规则和5个可用性规则，分别是：

Page Speed规则

l  避免目标网页重定向

l  启用压缩功能

l  改善服务器响应时间

l  使用浏览器缓存

l  缩减资源大小

l  优化图片

l  优化CSS发送过程

l  按优先级排列可见内容

l  移除阻止呈现的JavaScript

l  使用异步脚本

可用性规则

l  避免使用插件

l  配置视口

l  调整内容的尺寸，使其符合视口设置

l  适当调整点按目标的尺寸

l  使用清晰可辨的字体大小

我们对目标网站的评分结果如下：

1.软件学院官网PC端

 

 

2.软件学院官网移动端

 

 

3.计算机学院官网PC端

 

 

4.计算机学院官网移动端

 

 

总结：根据以上结果我们汇总得到性能报告如下。

测试网站平台	软院PC	软院移动	计院PC	计院移动
总分数（%）	Needs Work 72	Poor 64	Needs Work 69	Poor 57
启用压缩	√	√	√	√
缩减CSS	√	√	√	√
缩减服务器响应时间			√	√
避免使用着陆页重定向	√	√	√	√
缩减HTML
缩减JavaScript	√	√
按优先级排列可见内容	√	√	√
优化图片
清除首屏内容中阻止呈现的JavaScript和CSS
使用浏览器缓存

可以看到，软件学院的网站相对于计算机学院都完成了缩减JavaScript的优化，但也缺少了缩减服务器响应时间的优化，计算机学院的移动端没有完成按优先级排列可见内容。另外还有一些别的优化没有完成，分别是：

1. 缩短服务器响应时间：服务器响应时间表示加载必要HTML以开始呈现服务器所托管网页的时间过长。应将服务器响应时间控制在200毫秒以内。有很多潜在因素都可能会延缓服务器响应，例如应用逻辑缓慢、数据库查询缓慢、路由缓慢、框架、库、资源CPU不足或内存不足等。需要考虑所有这些因素，才能改善服务器的响应时间。
2. 缩减JavaScript，可以使用工具Closure Compiler、JSMin或YUI Compressor。创建一个使用这些工具的构建流程，以便缩减开发文件的大小并对其进行重命名，然后将其保存到正式版目录。
3. 按优先级排列可见内容：Page Speed Insights检测到系统需要进行更多次的网络往返来呈现网页的首屏内容。工具提供的建议是：为提高网页加载速度，限制呈现网页首屏内容所需的数据（HTML标记、图片、CSS和JavaScript）大小。可以尝试以下几种方法：结构化HTML，以便首先加载关键的首屏内容；减少资源所用的数据量。
4. 缩减HTML：要缩减HTML的大小，可以使用Page Speed Insights Chrome扩展功能来生成优化版HTML代码。上面4个测试例子中都有17%左右的大小可以缩减。
5. 优化图片：尽量减小图片尺寸，以缩减用户等待资源加载的时间。适当地设置图片的格式并进行压缩可以节省大量的数据字节空间。建议是对所有图片进行基本优化和高级优化。基本优化包括裁剪不必要的区域，将颜色深度降至可接受的最低水平，移除图片评论以及将图片保存为恰当的格式。可以使用任意图片编辑程序（例如，GIMP）执行基本优化。高级优化包括对JPEG和PNG文件执行进一步的压缩（无损压缩）。
6. 清除首屏内容中阻止呈现的JavaScript和CSS：网页中有多个阻止呈现的脚本资源和CSS资源。这会导致呈现网页的过程出现延迟。在资源加载完毕之前，网页上不会直接呈现任何首屏内容。应该尝试暂缓或异步加载阻止资源，或者将这些资源的关键部分直接内嵌到HTML中。
7. 使用浏览器缓存：在HTTP标头中为静态资源设置过期日期或最长存在时间，可指示浏览器从本地磁盘中加载以前下载的资源，而不是通过网络加载。

结论：两个网站的前端都经过有一定程度的优化，但是仍有可优化的空间，总体来说，软件学院的web前端性能优化优于计算机学院。

转载于:https://www.cnblogs.com/hust-no-bug/p/8151359.html