什么是DOCTYPE及作用
DOCTYPE是用来声明文档类型和DTD规范的，一个主要的用途便是验证文件的合法性，如果文件代码不合法，那么浏览器解析时就会出现一些差错。
DTD（document type definition ,文档类型定义）是一系列的语法规则，用来定义XML或（X）HTML的文件类型。浏览器会使用它来判断文档的类型，决定使用何种协议来解析以及切换浏览器的模式。
常见的DOCTYPE：
HTML5 :
<!DOCTYPE html>
HTML 4.01 Strict（严格模式） 该DTD包含所有HTML元素的属性，但不包括展示性的和弃用的元素如font
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transtitional(宽松模式)该DTD包含所有的HTML元素和属性，包括弃用和展示性的元素。
<!DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
浏览器渲染过程
如上图所示，可以分为以下步骤来讲解浏览器的渲染过程：
1. 浏览器将获取的HTML文档解析成DOM树；
2. 解析css，生成CSSOM规则树；
3. 将DOM树与CSSOM规则树合并在一起生成渲染树。
4. 遍历渲染树开始布局，通过Layout计算出每个节点的大小，颜色等信息。
5. 开始将渲染树的每个节点绘制到屏幕。
什么是重排（Reflow）
- 定义
DOM结构中的各个元素都有自己的盒子，这些都是需要浏览器根据各种样式来计算并根据计算结果将元素放在它该出现的位置，这个过程称为reflow。简单的讲就是引起DOM树重新计算的行为。 - 什么情况下会触发Reflow
(1) 增加、删除、修改DOM节点时，会导致Reflow或Repaint
(2) 移动DOM的位置，或是搞个动画的时候
(3）修改CSS样式的时候
(4）Resize窗口（移动端没有这个问题）发生改变或者滚动的时候
(5）修改网页的默认字体
和 重绘（Repaint）?
- 定义
当各种盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来后，浏览器于是便把这些元素都按照各自的特性绘制了一遍，于是页面的内容出现了，这个过程称之为repaint。浏览器在第一次加载的时候会触发重排和重绘。 - 什么情况下会触发重绘？
（1）DOM改动
（2）CSS改动
如何减少reflow/repaint
- 避免对DOM进行频繁的操作。
- 集中修改样式，比如尽量通过修改className来修改样式，尽可能少的修改元素style上的属性等
- 设置元素的position的值为absolute或fixed
在元素的postion的值为static或relative的时候，如果需要对某个元素进行操作，就会使浏览器重新渲染整个页面。但position的值为absolute和fixed的时候，元素脱离文档流，浏览器重新渲染的时候也只会渲染该元素及它里面的子元素，缩短了浏览器渲染的时间。
269
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
