Fork me on GitHub

前端性能优化与原理实践之【浏览器的运行机制】

前端性能优化与原理实践之浏览器的运行机制!

一、渲染过程

  • DOM 树:解析 HTML 以创建的是 DOM 树(DOM tree ):渲染引擎开始解析 HTML 文档,转换树中的标签到 DOM 节点,它被称为“内容树”。

  • CSSOM 树:解析 CSS(包括外部 CSS 文件和样式元素)创建的是 CSSOM 树。CSSOM 的解析过程与 DOM 的解析过程是并行的

  • 渲染树:CSSOM 与 DOM 结合,之后我们得到的就是渲染树(Render tree )。

二、CSS 选择器优化

CSS 引擎查找样式表,对每条规则都按从右到左的顺序去匹配。

2.1 优化建议

  • 避免使用通配符,只对需要用到的元素进行选择。
  • 关注可以通过继承实现的属性,避免重复匹配重复定义。
  • 不要画蛇添足,id 和 class 选择器不应该被多余的标签选择器拖后腿。
  • 减少嵌套。后代选择器的开销是最高的,因此我们应该尽量将选择器的深度降到最低(最高不要超过三层),尽可能使用类来关联每一个标签元素。

三、CSS/JS 加载顺序优化

HTML、CSS 和 JS,都具有阻塞渲染的特性。

3.1 CSS 阻塞优化

DOMCSSOM 才会生成渲染树,当 DOM 解析到 style 的时候,此时 CSS 会阻塞渲染。只有当 CSS 完全下载下来的时候,才会开始渲染 CSSOM 树。(尽早的完成 CSS 下载就会加快渲染页面速度)

  • 放在最前边 head 中。
  • 启用 CDN 实现静态资源加载速度的优化

CSS 是阻塞渲染的资源。需要将它尽早、尽快地下载到客户端,以便缩短首次渲染的时间。

3.2 JS 阻塞

JS 本质上是对 DOMCSSOM 的修改,所以 JS 会阻塞 DOM 和 CSSOM。

浏览器中有两种引擎,一种是 JS 引擎,另一种是渲染引擎。两者是相互独立的存在的。当渲染 DOM 时,遇到 script 就会将控制权交给 JS 引擎去执行。执行完之后再交给渲染引擎去执行,是 JS 把 CSS 和 HTML 阻塞了。

所以,一般 JS 的加载方式有两种:

  • 正常加载

  • defer

  • async

1、正常加载:JS 会阻塞浏览器,浏览器必须等待 index.js 加载和执行完毕才能去做其它事情。

2、defer: defer 模式下,JS 的加载是异步的,执行是被推迟的

3、async: JS 不会阻塞浏览器做任何其它的事情。它的加载是异步的,当它加载结束,JS 脚本会立即执行

总结:

一般当我们的脚本与 DOM 元素和其它脚本之间的依赖关系不强时,我们会选用 async;当脚本依赖于 DOM 元素和其它脚本的执行结果时,我们会选用 defer。