浏览器渲染HTML的过程？

1、 HTML文件被HTML解析器解析成对应的DOM树，CSS样式文件被CSS解析器解析生成对应样式规则集

2、DOM树与CSS样式集解析完成后，附加在一起形成一个渲染树

3、节点信息的计算，根据渲染树计算每个节点的几何信息

4、渲染机制，即根据计算完成的节点信息绘制整个页面

重排

因为浏览器渲染页面默认采用流式布局，所以对某一个dom节点信息更改的时候，就需要对该dom结构进行重新计算。

该dom结构的修改会决定周边dom结构的更改范围，主要分为全局范围和局部范围。

重排的过程发生在DOM节点信息修改的时候，是根据渲染树中每个渲染对象的信息，计算出各自渲染对象的几何信息。

常见引起重排的操作

1、页面首次渲染

2、浏览器窗口大小发生变化

3、元素尺寸或位置发生改变

4、元素字体发生变化

5、添加或者删除可见dom元素

6、获取某些特定属性

width:高度、

height:高度

margin:外边距

padding 内边距

display 元素显示方式

border 边框

posstion 元素定位方式

overflow 元素溢出处理方式

clientWidth 元素可视区宽度

clientHeight 元素可视区高度

clientLeft 元素边框宽度

clientTop 元素边框高度

offsetWidth 元素水平方向占据的高度

offsetHeight 元素水平方向占据的高度

offsetLeft：元素左外边框至父元素左内边框的距离。

offsetTop：元素上外边框至父元素上内边框的距离。

scrollWidth：元素内容占据的宽度。

scrollHeight：元素内容占据的高度。

scrollLeft：元素横向滚动的距离。

scrollTop：元素纵向滚动的距离。

scrollIntoView()：元素滚动至可视区的函数。

scrollTo()：元素滚动至指定坐标的函数。

getComputedStyle()：获取元素的CSS样式的函数。

getBoundingClientRect()：获取元素相对于视窗的位置集合的函数。

scrollIntoViewIfNeeded()：元素滚动至浏览器窗口可视区的函数。（非标准特性，谨慎使用）

重绘

重绘是改变院子在页面中的展现样式，而不会引起元素在文档流中位置的改变，例如更改 元素 字体颜色、背景颜色、透明度、浏览器会将这些新样式赋予元素并重新绘制

color：颜色。

border-style：边框样式。

visibility：元素是否可见。

background：元素背景样式，包括背景色、背景图、背景图尺寸、背景图位置等。

text-decoration：文本装饰，包括文本加下画线、上划线、贯穿线等。

outline：元素的外轮廓的样式，在边框外的位置。

border-radius：边框圆角。

box-shadow：元素的阴影

重排一定会引起重绘的操作，而重绘却不一定会引起重排 重绘只是改变了元素的展现样式，并不会引起元素在文档流中位置的改变

针对 重绘、重排的性能优化

1、将多次改变样式的属性操作合并为一次

2、将需要多次重排的元素设置为绝对定位，脱离文档流。

3、在内存中多次操作节点，完成后再添加到文档中 比如在js中循环插入节点改为循环拼接到一个变量上，循环结束后将变量（DOM节点）插入节点树中

4、将要进行复杂处理的元素处理为display属性为none，处理完后进行显示

5、将频繁获取会引起重排的属性缓存到变量

6、减少使用table布局

7、使用事件委托绑定事件处理程序

8、利用DocumentFragment操作DOM节点

     var list = document.querySelector('#list2'); 
     // 1.创建新的DocumentFragment对象
     var fragment = document.createDocumentFragment(); 
     for (var i = 0; i < 100; i++) { 
         var li = document.createElement('li'); 
         var text = document.createTextNode('节点' + i); 
         li.append(text); 
        // 2.将新增的元素添加至DocumentFragment对象中 
         fragment.append(li);
     } 
     // 3.处理DocumentFragment对象 
     list.append(fragment);