浏览器页面的渲染过程

74 阅读 0 评论 49 点赞

我是靠谱客的博主超级枫叶，最近开发中收集的这篇文章主要介绍浏览器页面的渲染过程，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

浏览器是怎么把页面渲染出来的先上结论
简单总结一下浏览器的解析渲染过程，解析DOM生成DOM Tree，解析CSS生成CSSOM Tree，两者结合生成render tree渲染树，最后浏览器根据渲染树渲染至页面。DOM Tree的解析和CSSOM Tree的解析是互不影响的，两者是并行的。js的加载会阻塞dom的解析。

补充：CSS不会阻塞页面DOM的解析，但是由于render tree的生成是依赖DOM Tree和CSSOM Tree的，因此CSS必然会阻塞DOM的渲染。更为严谨一点的说，CSS会阻塞render tree的生成，进而会阻塞DOM的渲染。

这里分布来说明渲染过程
1、HTML 的加载
页面上输入 URL 后，会先拿到 HTML 文件。HTML是一个页面的基础，所以会在最开始的时候下载它，下载完毕后就开始对它进行解析

2、其他静态资源的下载
HTML 在解析的过程中，如果发现 HTML 文本里面有一些外部的资源链接，比如 CSS、JS 和图片等，会立即启用别的线程下载这些静态资源。在 head 中遇到 JS 文件时，HTML 的解析会停下来，等 JS 文件下载结束并且执行完，HTML 的解析工作再接着来，防止 JS 修改已经完成的解析结果

3、DOM 树的构建
DOM 的全称是：文档对象模型(Document Object Model)，在 HTML 解析时，解析器会把解析完的 HTML转化成 DOM 对象，再进一步构建 DOM 树

4、CSSOM 树的构建
当 CSS 下载完，CSS 解析器就开始对 CSS 进行解析，把 CSS 解析成 CSS 对象，然后把这些 CSS 对象组装成一颗 CSSOM 树

5、渲染树的构建
DOM 树和 CSSOM 树都构建完成以后，浏览器会根据这两棵树构建出一棵渲染树

6、布局计算
渲染树构建完成以后，所有元素的位置关系和需要应用的样式就确定了。这时候浏览器会计算出所有元素的大小和绝对位置

7、渲染
布局计算完成以后，浏览器就可以在页面上渲染元素了，经过渲染引擎的处理后，整个页面就显示在了屏幕上

由上得知，JS 文件放在 head 中属于同步加载，会阻塞 DOM 树的构建，进而影响页面的加载。当 JS 文件较多时，页面白屏的时间也会变长

那如何避免这个问题呢？下面有三个解决方案
1、 script 放在 body 里（一般是上面）
由于 DOM 是自上而下解析的，因此 JS 不会阻塞 DOM 的解析，而且这时候可以在 JS 中操作 DOM
2、设置 defer 属性
通过给 script 标签设置 defer 属性，将脚本文件设置为延迟加载，当浏览器遇到带有 defer 属性的 script 标签时，会再开启一个线程去下载 JS 文件，同时继续解析 HTML，等 HTML 全部解析完、DOM 加载完成之后，再去执行加载好的 JS 文件。只适用于引用外部 JS 文件，并且可以确保所有加了 defer 属性的脚本会按顺序执行
3、设置 async 属性
async 属性和 defer 属性类似，也是会开启一个线程去下载js文件，但和 defer 不同的是，aysnc 会在 JS 加载完成后立刻执行，而不是会等到 DOM 加载完成之后再执行，所以还是有可能会造成阻塞。同样的也是只适用于外部 JS 文件，如果有多个设置了 aysnc 的 JS 文件，不能像 defer 那样保证按照顺序执行
4、动态创建脚本
这样去动态创建文件也不会影响到页面的加载，