途牛原创|途牛前端性能优化实践

2016-01-07 途牛无线中心 安增军

1 优化实践概览

2 为什么要进行前端性能优化？

a) 前后端时间占比是8:2，前端占用的时间较多，优化的空间较大

b) 前端涉及的资源很多，js、css、图片、浏览器、cookie、Ajax、html等等，多意味着优化手段较多

c) 最重点的一点是，加载速度对用户影响重大，特别是首屏。可能有些人感觉慢1-2s貌似也不是太多时间；但是兄台，如果你是访问一个页面， 1-2s貌似感觉不是很长，如果你访问10张页面的话，10-20s就是不短的时间啊。如果再乘上网站的UV，这个数字就更恐怖了。

现在前端的优化理论有很多，大家最熟悉的莫过于雅虎XXX条军规了，确实雅虎给出的建议对前端开发者影响巨大，现在很少能够看到哪家网站把CSS放在页面底部、把JS放在顶部、图片不异步加载、不开启GZIP压缩等等。



但是很无奈的是，即使多数网站也都遵循着这些规则，但是网站的加载速度还是不理想。理论总是高于实践的，理论可以用来指导，但总有很难实践的地方。结合前段时间做过的性能优化实践经验，在这里抛块砖，简要说下自己在前端性能优化方面的一些心得，希望能给大家一些帮助。

优化之前，大家需要了解网站影响速度的点在哪里，有针对性的优化，比摸石头过河要事半功倍，每个网站有各自的特征，这里结合途牛网站做下分析。

a) 首先大家要对http请求有一定的了解，需要知道一张页面是怎么从一个URL最后渲染出来的。



真实的情况比以上描述的要复杂的多，不过以上的过程可以描述个大概（详细的就不要问我 了，鞭子没有这么长）。

b) 分析以上流程，可以得出前端优化点主要有以下几步

i. 发起http请求

ii. 服务器响应http请求&得到html代码

iii. 浏览器解析html并请求静态资源

iv. 浏览器渲染页面

3 相关优化建议

针对以上4个步骤，以下分别给出相关的优化建议

（其中第二步现在基本上所有的网站都开启了GZIP压缩和做了静态页面缓存，所以就详细展开分析，以下主要针对1、3、4三点展开分析）。

a) 在发送http请求时，会将cookie一起发送到后台，所以要尽量减小cookie的大小，以下是使用空页面测试cookie大小对响应时间的影响数据。



PS：要尽量减少http请求头的cookie大小，目前途牛官网PC首页cookie在1804bytes左右，M站在1797bytes，都有很大的优化空间。

b) 浏览器解析html并请求静态资源，其过程基本如下

i. 浏览器首先创建Document对象，解析HTML元素和他们的文本内容后添加Element对象和Text节点到文档中，遇到样式表和图片时，会另起一个请求去获取资源，这是个异步过程，不会影响到HTML的解析。

ii. 当遇到script脚本时，就会开启另一个解析模式，因为JS可能会向页面中插入元素，就是会改变DOM树结构；所以在脚本没有开启ASYNC和DEFER模式时，页面会停止解析HTML、CSS和图片，等待SCRIPT脚本下载和解析完成。

iii. 当脚本开启DEFER和ASYNC模式时，浏览器会另发一个请求去请求脚本，但是不会中断页面解析HTML的过程，待脚本下载完成之后，再去解析脚本。

c) 针对以上的过程，大概可以总结的优化方法有以下几点

i. 浏览器首先要解析HTML节点生成DOM树，所以如果能减少DOM树，那就能减少解析时间。目前比较通用的方法是将页面中与SEO无关的内容用script或是textarea包裹起来，或者可以的话，通过ajax方式加载进来。

ii. 在浏览器解析到样式表、图片、脚本时，会启动一个http请求，每个http请求都会耗费一定的时间，并且每个浏览器都有自己http并发请求上线数，在达到上线时，新启动的请求就会进入等待序列，所以要尽量较少http请求数，目前合并CSS和JS的方式很多，这里就不介绍了。

iii. 针对图片，一般采用的方式是尽量压缩&合并图片，二是异步化图片。

iv. 而对于JS的优化，个人感觉是比较复杂的。主要原因是JS特殊的下载和解析模式。JS的优化包括2方面的优化，一块是JS文件的优化，一块是JS语法的优化。JS文件的优化是指按需加载JS文件，即如果首屏不要某个JS文件，那我在页面初始化的时候就不用去加载这个JS文件，在需要这块JS的时候，再通过事件触发去加载这个JS文件，这个过程难点在于按需的“需”上，这个判断标准理解起来比较简单，但是真正操作过程中就比较难，目前我们采用的方式主要是将JS分成两块——首屏和非首屏，首屏的JS在页面初始化的时候加载，非首屏的JS通过事件触发加载。对于JS文件中的JS语法优化，本次优化的并不是很多，因为改动已经开发好的JS成本比较大，并且这块虽然有一定的影响，但本次优化时发现影响不是很大，这里主要介绍查看JS执行效率的两款工具，一个是大家常用的chrome dev，另一个是IE下的性能测试利器－Dynatrace Ajax Edition，这两款软件详细的使用教程网站有很多资料，感兴趣的可以去了解下。

v. 除此之外，需要关注的是CDN；目前公司的静态资源托管在其他公司的CDN上，托管方从自身利益考虑，给各个公司的资源总是不均衡，所以优化过程中总是出现CDN网络问题；如果有类似问题，还得要时常催促下托管方。

d) 在浏览器渲染方面，对渲染时间影响比较大是两个操作——重绘和回流。

要了解这2个概念，首先要介绍下渲染流程：

i. 渲染流程

构造DOM树

计算样式表

构建渲染树

布局（Layout）- 定位坐标和大小、是否换行、各种position, overflow, z-index

绘制

展示



ii. 影响到页面渲染的时间的主要有以下两个操作:

重绘 – 这是一种页面DOM元素几何尺寸不变，位置不变，只改变背景色或者字体颜色这类属性，这样的话，只会局部重新绘制。

回流 – 这种方式是改变了DOM元素的几何尺寸或者改变了DOM元素的位置，这样就需要重新布局，从而导致页面全局重新绘制。

浏览器绘制是个很复杂的过程，各个浏览器渲染过程都有些差异，不过大体上的流程都大体一致（不含Trident内核）。浏览器的重绘和回流很难去避免，只能在实际过程中多加注意，少用Table，少通过JS直接改变DOM节点等等。