SVG在移动端H5需规避渲染层陷阱与JS误操作：禁用内联大量路径和字符串拼接，优先用引用；慎用滤镜、阴影等GPU重负载效果；动画交由CSS transform驱动，事件委托至父级；按需加载并及时销毁不可见SVG。
SVG在移动端H5中看似轻量，实则容易因不当使用引发卡顿、内存飙升甚至白屏。关键不在“用不用”，而在“怎么用”——尤其要避开渲染层陷阱和JS误操作。
避免内联大量路径数据（尤其是动态生成）
把上百个
- 优先用
引用预定义的 - 动态图标尽量走雪碧图式SVG Sprite，单个文件加载，按ID复用
- 若必须动态生成路径，用
document.createElementNS逐个创建元素，而非拼接innerHTML
慎用滤镜、模糊、阴影等GPU重负载效果
filter: url(#blur)或feGaussianBlur在iOS Safari中极易触发离屏渲染+全图重绘，低端机上帧率常跌破10fps。
- 移动端优先用CSS
backdrop-filter替代-webkit-前缀） - 阴影用
box-shadow代替feDropShadow，后者无硬件加速 - 必须用滤镜时，限制作用区域：给SVG容器设
overflow: hidden并缩小viewBox范围
关闭不必要的SVG动画与事件监听
用touchstart，会阻塞滚动事件。
- 动画统一交给CSS @keyframes +
transform驱动，只作用于 - 事件委托到父级
标签，用event.target判断点击目标，避免遍历子元素绑定 - 不可见SVG（如tab切换后隐藏的图表）及时调用
remove()或display: none，防止仍在渲染树中
按需加载与降级策略
首屏不展示的SVG（如底部弹窗图标、懒加载图表），不应随HTML一起下载；老机型对SVG支持有限，需有fallback。
- 用
loading="lazy"配合
- 复杂图表用
IntersectionObserver监听进入视口后再初始化SVG内容 - 通过
matchMedia('(min-width: 0px)')或UA检测识别低端Android，降级为PNG或纯CSS绘制
不复杂但容易忽略：每次插入SVG前，检查是否已存在同ID元素；每次销毁前，清除定时器和事件监听。这些细节决定流畅度上限。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
