用 requestanimationframe 实现平滑拖尾：每帧新增一个半透明尾迹点，opacity 递减（如×0.92），总数≤30；容器 fixed 定位、pointer-events: none；移动端监听 touchmove 并 preventdefault；统一用 transform 定位+will-change: transform 硬件加速。
用 requestAnimationFrame 实现平滑拖尾，别用 setTimeout
鼠标拖尾本质是连续绘制多个半透明元素并逐帧衰减，requestAnimationFrame 能保证与屏幕刷新率同步，避免卡顿或掉帧。用 setTimeout 模拟 60fps 容易因执行延迟导致轨迹撕裂或堆积。
关键点：
- 每帧只新增一个“尾迹点”，旧点通过 CSS
opacity递减（如每次 ×0.92），而非删除再重绘 - 限制尾迹点总数（建议 ≤30），超出时
shift()掉最老的，防止内存持续增长 - 监听
mousemove时加{ passive: true }，避免移动端触发默认行为阻塞
CSS 层叠顺序和 pointer-events 必须设对
拖尾元素必须在鼠标指针下方、页面内容上方，否则会被遮挡或拦截点击。常见错误是把尾迹 div 直接 append 到 body 末尾，结果被 z-index 更高的弹窗盖住。
实操建议：
- 尾迹容器用
position: fixed; top: 0; left: 0; pointer-events: none;，确保不干扰任何交互 - 每个尾迹点用
position: absolute; transform: translate(-50%, -50%);居中定位，避免因宽高计算偏移 - 父容器
z-index设为 9999，但不要用!important—— 优先通过 DOM 插入位置控制层叠（如document.body.insertBefore(tailContainer, document.body.firstChild)）
移动端 touchmove 的坐标要从 touches[0] 取
桌面端 mousemove 的 clientX/clientY 在移动端无效。直接监听 touchmove 并取 event.touches[0].clientX 才能兼容 iOS/Android。
注意坑点：
- 必须在
touchstart时调用event.preventDefault()，否则部分 Android 浏览器会忽略后续touchmove - 不要同时监听
mousemove和touchmove并混用坐标源 —— 检测'ontouchstart' in window或maxTouchPoints > 0后分支处理 - 移动端高 DPR 屏幕下，
clientX是逻辑像素，绘制时无需乘window.devicePixelRatio—— CSStransform自动适配
性能敏感点：用 will-change: transform 和硬件加速
大量尾迹点频繁移动时，CSS 动画容易触发重排。纯靠 left/top 更新会导致严重掉帧。
正确做法：
- 所有尾迹点统一用
transform: translate(x, y)定位，禁用left/top - 给尾迹点加
will-change: transform;，提示浏览器提前升格为合成层 - 尾迹点使用
backface-visibility: hidden;防止 Safari 渲染异常 - 避免在尾迹点上设置
box-shadow或渐变边框 —— 这些会强制软件渲染，拖尾一多就卡死
复杂点在于 tail 点的 opacity 衰减必须用 JS 控制（CSS 动画无法动态响应帧差），但 transform 和 will-change 能守住 60fps 底线。真要加阴影效果，宁可少几个点，别硬撑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
