浏览器渲染原理

看到这个标题大家一定会想到这篇神文《How Browsers Work》，这篇文章把浏览器的很多细节讲得很细，而且也被翻译成了中文。我知识做一个简单的总结。

---

• 浏览器工作过程

  1. 浏览器会解析一下3个东西：

     • HTML,SVG,XHTML等产生DOM Tree
     • CSS 产生CSS规则树
     • JavaScript通过 DOM API 和 CSSDOM API 来操作DOM Tree 和CSS Rule Tree

  2. 解析完成之后，浏览器引擎会通过DOM Tree 和 CSS Rule Tree 来构造 Rendering Tree（不等同于DOM树）

  3. 最后通过调用操作系统Native GUI 的API 绘制。

• 渲染（基本流程）

• 计算 CSS 样式
• 构建 Render Tree
• Layout 定坐标和大小，是否换行，以及各种postion，overflow，z-index等属性
• 正式开画。

---

参考文档
浏览器的渲染原理简介：https://coolshell.cn/articles/9666.html