性能优化篇-解决重排重绘导致的性能问题

重排与重绘导致的性能问题

浏览器的重排重绘导致一定的性能问题,频繁的性能操作会严重导致浏览器卡顿,影响用户体验;因此在开发过程中我们应该尽量的避免浏览器的重排重绘,从而性能与用户体验;

避免重排与重绘的例子

例: 当要改变某个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
	})
)
©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页