网站性能优化具体手段——渲染优化及缓存优化

• 渲染优化

关注点：浏览器获取到资源之后进行渲染部分的相关性能优化。

浏览器渲染过程处理“黑盒”：

资源文件：

1. html解析：DOM

2. css姐姐：CSSOM

3. 样式结构合并：RenderTree

4. 页面布局：节点的结构关系及样式信息 到 浏览器视口的那个位置占据多大空间

5. 绘制：绘制元素的可视内容如颜色、边框、文字等

6. 合成：内容绘制了多个图层，对多个图层进行合成

操作js，css对页面进行修改时会触发生命周期的变化——重绘/重排，减少重绘重排以提高页面性能

重排：dom节点之间会相互关联，修改其中某一个dom节点的几何属性，其他元素的几何属性及位置会受到相关影响，就会触发重排，影响除了dom渲染之外所有渲染

重绘：当对dom的修改导致样式变化，如颜色，背景色，字体等改变，浏览器就不需要重新计算元素几何属性，就减少了重排步骤

相比于重绘，重排更消耗性能，重点对重排进行优化。

会触发重排的操作：对元素几何属性修改如宽高，内外边距，距上下左右边距等。修改dom树结构，增加修改删除dom结构。获取特定属性值，如offsetTOP、scrollTOP、clientWidth、clientHeight等。

渲染性能：避免样式频繁修改：

3次布局：

const Box = document.querySelector('#box');

box.style.width = '100px';

box.style.height = '100px';

box.style.border = '2px solid blue'

1次布局：

.my-box { width: 100px;height: 100px;border:2px solid blue; }

const Box = document.querySelector('#box');

box.classList.add('my-box')