web前端 之 渲染机制

什么是DOCTYPE及作用

DTD告诉浏览器我是什么文档类型
浏览器根据文档类型来决定用什么隐情引擎来渲染他
DOCTYPE就是告诉浏览器什么是DTD的，通知浏览器告诉 当前文档包含的是哪个TB，也就是哪个文档类型，我们html中第一行的就是告诉浏览器文档类型是html
常见的DOCTYPE有哪些：
那我们现在经常用的就是HTML5
4.0版本有两个模式，一个严格模式（Strict），一个传统模式（）Transitional

浏览器渲染过程

html经过html Parser解释器转换为DOM树，CSS经过CSS Parser解释器转换为DOM树，这两个DOM数一整合形成Render Tree，Layout对Render Tree精确计算后，最后开始绘图Painting，最后展示在浏览器上

html的DOM Tree：

css的DOM Tree

Render Tree

重排Reflow

一般导致Reflow就会导致Repaint
1、什么是重排
2、什么时候会触发Reflow
3、什么时候会避免触发Reflow

重绘Repaint

页面呈现的内容通通呈现在浏览器页面上就叫repaint
Rpaint是无法避免的，因为不触发Repaint的话就是静态页面，没有任何交互
如何避免最小程度的Repaint：
（1）将元素的display设置为”none”，完成修改后再把display修改为原来的值
（2）如果需要创建多个DOM节点，可以使用DocumentFragment创建完后一次性的加入document
（3）先将元素从document中删除，完成修改后再把元素放回原来的位置
（4）ng-if/ng-show

布局Layout

Layout对Render Tree精确计算，进行布局