JS进阶（五）同步异步编程及浏览器的底层渲染机制

浏览器渲染机制

浏览器底层渲染机制

一个页面从服务器访问，拿到页面源代码之后做的事情是什么？

1. 生成Dom树（DOM Tree） => 对HTML文件的处理

   • 基于HTML获取的是流文件 (进制编码)

   • 把进制编码编译为具体的字符

   • 按照令牌TOKEN进行解析 (分词/断词)

   • 生成具体的节点 (元素标签/文本节点…)

   • 按照相互的依赖关系生成一个DOM树 (节点树)

     

2. 生成CSSOM Tree => 对CSS文件进行处理

   

3. 生成渲染树（Render Tree）

   • DOM TREE + CSSOM TREE
   • Meat、Head、Link和display:none;等这些元素是不会出现在渲染树的

4. 布局/回流/重排 Layout

   • 按照渲染树计算出每一个元素在视口中的位置和大小

5. 分层

   • 按照计算出来的层级进行分层
     • 定位
     • 设置透明度 rgba
     • 设置滤镜
     • 文本超过盒子大小，裁切
   • 单独计算每一层的绘制列表(具体绘制)

6. 绘制/重绘 Painting

   • 把生成的绘制列表提交给"合成线程"
   • "合成线程"进行我们最后的绘制，呈现在浏览器的页面上