共计 657 个字符，预计需要花费 2 分钟才能阅读完成。
浏览器的主要构成部分为用户界面、浏览器引擎 (负责窗口管理、Tab 进程管理等)、渲染引擎 (又叫内核，负责 HTML 解析、页面渲染)、JS 引擎 (JS 解释器，如 Chrome 和 Nodejs 采用的 V8)
一、渲染机制
（1）什么是 DOCTYPE 及作用
DTD（文本类型定义）是一系列的语法规则，用来定义 XML 和 HTML 的文件类型。浏览器会使用它来判断文档类型，决定使用何种协议来解析，以及切换浏览器模式。
DOCTYPE 是用来声明文档类型和 DTD 规范的，一个主要的用途就是文件的合法性验证。如果文件代码不合法，那么浏览器解析时便会出一些差错。
通俗点说就是 DOCTYPE 告诉浏览器什么是 DTD 的，告诉浏览器文档类型。
（2）浏览器的渲染过程
（3）重排 Reflow
DOM 结构中的各个元素都有自己的盒子，这些都需要浏览器根据各种样式来计算并根据计算结果将元素放到它该出现的位置，这个过程称为 Reflow.
触发 Reflow:
当你增加、删除、修改 DOM 节点的时候，会导致 Reflow 或者 Replain
当你移动 DOM 的位置，或者是搞个动画的时候
当你修改 CSS 样式的时候
当你修改网页默认字体的时候
当你 Resize 窗口的时候，或是滚动的时候
（4）重绘 Repaint
当各种盒子的大小、位置以及其他属性，例如颜色、字体大小等都确定下来后，浏览器于是把这些元素都按照各自的特性都绘制一遍，于是页面出现了，这个过程称为 Repaint.
触发 Repaint:
DOM 改变、CSS 改变
Repaint 是无法避免的，但是可以最大程度降低 Repaint
（5）布局 Layout