减少依赖CSS变量的范围可以提升性能.js

/*
场景：scroll事件中要去设置一个css变量，来控制某些元素的定位位置，

xxx.addEventListener('scroll', () => {
  const scrollY = xxx.scrollY;
  document.documentElement.style.setProperty('--scroll-y', `${scrollY}px`);
});

可见，一股脑就把变量设置到document上了
scroll事件很容易造成性能问题
好，现在假设这段代码已经造成性能问题了

优化手段之一就是
减少依赖CSS变量的范围
就是不要将css变量设置在document上，而是设置在要这些元素的最近的父容器元素上

结果：性能提升3倍

造成性能问题的并不是 document.documentElement.style.setProperty 这段代码
而是这段代码设置的css变量会影响的元素节点的个数，由于css变量设置在document上，即文档的根元素上，所以可能的影响是所有元素节点
浏览器的计算量很大
如果将css变量设置在一个空的div上，效果是毫无性能问题
因此，造成性能问题的原因是，css变量的设置可能影响的元素节点个数，浏览器的计算量。
*/