性能测试过程之前端性能.pdf

一、前端性能

1.前端基础知识概述

作为与客户接触最直观的交互点,前面页面的展现速度直接决定了用户体验.所以我

们在测试的时候,要养成习惯,多多关注前端页面的性能,了解页面的加载、渲染方式和顺

序是非常有必要的。

简单来说，一次页面请求，会经过以下步骤：

解析用户输入的域名，根据DNS服务匹配到对应的IP和端口

影响因素：host配置、NDS资源

建立TCP连接（三次握手）

影响因素：网络情况、端口、链路复用

服务端接收到请求

影响因素：网络情况

服务端响应数据

影响因素：后端服务器性能

浏览器接收到数据

影响因素：网络情况

浏览器解析HTML代码，获取相资源

影响因素：浏览器内核

渲染页面并最终展现给用户

影响因素：浏览器内核

从上面的分析可以看出，有些环节我们是可以处理并优化的，有些是无能为力的(参

考影响因素)，我们需要针对可优化的内容进行有效的优化，达到提高整体性能的目标，

不积跬步，无以至千里。具体的优化点见后面相关章节，这里暂不重复。下面，我们再

看看一个页面的展现过程，会经历哪些过程。

IE下载的顺序是从上到下，渲染的顺序也是从上到下，下载和渲染是同时进行

的。

在渲染到页面的某一部分时，其上面的所有部分都已经下载完成（并不是说所

有相关联的元素都已经下载完）。

如果遇到语义解释性的标签嵌入文件（JS脚本，CSS样式），那么此时IE的下

载过程会启用单独连接进行下载。

样式表在下载完成后，将和以前下载的所有样式表一起进行解析，解析完成后，

将对此前所有元素（含以前已经渲染的）重新进行渲染。

JS、CSS中如有重定义，后定义函数将覆盖前定义函数。

在这个阶段，我们需要了解一些js,css的加载方式，有助于我们提高页面的渲染效

率，比如JS的阻塞下载机制、CSS的继承机制等。

2.前端性能测试工具

发现问题需要借助好用的工具,针对前端性能测试,有很多现成的工具可以使用,下面

列举一些常用的前端性能测试工具及他们的优缺点,具体的使用规则不再在这里讲述,请

自行百度或者查看对应的官方指导使用文档.

1)GooglePageSpeed:当下很流行的在线测试网站性能工具，基于Google

的一套最佳的前端性能的规则，你可以很方便得到大量的性能信息，甚至还提

供了移动设备的最佳实践报告。

2)Whichloadsfaster:页面加载对比工具，可以方便有效的对比优化前及优化后

的数据，也可以用来做竞品分析。

3)WebPageTest：很不错的实时浏览器的渲染速度（Chrome，Firefox和IE），

可以选择来自世界各地的几个地点进行试验。

4)各类浏览器的开发者工具：firefox下的firebug、Chrome下的开发者工具、

IE下的F12工具等

5)Fiddler：能够记录并检查所有你的电脑和互联网之间的http通讯，设置断点，

查看所有的“进出”Fiddler的数据（指cookie,html,js,css等文件，这些都可

以让你胡乱修改的意思）。同时支持自定义的插件开发，非常好用。

3.前端性能优化常见方法

前端页面展现的请求过程及加载过程后，我们就可以针对性的做性能优化了。那句

话，不积跬步，无以至千里，一点点的优化积累，最终才能变成高效的优秀体验，带给

用户不一样的感受。

1)DNS优化

域名转化成IP的过程也是需要消耗时间的，所以尽可能在不同的运营商DNS

服务中添加自己公司的域名，会有效的提高这一步所花费的时间。

2)减少HTTP请求

由于HTTP基本上都是短连接，过多的HTTP请求会消耗大量的时间在TCP

连接建立上。网速相同的条件下，下载一个100KB