共计 1616 个字符，预计需要花费 5 分钟才能阅读完成。
什么是 DOCTYPE 及作用 DTD 是一系列的语法规则，用来定义 XML 或(X)HTML 的文件类型。浏览器会使用它来判断文档类型，决定使用何种协议来解析，以及切换浏览器模式。DOCTYPE 是用来声明文档类型和 DTD 规范的，一个主要的作用是文件的合法性验证。如果文件代码不合法，那么浏览器解析时便会出一些差错。浏览器的工作流程
解析 HTML，生成 DOM 树，解析 CSS 生产 CSSOM
根据生成的 DOM 和 CSSOM 构建渲染树 Render tree
根据渲染树，计算每个节点在屏幕上的位置，尺寸等信息。
将渲染树绘制到屏幕上
注意：渲染对象和 Dom 元素相对应，但这种对应关系不是一对一的，不可见的 Dom 元素不会被插入渲染树，例如 head 元素。另外，display 属性为 none 的元素也不会在渲染树中出现（visibility 属性为 hidden 的元素将出现在渲染树中）。重排 (reflow) 和重绘 (repaint) 当页面元素的几何属性发生改变时会发生重排，当元素的属性的该变没有影响到几何属性时发生重绘。重排一定会发生重绘，但重绘不一定会引起重排。什么时候发生重排
添加或删除可见的 DOM 元素
元素位置发生该变
元素的尺寸发生该变（包括：外边距，内边距，边框厚度，宽度，高度等属性）
内容改变，例如文本内容该变，或图片被另外一张不同尺寸的图片代替
页面渲染器初始化
由于每次重排都会产生计算消耗，大多数浏览器通过队列化修改并批量执行来优化重排过程，获取布局信息的操作会导致队列属性，如下面的这些属性也会引起重
clientWidth、clientHeight、clientTop、clientLeft
offsetWidth、offsetHeight、offsetTop、offsetLeft
scrollWidth、scrollHeight、scrollTop、scrollLeft
scrollIntoView()、scrollIntoViewIfNeeded()
getComputedStyle()
getBoundingClientRect()
scrollTo()
什么时候发生重绘当页面中元素样式的该变不影响布局时，发生重绘。比如：该变 color,background,visibility 等思考下面两段代码：代码一：
var foo = document.getElementById(‘fooBar’);
foo.style.color = ‘blue’;
foo.style.marginTop = ’30px’;
代码二：
var foo = document.getElementById(‘fooBar’);
foo.style.color = ‘blue’;
var margin = parseInt(foo.style.marginTop);
foo.style.marginTop = (margin + 10) + ‘px’;
上面两端代码分别发生多少次重排和重绘？代码一：一次重排和重绘；代码二：一次重排和一次重排和重绘为什么会这样呢？当修改一个 DOM 节点时，修改的操作会先缓存到队列，队列中的修改会在下次 UI 线程执行时批量更新。修改过的节点会被标记为‘脏’（Dirty），获取脏节点的属性会导致队列中的更新操作立刻执行。所以第二段代码的不同之处在于 var margin = parseInt(foo.style.marginTop); 引发了一次重排。如何减少重排和重绘的次数
避免对同一个 DOM 节点进行读和写操作的交叉进行。
使用 display:none 临时从文档中移除，添加完元素后在显示它
使用 document fragment
为需要修改的节点创建一个备份，然后对副本进行操作，修改完后用其代替旧节点（cloneNode）
使用 position 为 absolute 或 fixed 的元素创建动画
window.requestAnimation()
虚拟 DOM 库
参考资料：How browsers work《高性能 JavaScript》
