性能测试之前端性能优化（前端基础知识，前端性能测试常用工具，前端性能优化常见方法）

目录

1. 前端基础知识

1.1 为什么要关注前端页面的性能，了解页面的加载，渲染方式和顺序？

1.2 一次页面请求会经历哪些步骤？

1.3 页面的展示过程

2. 前端性能测试的常用工具

2.1 Google Page Speed

2.2 Which loads faster

2.3 WebPageTest

2.4 浏览器的开发者工具

2.5 Fiddler

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

3.1 DNS优化

3.2 减少HTTP请求

3.3 减小请求元素的大小

3.4 使用CDN加速

3.5 其他优化方法

4. HTTP/2

---

1. 前端基础知识

1.1 为什么要关注前端页面的性能，了解页面的加载，渲染方式和顺序？

因为前端作为客户接触最直接的交互点，前端页面的展现速度直接决定了用户体验。

1.2 一次页面请求会经历哪些步骤？

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

注意：host配置，DNS资源

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

注意：网络情况，端口，链路复用

（3）服务端接收到请求

注意：网络情况

（4）服务端响应数据

注意：后端服务器的性能

（5）浏览器接收到数据

注意：网络情况

（6）浏览器解析HTML代码，获取响应资源

注意：浏览器内核

（7）渲染页面并最终展现给用户

注意：浏览器内核

1.3 页面的展示过程

（1）IE下载顺序是从上到下，渲染的顺序也是从上到下，下载和渲染同时进行。

（2）在渲染到页面的某一部分时，上面所有部分都已下载完成（不是所有相关联的元素）。

（3）如果遇到语义解释性标签嵌入文件（CSS,JS），此时IE会启动单独链接进行下载。

（4）CSS表在下载完成后，将和以前下载的所有样式表一起解析，解析完成后，对此前所有元素重新进行渲染。

（5）JS，CSS中如有重定义，后定义函数将覆盖前定义函数。

思考：CSS, JS如何加载？？？

推荐此文：css、js 的加载与执行

2. 前端性能测试的常用工具

2.1 Google Page Speed

在线测试网站性能工具，基于Google，最佳的前端性能规则，可得到大量的性能信息，提供了移动设备的最佳实践报告。

2.2 Which loads faster

页面加载对比工具，可以方便有效的对比优化前和优化后的数据，也可以用来做竞品分析。

2.3 WebPageTest

实时浏览器（Chrome, Firefox, IE）的渲染速度工具，可选择来自世界各地的几个地点进行试验。

2.4 浏览器的开发者工具

firefox的firebug

Chrome的开发者工具

IE的F12工具等

2.5 Fiddler

记录并检查电脑和互联网之间的http通讯。设置断点，查看所有进出Fiddler的数据（cookie, html, js, css等文件），支持自定义的插件开发。使用广泛！

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

3.1 DNS优化

（1）DNS：

域名系统，是互联网的一项服务。作为将域名和IP地址相互映射的一个分布式数据库，能够使人更方便的访问互联网。

DNS由域名解析器和域名服务器组成：

域名解析器：是指把域名指向网站空间IP，让注册的域名可以方便的访问到网站的一种服务。

域名服务器：是指保存有该网络中所有主机的域名和对应IP地址，并具有将域名转换为IP地址功能的服务器。域名必须对应一个IP地址，一个IP地址可同时对应多个域名，但IP地址不一定有域名。

（2）建议：

域名转化成IP的过程也是需要消耗时间的，所以，尽可能在不同运营商的DNS服务中心添加自己公司的域名，能减少这一步所花费的时间。

3.2 减少HTTP请求

（1）问题：

因为HTTP基本都是短连接，过多的HTTP请求会消耗大量的时间在TCP连接建立上。网速相同时，下载一个100KB图片比下载两个50KB图片要快。所以，要减少HTTP请求。

（2）常见的解决方案：

1）合并图片，减少背景图片数量。

2）捆绑文件，合并多个脚本css, js文件成一个，以减少文件下载数。

3）少引用外部资源。

4）浏览器缓存，用max-age设置缓存时间，配置ETags。

5）加载后下载(Post-Onload download)，使用内联样式表，动态下载外部脚本。

6）避免404,301,302重定向。

7）HTML文档中尽量不要使用压缩图片。

3.3 减小请求元素的大小

（1）问题：

如果一次请求的数据量过大，会被切成更小包的传输，为了减少这个消耗，尽量传输小包。

（2）常见的解决方案：

1）压缩脚本，Gzip压缩。

2）压缩图片，改变图片格式png，切图。

3）精简脚本，去除重复脚本。

4）控制cookie大小，合理设置过期时间。

3.4 使用CDN加速

（1）CDN，content delivery network，内容分发网络。

（2）思路：

尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快更稳定

通过在网络各处放置节点服务器所构成的 在现有的互联网基础上的 一层智能虚拟网络，CDN系统

能够实时地根据网络流量，各节点的连接，负载状况以及到用户的距离和响应时间等，综合信息将

用户的请求重新导向离用户最近的服务节点上。

3.5 其他优化方法

（1）CSS和JS放到外部文件中引用，CSS放头，JS放尾。

（2）高效实用HTML标签和CSS样式。

（3）HTML相关知识：块级元素，内联元素，盒模型，SEO。

（4）CSS相关知识：渲染页面的，考虑渲染效率问题。CSS选择符从右向左进行匹配。

4. HTTP/2

（1）HTTP/2目前已经得到很多主流浏览器的支持和接入，所以要开始了解HTTP/2。

（2）HTTP/2和HTTP/1.1相比，有哪些区别：

1）HTTP/2采用二进制格式，而非文本格式。二进制协议解析更高效。

2）HTTP/2是完全多路复用，而非有序并阻塞的。只需一个连接即可实现并行。

（补充：HTTP/1.x的线端阻塞是什么？如何解决？）

3）使用报头压缩，HTTP/2降低了开销。

4）HTTP/2让服务器可以将响应主动“推送”到客户端缓存中。

（3）补充知识点：

什么是帧，流？

如何实现共享连接？