重排与重绘导致的性能问题
浏览器的重排重绘导致一定的性能问题,频繁的性能操作会严重导致浏览器卡顿,影响用户体验;因此在开发过程中我们应该尽量的避免浏览器的重排重绘,从而性能与用户体验;
避免重排与重绘的例子
例: 当要改变某个dom的位置时,平常的方法就是获取这个dom节点,修改该节点的style样式,当修改这个样式时改变了cssom;因此浏览器重新渲染;不明白为什么要重新渲染?
因为浏览器的渲染是遵循下面公式:
dom + cssom = renderDom
所以cssom改变了,renderDom也要变化呀。
无法避免的dom操作
很多时候无法避免操作dom,那只能对dom操作进行优化了,就像react一样,我们可以在积攒一定会导致重排重绘的操作后一次性的去改变dom;庆幸前端社区的活跃,这里有很多已有的工具可以使用;
fastdom
官网的例子
fastdom.measure(() => {
console.log('measure');
});
fastdom.mutate(() => {
console.log('mutate');
});
fastdom.measure(() => {
console.log('measure');
});
fastdom.mutate(() => {
console.log('mutate');
});
// 输出结果
measure
measure
mutate
mutate
它会先进行读操作,再一次性进行写操作,从而减少操作dom,提升浏览器性能,说实话提升了不少;
具体使用方法,将读取dom的操作放到measure中,将写操作放到mutate中,就这?没错,就这!
积跬步,至千里,加油少年!
解决重绘卡顿的终极法宝 - - requestAnimationFrame
浏览器视图的更新是一帧帧更新的,在监听事件变化的时候在一帧中有时候往往触发了多个相同的事件,这样严重影响了浏览器的性能和用户的体验,因此可以使用该函数使其一帧只触发一次。
let ticking = false // 锁
addEventListener('pointermove', (e) => {
if (ticking) return
ticking = true
const position = e.clientX
window.requestAnimationFrame(() = {
changeWith(position)
ticking = false
})
)