新手引导是通过遮罩层、高亮区域和提示气泡引导用户操作的轻量交互方案；纯 HTML+CSS+JS 即可实现，关键在于 pointer-events 控制穿透、aria 属性保障可访问性、状态机管理流程、动态计算定位、GPU 加速渲染及移动端适配细节。
什么是新手引导，HTML里怎么实现最轻量
新手引导不是必须用框架或第三方库，纯 HTML + CSS + 少量 JavaScript 就能跑起来。核心是遮罩层 + 高亮区域 + 提示气泡，关键在于不干扰原有 DOM 结构、不破坏可访问性。
常见错误是直接用 position: fixed 覆盖整个页面，结果遮住了滚动条、焦点丢失、屏幕阅读器读不到提示内容。正确做法是用 pointer-events: none 控制穿透，用 aria-describedby 关联提示文本。
- 遮罩层用半透明
div，但设置pointer-events: none，让点击穿透到底层元素 - 高亮区域用绝对定位的
div，pointer-events: auto保证它可交互 - 提示气泡绑定到目标元素上，用
aria-labelledby或aria-describedby声明关系
怎么用原生 JS 控制引导流程（不依赖 jQuery）
引导流程本质是状态机：当前步数、是否已关闭、是否跳过。用一个对象存状态，用 dataset 标记每步对应的目标元素，比硬编码 getElementById 更健壮。
容易踩的坑是事件监听没清理，比如用户反复点“下一步”，导致多个 click 监听器叠加。每次进入新步骤前，先调用 removeEventListener 清掉旧的。
立即学习“前端免费学习笔记（深入）”；
- 用
data-step="1"、data-step="2"标记要引导的元素，JS 通过document.querySelectorAll("[data-step]")获取全部步骤 - 每步切换时，调用
element.scrollIntoView({ behavior: "smooth", block: "center" })自动居中目标元素 - 关闭引导时，确保移除所有临时 DOM 节点和事件监听器，避免内存泄漏
CSS 遮罩和高亮区域怎么写才不卡顿
遮罩层如果用大尺寸 box-shadow 或多层渐变，滚动时会掉帧。真正轻量的做法是只用一层 rgba(0,0,0,0.6) 背景 + will-change: transform 触发 GPU 加速。
高亮区域不能靠 outline 或 border 模拟，因为它们不占布局空间，容易错位。必须用绝对定位的 div 包裹目标元素的 getBoundingClientRect() 坐标。
- 遮罩层设
inset: 0和z-index: 9999，避免用top/left/right/bottom: 0兼容性差 - 高亮区域用
transform: translate(-50%, -50%)居中，配合width/height动态计算，别用margin - 动画用
transition: opacity 0.2s ease，不用animation，减少重排
移动端适配要注意哪几个 DOM 细节
在 iOS Safari 上，固定定位的遮罩层可能被虚拟键盘顶起、或因 viewport 缩放失效。根本解法不是加 user-scalable=no，而是监听 resize 和 orientationchange 事件，动态重算遮罩尺寸。
另一个坑是触摸事件没处理 touchstart 和 click 冲突，导致点一次触发两次。统一用 pointerdown 替代两者，兼容性更好且无双击延迟。
- 遮罩层加
style="-webkit-overflow-scrolling: touch"保持滚动顺滑 - 目标元素若为
button或a，确保有role="button"和tabindex="0"，否则 VoiceOver 不识别 - 用
window.visualViewport?.width取真实视口宽，而不是window.innerWidth，后者在键盘弹出时不准
最常被忽略的是引导结束后没恢复 body 的 overflow。遮罩激活时设了 overflow: hidden，关掉后必须显式设回 auto，否则页面无法滚动。
