浏览器工作原理

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

解析和展示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