自定义光标动画：JS querySelectorAll与CSS :has伪类性能对比

1. JS 方案（遍历绑定事件 + TweenMax） #

这种方案和你参考的教程逻辑一致：通过querySelectorAll获取所有按钮，循环给每个按钮绑定mouseenter/mouseleave事件，触发时用TweenMax借助requestAnimationFrame驱动光标动画。

• 性能表现：
  • 初始化阶段需要遍历DOM节点并逐个绑定事件，按钮数量越多，初始JS执行时间越长；同时每个事件监听器都会占用内存，按钮规模大时内存开销会明显上升。
  • 动画运行时逻辑在JS线程执行，若页面同时有其他复杂JS任务（比如数据处理、批量DOM操作），很容易抢占资源导致光标动画卡顿。
  • 优势是灵活度极高，能实现复杂动画效果——比如自定义缓动曲线、多阶段递进动画，甚至结合其他交互逻辑做联动。

2. 纯 CSS 方案（:has() 伪类） #

用html:has(button:hover) .cursor这类选择器，直接通过CSS控制光标样式与动画：

• 性能表现：
  • 完全没有JS初始化开销，所有逻辑由浏览器CSS引擎处理，无需遍历DOM、绑定事件，内存占用几乎可以忽略。
  • 只要使用transform/opacity这类合成属性做动画，浏览器会将动画放到独立的合成线程运行，完全不会阻塞JS线程，就算页面JS在高负载运行，光标动画也能保持流畅。
  • 局限性是兼容性受限——虽然2023年主流浏览器已支持:has()，但旧版本浏览器（比如IE、Chrome 101之前的版本）无法适配；且动画逻辑受CSS语法限制，没法实现需要动态计算或高度自定义的动画效果。

核心性能差异总结 #

内容的提问来源于stack exchange，提问作者makesz1