浏览器的渲染机制
一、什么是DOCTYPE
<!DOCTYPE HTML>这个都见过，放在html文档的最前面。
那DOCTYPE是起到什么作用呢？
DOCTYPE是用来声明文档类型的DTD规范的。一个主要用途就是文件的合法性验证，如果不合法，那么浏览器解析时就会出错。
那DTD(文档类型定义)是一系列的语法规则，用来定义XML或HTML的文件类型。浏览器会用它来判断文档类型，决定使用何种协议解析，以及切换浏览器模式。
最常使用的是HTML5的DOCTYPE.就是文章开头标签里的内容。
另外还有HTML4.0.1版本的声明。
这两种声明具体怎么写不重要，主要说一下区别：
严格模式：该DTD包含所有HTML元素和属性，但不包含展示性的和已弃用的元素(比如font)
传统模式：该模式下会包含展示性的和已弃用的元素。
二、浏览器的渲染过程
插张图
从接收到html和css文件说起。
1.会将HTML解析成DOM Tree，CSS样式解析成Rule Tree
2.1中的DOM Tree 和 CSS Rule Tree 合并以后变成Render Tree。
3.结合Layout，这时候浏览器已经知道各个节点的css定义，从而在浏览器中计算出他们所在的位置
4.painting，就是浏览器开始绘制。
5.display，最终呈现在用户面前。
三、重排 Reflow
什么是Reflow？
定义：DOM结构中的每个元素都有自己的盒模型，这些都需要浏览器根据各种样式来计算并根据计算结果将元素放到它该出现的位置，这个过程叫reflow。
什么情况下会触发reflow？
*当增加，删除，修改DOM节点时，会导致reflow或repaint。
*当移动DOM的位置时，比如说动画效果。会导致reflow
*当修改CSS样式的时候
*当Resize窗口(就是调整窗口大小)的时候，或是滚动的时候。
*当修改网页的默认字体的时候。
四、重绘Repaint
定义：当各种盒子的位置，大小以及其他属性例如颜色，字体大小都确定下来后，浏览器于是把这些元素都按照各自的特性绘制了一遍，于是页面的内容出现了，这个过程叫repaint。
什么情况下会触发repaint？
就是只要页面有一点的变动，都是触发了repaint。
五、如何减少reflow或repaint？
优化页面性能，这一点很重要，就是减少reflow和尽量避免repaint的次数。
有几个方面的方法：
1.不一条条的修改DOM的样式，而是采用添加class的方式一次性的修改。举个例子
Element.style.width = 100 + 'px';
Element.style.height = 100 + 'px';
这样写会增加reflow的repaint的次数。
建议这样
Element.className += 'otherClass';
2.对要进行修改操作的元素进行离线处理，处理完后一起更新。
比如要对某一个元素进行修改，可以先将其display属性设置为none，因为隐藏的元素不会再render Tree中， 修改他不会触发reflow或repaint。修改完了之后，再将其display改回来。这样子，就只会触发两次reflow和 repaint。
3.不要把 DOM 节点的属性值放在一个循环里当成循环里的变量。不然这会导致大量地读写这个结点的属性。
4.尽可能的修改层级比较低的 DOM节点。
这个很好理解，就是如果修改的DOM借点层级越高，可能其牵连的子节点也越多。比如，修改了一个祖父元 素的宽度1，那么相应的子孙元素，兄弟元素和兄弟元素的子孙元素也会发生reflow和repaint。
5.可以将需要多次reflow的元素的定位position设置为absolute或fixed。使之脱离文档流，这样就不会影响到 其他节点的layout。这样就会大大降低reflow和repaint的次数。
6.不要用table布局。
上一篇： logback 日志输出级别设置
下一篇： 嵌入式原理实验代码集合