【渲染】文档流渲染
2021-05-25 本文已影响0人
Adder
browser_render.jpg
-
浏览器获取到html文档,同步下载的css和js文件,以及静态资源文件,
-
css下载完成后,文件将会被解析成css对象,然后对css对象进行组装,成cssom(css Object Model)树
-
html会构建成dom (document object model)树
-
接下来,浏览器会根据dom 与cssom ,生成一个rendering tree渲染树, 它是即将要渲染到屏幕上的树结构
-
浏览器会根据rendering tree 计算处于文档流中的位置和大小等等,在此阶段,position 为 absolute fixed ,以及float的元素会有位置偏移,也就是通常所说的:脱离文档流(rendering tree)
-
阻塞渲染:是指 在解析html页面的时候,如果同步遇到js 脚本未执行完,会停止解析,等js执行完,才继续解析,因为可能js里面包括对两种object model 的改动