渲染机制
1、什么是DOCTYPE及作用
2、浏览器渲染过程
3、重排Reflow
4、重绘Repaint
5、布局Layout
1、什么是DOCTYPE及作用
DTD：告诉浏览器我是什么文档类型，浏览器根据这个来判断用什么引擎来解析和渲染
DOCTYPE：直接告诉浏览器当前是哪个文档类型
html5 <!DOCTYPE html> html4 严格模式：包涵所有html元素和属性，但不包含展示性和弃用等元素 传统模式：包涵所有html元素和属性，也包含展示性和弃用等元素
2、浏览器渲染过程
第一步，把 html 转成 dom tree
第二步，把 css 按照css规则和css解释器 转成 css tree
第三步，把dom tree 和 css tree 一整合，形成一个 render tree
这个时候告诉浏览器render tree的同时，还有一个layout，render tree本身不知道怎么排放位子，Layout会结合他，渲染出位置，颜色等，最后是paint，
浏览器开始画图，然后展现出来
3、重排Reflow：浏览器根据各种样式来计算并根据计算结果将元素放到它该出现多位置，这个过程叫reflow
触发场景：
当你增加、删除、修改DOM节点时，会导致reflow 或 repaint
移动DOM的位置，或是搞个动画的时候
当修改css样式的时候（比如改变宽和高）
当你resize窗口的时候，或是滚动的时候
当修改网页默认字体的时候（这个是消耗性能比较多）
4、重绘Repaint：页面要呈现的内容，通通画在页面上
触发场景：
dom改动
css改动
只要页面改动了就一定会触发repaint
怎么最大程度降低repaint：有n个节点，不要一个一个节点添加，到最后一起添加
