1. 机制
    2.     解析
    3.     加载
    4. 解析和加载的关系是异步完成 解析伴随着加载;解析完毕不代表加载完毕
    5. 解析:  
    6.     domTree -> DOM树构建(深度优先解析原则)
    7.                 html
    8.         head         body
    9.     meta   title  div    ul
    11.     cssTree -> CSS结构体(深度优先解析原则)
    13.     renderTree 渲染树 = domTree + cssTree
    15.     1. 渲染树每个节点都有自己的样式
    16.     2. 渲染树不包含隐藏节点display:none head之类不需要绘制的节点。
    17.     3. visibility:hidden 相对应的节点是包含在渲染树上的。
    18.     4. 渲染树上的每一个节点都会被当做一个盒子不只是块级元素 具有内容填充 边距边框位置大小其他样式。
    21.     当js对页面的节点操作时,就会产转给你回流或者重绘
    22.     回流 reflow  一定会产生重绘
    23.     重绘 repaint 不一定会产生回流
    25.     节点的尺寸 布局 display:none block
    26.     这些改变的时候，渲染树中的一部分或者全部需要重新构建
    28.     回流至少会有一次
    30.     重绘
    31.     回流时 浏览器会重新构建受影响部分的渲染树。
    32.     回流完成后  浏览器会根据新的渲染树重新绘制回流印象的部分节点
    33.     这个重新绘制的过程 重绘
    36.     影响回流的因素
    37.     1. DOM节点的增加删除
    38.     2. DOM节点位置变化
    39.     3. 元素的尺寸，编剧 填充 边框 宽高
    40.     4. DOM节点display显示与否
    41.     5. 页面渲染初始化
    42.     6. 浏览器窗口尺寸变化 resize
    43.     7. 向浏览器请求下面的样式信息
    44.        client offset width height scroll getComputedStyle currentStyle
    47.     在元素后面appendChild 不会引起元素的回流
    48.     在元素前面添加 insertBefore 会引起回流
    50.     减少回流次数
    51.     1. 添加class类名
    52.     2. this.style.cssText = "background:#000;width:200px"
    53.     3. element.display = none ----> element.display=block 重绘和回流各两次
    54.     4. document.createDocumentFragment 创建文档碎片
    55.     5. 动画的元素一应要绝对定位 定时器
    57.     浏览器操作队列（优化机制）
    58.     引起回流或者重汇的操作放入队列中，回流批量处理
    60. 自动忽略浏览器不能识别的样式