渲染机制
1.什么是DOCTYPE及作用
DTD(document type definition,文档类型定义)是一系列的语法规则,用来定义XML或(X)HTML的文件类型,浏览器会使用它来判断文档类型,决定使用何种协议来解析,以及切换浏览器模式。
DOCTYPE是用来声明文档类型的DTD规范的,一个主要的用途是文件的合法性验证
如果文件代码不合法,那么浏览器解析时便会出一些差错
HTML5的DOCTYPE声明:
<!DOCTYPE html>
HTML4.0有两个模式:严格模式(strict)和传统模式(loose)
严格模式:该DTD包含所有HTML元素和属性,但不包含展示性和弃用的元素,比如font
传统模式:该DTD包含所有HTML元素和属性,包含展示性和弃用的元素,比如font
2.浏览器渲染过程
1.DOM Tree
浏览器中的HTML解析器把HTML解析成DOM Tree
2.CSSOM Tree
CSS解析器把各种样式整合起来(内联、style标签和外联)生成CSSOM Tree
3.Render Tree
DOM Tree和CSSOM Tree整合生成Render Tree
4.Layout
浏览器根据Render Tree计算出元素在浏览器中的位置,最后画出来
3.重排Reflow
1.Reflow定义
DOM结构中的各个元素都有自己的盒子(模型),这些都需要浏览器根据各种样式来计算,并根据计算结果将元素放到它该出现的位置,这个过程称之为reflow
2.触发Reflow
- 新增、删除、修改(宽高位置有关的属性)DOM节点时,会触发Reflow或Repaint
- 移动DOM位置、或是有动画时
- Resize窗口的时候(移动端没有),或者滚动的时候,可能有
- 修改网页的默认字体时
4.重绘Repaint
1.Repaint定义
当各种盒子的位置、大小以及其他属性,如颜色、字体大小都确定下来后,浏览器于是便把这些元素都按照各自的特性绘制了一遍,样式页面的内容出现了,这个过程称之为repaint
2.触发Repaint
DOM改动
CSS改动
3.如何最大程度的降低Repaint
1.避免在document上直接进行频繁的DOM操作,如果确实需要可以采用off-document的方式进行,具体的方法包括但不完全包括一下几种:
- 先将元素从document中删除,完成修改后再把元素放回原来的位置
- 将元素的display设置为none,完成修改后再把display修改为原来的值
- 若需要创建多个DOM节点,可以使用DocumentFragment(document片段)创建完后一次性加入到document
function append(){
for(var i=0;i<100;i++){
var div = document.createElement("div");
document.body.appendChild(div);
}
}
//改进后
//使用document.createDocumentFragment()方法
function append(){
var documentFragment = document.createDocumentFragment();
for(var i=0;i<100;i++){
var div = document.createElement("div");
//加入到document片段中
documentFragment.appendChild(div);
}
document.body.appendChild(documentFragment);
}
2.集中修改样式
- 尽可能少的修改元素style上的属性
- 尽量通过修改className来修改样式
- 通过cssText属性来设置样式值
3.缓存Layout属性值
对于layout属性中非引用类型的值(数字型)如果需要多次访问则可以在一次访问时先存储到变量中
var width = el.offsetWidth;
var scrollLeft = el.scrollLeft;
5.布局Layout