浏览器渲染关键路径
2018-12-10 本文已影响0人
冬青_2f75
-
首先，浏览器会请求html文件，这个html文件可能是从网络上读取的，也可能是从本地磁盘读取的。
html文件的传递都是2进制的bytes，浏览器引擎的工作就是把这些bytes渲染成你能看到的页面。 -
读取到这些bytes文件之后，要将这些bytes文件转换成DOM， 同时检查这份html文件里有没有对应的css，js文件，如果有的话立马发出http请求。
image.png
image.png
注： 首屏渲染中，此时页面一片空白
-
当请求完css文件之后，浏览器引擎开始构建CSSOM（类似上面构建DOM的过程）
image.png
-
当CSSOM 和DOM都生成好后，两者结合起来构建Render Tree
image.png
本来，CSSOM和DOM是独立的两个东西，但是两者会相互影响，比如，一个元素的CSSOM中display为none，则浏览器会把该元素从render tree中删除
image.png
注： 首屏渲染中，此时页面一片空白 -
当Render Tree好了以后，下一步就是通过一系列复杂的数学运算计算出每个元素的位置和宽高，这个过程叫layout
image.png
-
当layout的绘制好后，可是paint这些元素啦，此时终于能看到首屏内容啦。
如果html中有JS，会怎么样呢？
不管在何时，当浏览器碰到<script>标签时，都会停止DOM的构建，直至js执行完毕。
这是因为js可能会改变DOM，所以碰到script标签时，会停止构建DOM。
-
JS不仅会改变DOM，还有可能改变CSSOM
image.png
如果在CSSOM还没构建好之前，就碰到了script标签，会怎么样呢？
js将停止执行，直到CSSOM渲染好
No CSSOM, no JS execution. -
async
该标签告诉浏览器引擎不必停止当前的DOM构建，这段js将在download之后再执行。
参考文献： https://blog.logrocket.com/how-browser-rendering-works-behind-the-scenes-6782b0e8fb10
