网页性能优化

我发现了Chrome的说明书诶

学习了一下浏览器(Chrome)的工作原理,对其他内核的浏览器未必全部适用

浏览器在渲染页面之前,需要两个关键的东西

  1. DOM树

  2. CSSOM树

词法分析

浏览器基于规范,通过词法分析构建DOM和CSSOM,然后遍历DOM的可见节点(主要就是body里面的一些非display: none的节点),把符合的CSSOM应用到节点上。

CSS匹配原理&优化建议 占坑

构建Render-Tree

DOM树 和 CSSOM树 结合之后形成 Render树

第一步构建Render-Tree完成,进入Layout布局阶段

通过每个DOM对应的CSS里的位置尺寸信息,结合设备实际像素分布,计算每个像素应该显示的内容。

在各个像素点上展示计算好的值。

所以总的来说,浏览器渲染的过程其实只分为三步

1. 获取Render-Tree = DOM-Tree + CSSOM-Tree

2. 计算Layout

3. 绘制Paint

下面从这三步开始分析网站性能优化的方法。

1.Before Render-Tree

尽管一个网站没有CSS的样式,还是可以访问的。但是浏览器认为它是 近乎不可使用的

而且要是CSSOM不先生成,而是在DOM之后生成的,会导致页面的重绘。十分浪费时间

所以浏览器的默认策略是,CSSOM需要优先于DOM生成。


DOM暂停 > CSSOM生成

(DOM树暂停构建是因为要生成CSSOM)


有一点例外的是 媒介查询 在不符合当前媒介条件时,是不会阻塞DOM-Tree的生成的 但资源还是同样会下载

除了正常的生成DOM和CSSOM以外,JavaScript也可以改变DOM和CSSOM。

因为无法判断JavaScript脚本会不对DOM CSSOM进行修改,对于引入JavaScript的情况。浏览器的处理方式是 暂停DOM构建,将JavaScript脚本转交给JS引擎


DOM暂停 > JavaScript运行

(DOM树暂停构建是因为运行JavaScript脚本)


所以为什么一些操作DOM的JavaScript脚本要放到body标签的底部,是因为这样子就不会阻塞DOM树的生成,从而确保JavaScript里操作的DOM是存在的。

那么遇到JavaScript操作CSS样式的情况,浏览器又是怎么处理的呢?

遇到JavaScript脚本所以浏览器会暂停DOM树的构建,然后JavaScript脚本需要操作CSSOM,所以浏览器会暂停脚本的运行,去构建CSSOM。


DOM暂停 > JS暂停 > CSSOM生成

(当JavaScript操作CSS时,浏览器会阻塞JavaScript的运行去构建CSSOM树)


所以针对三条阻塞关系。我们可以总结出几条优化建议。

  1. 针对 DOM暂停 > CSSOM生成 的阻塞。我们应当 尽早的让浏览器发现CSS代码,尽快让浏览器生成DOM树

  2. 针对 DOM暂停 > JavaScript运行 的阻塞。我们应当把 需要操作DOM的代码放到body标签的底部,一是为了不阻碍DOM生成,二是确保不会出错。

  3. 针对 DOM暂停 > JavaScript运行 的阻塞。当执行的脚本不需要操作DOM时。我们应当给它 设置async属性,使得它不阻塞DOM的生成。

  4. 针对 DOM暂停 > JS暂停 > CSSOM生成 的阻塞。我们应当 尽快的把CSSOM构建出来,建议同1.

综上所述。我们在编写前端代码时,尽量以下面这样的排布,可以使性能提高。

  • CSS代码

  • 不操作DOM CSSOM的异步JavaScript代码

  • HTML代码

  • 操作DOM CSSOM的JavaScript代码

所以在本地我们能做的性能优化至少有这些,剩下的优化就就看在网络上的优化了。

2.Before Get Response

由于HTTP协议的问题,请求资源的时候需要的数据往返比较多,所以 多次请求 会明显的延长网页加载时间。

如果一个网页只有HTML构成,那么浏览器只需生成DOM便可布局渲染。

(假设t为浏览器与服务器一次通讯的时长间隔,生成CSSOM时间为c,生成DOM时间为d,JS运行时间为j,浏览器布局绘制时间为p)

(假设完成时间为 t + d + p = 1(t) + 0(c) + 0(j) + 1(d) + 1(p)则用系数表示为10011)

  • 那么只由HTML构成的网页理论完成时间为 t + d + p = 10011

    (发送请求获取HTML,生成DOM,生成Render,绘制。)

  • 由HTML和CSS构成的网页理论完成时间为 t + t + c + d + p = 21011

    (发送请求获取HTML,从HTML里发现CSS,请求CSS,生成CSSOM,生成DOM,生成Render,绘制。)

  • 由内嵌CSS的HTML构成的网页理论完成时间为 t + c + d + p = 11011

    (发送请求获取HTML,生成CSSOM,生成DOM,生成Render,绘制。)

  • 由HTML和CSS和阻塞JS构成的网页理论完成时间为 t + t + t + c + j + d + p = 31111

    (发送请求获取HTML,请求CSS,请求JS,生成CSSOM,运行JS,生成DOM,生成Render,绘制。)

  • 由HTML和CSS和非阻塞JS构成的网页理论完成时间为 t + t + c + d + p = 21011

    (发送请求获取HTML,请求CSS,生成CSSOM,生成DOM,生成Render,绘制。请求JS,运行JS)

  • 由HTML和非当前media CSS和非阻塞JS构成的网页理论完成时间为 t + d + p = 10011

    (发送请求获取HTML,生成DOM,生成Render,绘制。请求CSS,请求JS,运行JS)

综上所述,优化网络请求的方法有

  • 减少请求

  • 使用压缩技术压缩所有文件,上线代码可以不具有阅读性。

  • JavaScript尽量异步

  • media查询写在link里面让浏览器尽早知道该加载哪些CSS样式


Web Fundamentals – Google