1. reflow: 回流,即对DOM文档中某些或全部元素的尺寸、结构或者字体大小等属性进行修改时,浏览器重新对这些元素或者全部元素渲染的过程.
触发回流的操作:
【1】修改元素的尺寸、结构
【2】修改元素的字体大小等属性
【3】页面首次加载渲染
【4】获取offset | client | scroll系列属性
【5】浏览器窗口大小发生改变【触发resize事件】
【6】使用JavaScript添加或删除DOM元素
【7】使用css伪类 如:hover
2. repaint:重绘,即对不涉及尺寸、结构等变化的元素属性修改,浏览器会对其进行重绘.
触发重绘的操作:修改元素的color、background-color、visibility等
visibility:hidden会保留元素的空间,仅为视觉上的完全透明(看不见、摸得着)【重绘】
display:none不为被隐藏的对象保留其物理空间(看不见摸不着)【回流】
分析:(1) 回流一定会触发重绘,重绘不一定触发回流
(2)回流性能消耗要比重绘更高
(3)如何减少重绘和回流,以提升浏览器渲染性能?
【1】避免循环获取offset | client | scroll 系列元素,可以考虑使用一个变量缓存其值,之后使用这个变量来进行相应操作.
<div class="box"></div>
<style> .box { width: 200px; height: 200px; background-color: skyblue; margin: 100px auto; } </style>
JS循环获取效率对比:
let box = document.querySelector('.box'); console.time(); let box_width = box.offsetWidth; for(let i=0;i<10000;i++) { let a = box.offsetWidth; // 14.59912109375 ms 基本维持在12ms ~ 16ms // let a = box_width; // 0.6728515625 ms 基本维持在 0.5ms ~ 1.0ms } console.timeEnd();
【2】使用css3硬件加速的操作,比如transform、opacity、filters,尤其是transfrom比较常用
【3】对于复杂的animation,使用position: absolute | fixed 使其脱离文档流,避免回流重绘.
【4】多次操作一个元素的属性时,先使用display: none(会导致一次回流),但之后的所有对此元素操作不会导致回流重绘,最后再设置会原来的display模式.
【5】修改css样式时,避免js代码修改,可以通过直接修改类名设置样式.