1.什么是DOCTYPE以及作用
DTD(document type definition，文档类型定义) 是一系列的语法规则，用来定义XML或(X)HTML的文件类型。浏览器会使用它来判断文档类型，决定使用何种协议来解析，以及切换浏览器模式。( DTD告诉浏览器我是什么文档类型，浏览器根据这个来判断我用什么类型去解析它，渲染它)
DOCTYPE是用来声明文档类型和DTD规范的，一个主要的用途便是文件的合法性验证。如果文件代码不合法，那么浏览器解析便会出一些差错。(直接告诉浏览器什么是DTD，通知浏览器告诉当前文档包含的是哪个DTD，也就是哪个文档类型)
1.2常用的 DOCTYPE 声明
1.2.1 HTML5
<!DOCTYPE html>
1.2.2 严格模式——HTML 4.01 Strict
该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
1.2.3过渡模式 ——HTML 4.01 Transitional
该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
1.2.4框架集 宽松模式——HTML 4.01 Frameset
该 DTD 等同于 HTML 4.01 Transitional，但允许框架集内容。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
区别：不同模式主要是浏览器厂商提炼出来的，标准模式时浏览器会根据规范来呈现页面，而混杂模式时浏览器则以向后兼容的方式呈现;
2.浏览器渲染过程
3.重排Reflow
DOM结构中的各个元素都有自己的盒子(模型)，这些都需要浏览器根据各种样式来计算，并根据计算结果将元素放到它该出现的位置，这个过程称之为Reflow。（几何属性和位置也会因此受到影响）
3.2触发Reflow
a. 当你增加、删除、修改DOM节点时，会导致Reflow或Repaint
b. 当你移动DMO位置，或是搞个动画时候
c. 当你修改CSS样式的时候（元素尺寸改变）
d. 当浏览器窗口尺寸改变的时候(移动端没有这个问题)，或是滚动的时候
e. 当你修改网页的默认字体时
4.重绘Repaint
页面要呈现的内容，全部画在屏幕上，这就是Repaint
4.2触发Repaint
DOM改动
CSS改动
4.3 最小化重排重绘
使用fragment
添加片段后页面节点情况
1. fragment文档片段是个轻量级的document对象，方便更新和移动节点。当添加一个文档片段到节点时，实际被添加时片段的子节点，不是fragment本身。只触发一次重排，只访问一次实时的DOM。
2. 尽量不要在布局信息改变时做查询（offetTop, clientHeight等会导致渲染队列强制刷新）
3. 同一个DOM的多个属性改变可以写在一起（减少DOM访问）
网友评论