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

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

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

避免重排与重绘的例子

例： 当要改变某个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
	})
)