DOCTYPE及其作用
DOCTYPE就是声明文档类型和DTD规范的，一个主要用途就是文件合法性验证，如果文件代码不合法，浏览器解析就会出一些差错。
HTML5
4.0有传统模式（包含所有元素）和严格模式（不包含废弃元素）
浏览器渲染过程
- 解析HTML构建DOM树，解析CSS构建CSS的树形结构CSSOM
- DOM和CSSOM合并成Render Tree
- 布局渲染树：浏览器已经知道网页中存在哪些节点以及各个节点的位置，从而计算他们在屏幕中的位置。
- 绘制渲染树：按照计算出来的规则，通过显卡，将内容绘制在屏幕上。
重排Reflow（核心点是DOM结构是否发生改变）
DOM结构中的各个元素都有自己的盒子（模型），这些都要浏览器根据各种样式来计算并根据计算结果将元素放到他们该出现的位置，这个过程叫做reflow。
触发reflow的几种方法
增加删除或者修改DOM节点，会导致reflow或者repaint
移动DOM位置，或者搞个动画的时候
修改CSS的样式时候
当Resize窗口的时候（移动端没有这个问题），或是滚动的时候
当修改网页默认字体的时候
注意：display:none会触发reflow，触发reflow一定触发repaint，然而visibility：hidden只会触发重绘repaint，显然reflow的成本更高。
重绘Repaint
盒子大小位置颜色、字体大小等确定下来之后，浏览器将这些元素按照各自的特性绘制一遍，页面的内容出现了，这个过程称之为repaint。
优化点
不要一条条修改DOM样式，应该预先定义好css的类，然后修改DOM的className
使用documentFragment对象在内存里操作DOM,一次性添加documentFragment
少修改树形结构的下面的分支节点，可能会引起大面积reflow，当然也可能影响较小
为动画的HTML元素设定position为absolute或者fixed，那么修改他们的CSS大大减少reflow
尽量减少使用table布局，很小的改动可能引起table的重新布局。
2018 年 1月 11日