不能直接 innerHTML += HTML 字符串，因 script 不执行、事件丢失、样式被 CSP 拦截、存在 XSS 风险；应使用 DOMParser 解析并 importNode 插入，脚本需手动提取执行，样式需重载至 head，事件用委托绑定。
用 fetch() 或 XMLHttpRequest 加载 HTML 片段是可行的，但直接插入到 DOM 里容易引发 XSS、样式错乱、脚本不执行、事件丢失等问题——这不是“能跑就行”的事，而是必须处理的隐患。
为什么不能直接 innerHTML += HTML 字符串？
浏览器不会自动执行通过 innerHTML 插入的 <script></script> 标签；已绑定的事件监听器不会复制到新节点；内联样式或 style 属性可能被 CSP 拦截；更严重的是，若后端返回未转义的用户内容，innerHTML 会直接触发 XSS。
- 避免使用
element.innerHTML += htmlString，改用insertAdjacentHTML('beforeend', htmlString)（语义更明确，但风险相同） - 如果必须插入含脚本的 HTML，需手动提取
<script></script>标签、创建新<script></script>元素、设置textContent后 append 到 document - 服务端返回纯 JSON 更安全，前端用模板字符串或
document.createElement构建 DOM
fetch() 加载 HTML 片段时怎么处理 script 和 style？
现代项目中，应尽量避免让后端返回可执行 HTML。但如果已有遗留接口只能返回 HTML，fetch() 后需做三件事：剥离 script、提取并重载 style、安全插入结构。
- 用正则或 DOMParser 提取
<script></script>内容（如/<script>]*>([\s\S]*?)<\/script>/gi</script>），再动态执行（仅限可信源） - 同理提取
，创建元素并 append 到（注意重复插入冲突） - 用
DOMParser解析 HTML 字符串：const doc = new DOMParser().parseFromString(html, 'text/html')，再用document.importNode()导入节点，比innerHTML更可控
IntersectionObserver 实现懒加载时，怎么避免重复请求？
滚动到底部触发下一页，最常见 bug 是快速滚动多次触发多个请求，导致数据错乱或状态混乱。
- 加 loading 状态锁：
let isLoading = false，进入回调时先判断if (isLoading) return，请求前设为true，finally中设回false - Observer 回调中立即调用
observer.unobserve(target)，等新内容插入后再observer.observe(target)绑定回新占位节点（或复用原节点但重置其data-loaded属性） - 服务端响应需带分页标识（如
next_cursor或has_more: true），前端据此决定是否继续监听，而不是靠“有没有新内容”来判断
动态加载内容后，事件监听器为啥不生效？
因为事件监听器只绑定在初始存在的元素上，新插入的按钮、链接等节点默认没有行为。
- 用事件委托：把监听器绑定在父容器（如
document.getElementById('article-list')），监听click并用event.target.matches('.load-more-btn')判断来源 - 不要在每次加载后重新绑定全部事件（易内存泄漏），委托一次即可覆盖所有当前和未来节点
- 若必须为每个新节点单独初始化（如第三方组件），应在插入后遍历新节点调用初始化函数，而非全局重扫
真正难的不是“怎么把 HTML 加进来”，而是“怎么让它像一开始就在那儿一样可靠运行”。脚本执行时机、样式隔离、事件生命周期、错误降级路径——这些细节堆起来，才是用户感知到的“流畅”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
