【渲染】文档流渲染

2021-05-25  本文已影响0人  Adder
browser_render.jpg
  1. 浏览器获取到html文档,同步下载的css和js文件,以及静态资源文件,

  2. css下载完成后,文件将会被解析成css对象,然后对css对象进行组装,成cssom(css Object Model)树

  3. html会构建成dom (document object model)树

  4. 接下来,浏览器会根据dom 与cssom ,生成一个rendering tree渲染树, 它是即将要渲染到屏幕上的树结构

  5. 浏览器会根据rendering tree 计算处于文档流中的位置和大小等等,在此阶段,position 为 absolute fixed ,以及float的元素会有位置偏移,也就是通常所说的:脱离文档流(rendering tree)

  6. 阻塞渲染:是指 在解析html页面的时候,如果同步遇到js 脚本未执行完,会停止解析,等js执行完,才继续解析,因为可能js里面包括对两种object model 的改动

上一篇下一篇

猜你喜欢

热点阅读