fetch + insertadjacenthtml 是最可控的组合，因 insertadjacenthtml('beforeend') 只追加不重写，可保留事件监听、懒加载状态及内联脚本，避免滚动重置与交互失效，且要求服务端仅返回纯内容块。
fetch + insertAdjacentHTML 是最可控的组合
直接用 innerHTML 替换容器内容会清空已有事件监听、丢弃已加载的图片懒加载状态、忽略内联 <script></script>，还可能触发 XSS（哪怕你信任后端）。insertAdjacentHTML('beforeend') 只追加不重写，保留原 DOM 结构和绑定，适合分段加载长文本（如文档章节、评论流、日志列表）。
常见错误现象：container.innerHTML += htmlString 导致滚动位置重置、已展开的折叠面板收起、点击事件失效。
- 必须用
insertAdjacentHTML('beforeend', html)或insertAdjacentElement追加，而不是赋值 - 服务端返回的 HTML 片段不能含
或外壳，只返回纯内容块，例如：<div class="section"> <h2>第一章</h2> <p>...</p> </div> - 若需执行脚本（如高亮代码、图表渲染），得手动提取
<script></script>标签并动态创建执行——仅限可信源，且必须加type="module"或显式async=false控制执行时机
滚动触发型加载要防重复请求
监听 scroll 加载下一页时，容易在快速滚动或网络延迟时触发多次相同请求，导致内容重复、顺序错乱甚至内存泄漏。
使用场景：长文章分页、无限滚动评论区、日志时间线。
- 加节流或防抖：用
IntersectionObserver替代scroll事件更可靠，例如监听底部占位元素是否进入视口 - 设 loading 状态锁：
if (isLoading) return;+isLoading = true，请求结束再置false - 记录已加载页码或游标（如
last_id=12345），避免靠 offset 分页导致漏数据或重复 - 失败后不要自动重试，显示“加载失败”按钮，由用户主动触发重试
用 <template></template> 预存结构比 innerHTML 字符串拼接更安全
把 HTML 模板写死在页面里，用 JS 克隆插入，能规避字符串拼接的 XSS 风险、避免引号转义问题，也方便复用结构逻辑。
典型错误：用 innerHTML = '<div onclick="doSomething('+id+')">...</div>' —— ID 未转义就注入，极易被构造 payload。
- 写法：
<template id="item-template"><div class="item" data-id="${id}">${title}</div></template> - 取用：
const tpl = document.getElementById('item-template').content.cloneNode(true); tpl.querySelector('.item').dataset.id = item.id; - 插入：
container.appendChild(tpl)，而非innerHTML赋值 -
<template></template>内容不会被解析、不发起资源请求、不执行脚本，完全可控
异步加载后样式和事件要手动补全
动态插入的 HTML 不会自动应用 CSS 作用域规则，也不会触发已绑定的事件委托之外的新监听器。比如你用 document.body.addEventListener('click', handler) 监听所有按钮，新插入的按钮能响应；但如果是 button.addEventListener('click', ...) 单独绑定，新按钮就完全没反应。
性能影响：每次插入都重新查询并绑定大量事件，会卡顿；全量重绑样式类则浪费计算。
- 优先用事件委托，把监听器挂在父容器上，用
e.target.matches('.load-more-btn')判断目标 - 样式隔离靠 class 前缀（如
.article-content .section），别依赖<style scoped></style>—— 它在纯 HTML 字符串里无效 - 需要初始化的组件（如代码高亮、日期格式化），在插入后立即调用对应函数，例如：
Prism.highlightAll(); - 避免在每次插入后遍历所有节点做
querySelectorAll，可只处理新插入的 fragment
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
