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前端性能优化优于计算机学院。