整理和收集一下浏览器渲染原理。

解析和展示html流程

  1. 首先下载html文件
  2. 解析html,构建dom树
  3. 和css结合生成渲染树
  4. 绘制并展示页面

图示:
渲染流程

Webkit

Gecko

图片来源:http://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/

CSSOM和DOM组合 -> render tree (渲染树)

combile CSSOM and DOM
图片来源:https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction

相关文章:

  1. 浏览器工作原理
  2. How browsers work
  3. EfficientlyRendering CSS
  4. Render-tree construction, layout, and paint
  5. CSS Selector Performance has changed! (For the better)
  6. CSS PERFORMANCE
  7. Style System Overview
Contents
  1. 1. 解析和展示html流程
  2. 2. CSSOM和DOM组合 -> render tree (渲染树)
  3. 3. 相关文章: