当元素的款式产生扭转时,浏览器须要触发更新,从新绘制元素。
在这个过程中,有两种类型的操作,即重绘和回流。
@1:重绘 (repaint):当元素款式的扭转不影响布局时,浏览器将应用重绘对元素进行更新,此时因为只须要 UI 层面的从新像素绘制,因而损耗较少。@2:回流 (reflow):
当元素的尺寸、构造或触发某些属性时,浏览器会从新渲染页面,称为回流。此时,浏览器须要从新通过计算,计算后还须要从新页面布局,因而是较重的操作,会触发回流的操作:· 页面首次渲染
· 浏览器窗口小大扭转
· 元素尺寸、地位、内容产生扭转
· 元素字体大小扭转
· 增加或删除可见的 dom 元素
· 激活 css 伪类(:hover)· 查问某些属性或调用某些办法:clientWidth、clientHeight、clientTop、clientLeft
offsetWidth、offsetHeight、offsetTop、offsetLeft
scrollWidth、scrollHeight、scrollTop、scrollLeft
getComputedStyle()
getBoundingClientRect()
scrollTo()
· 回流必然触发重绘,重绘不肯定触发回流;
· 重绘的开销较小,回流的代价较高。
css:
· 防止应用 table 布局;· 将动画成果利用到 position 属性为 absolute 或 fixed 的元素上。js:
· 防止频繁操作款式,可汇总后对立顺次批改;· 尽量应用 class 进行款式批改;· 缩小 dom 的增删次数,可应用字符串或 documentFragment 一次性插入;· 极限优化时,批改款式可将其 display:none 后批改;· 防止屡次触发下面提到的会触发回流的办法,尽量用变量存。