渲染优化
关注点:浏览器获取到资源之后进行渲染部分的相关性能优化。
浏览器渲染过程处理“黑盒”:
资源文件:
html解析:DOM
css姐姐:CSSOM
样式结构合并:RenderTree
页面布局:节点的结构关系及样式信息 到 浏览器视口的那个位置占据多大空间
绘制:绘制元素的可视内容如颜色、边框、文字等
合成:内容绘制了多个图层,对多个图层进行合成
操作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')
评论区