根本原因是后端字段名与前端模板不一致，如后端返回post_title而模板写title；需用object.keys确认字段、解包嵌套数据、检查dom插入，并用documentfragment优化渲染。
为什么 fetch 拿到帖子数据后渲染空白？
常见现象是控制台没报错、console.log(data) 看起来也正常，但页面上啥都没显示。根本原因通常是后端返回的字段名和前端模板里写的不一致，比如后端返回 post_title，你却在 HTML 拼接时写了 title。
实操建议：
- 先用
console.log(Object.keys(data[0]))确认真实字段名，别凭经验猜 - 模板字符串里用可选链避免崩溃：
${item.title ?? '无标题'} - 如果后端返回的是嵌套结构（如
{ data: [...] }），记得解包再遍历，别直接data.forEach - 检查是否忘了把生成的 HTML 插入 DOM：
document.getElementById('post-list').innerHTML = htmlString
分页按钮点击没反应或跳转错乱？查这三处
不是 JS 绑错了事件，而是分页逻辑和实际接口参数对不上。比如你用了 page=2，但后端实际认的是 offset=20 或 cursor=abc123。
实操建议：
- 打开浏览器 Network 面板，点下一页，看发出的请求 URL 里参数是不是你预期的
- 分页组件里不要硬编码
limit=10，把它抽成常量，和后端约定好的每页条数保持一致 - 禁用按钮状态要靠 CSS 类 +
disabled属性双保险，光加opacity: 0.5不阻止点击 - 当前页码变量命名别用
page这种易冲突名，改用currentPage，避免和全局window.page冲突
innerHTML 渲染大量帖子卡顿？换 DocumentFragment
一次渲染 50 条帖子，用字符串拼接 + innerHTML，DOM 重排会明显卡顿，尤其低端安卓机。这不是 JS 慢，是浏览器反复解析 HTML 字符串并挂载节点导致的。
实操建议：
- 用
document.createDocumentFragment()批量创建节点，最后一次性 append 到容器 - 每条帖子用
template标签预定义结构，用content.cloneNode(true)复制，比字符串拼接更安全 - 避免在循环里反复读取
offsetHeight或getComputedStyle，会强制同步布局 - 如果列表超过 100 条，优先考虑虚拟滚动，而不是优化
innerHTML
移动端点击分页按钮闪一下就恢复？CSS 重绘陷阱
现象是点“下一页”按钮时整个列表区域短暂白屏或抖动，其实是 CSS 中用了 transform: translateZ(0) 或 will-change: transform 强制硬件加速，但没配好图层边界，导致分页时整个列表被重绘。
实操建议：
- 给列表容器加
contain: layout style paint，限制重绘范围 - 移除对
#post-list的transform，改用margin-top或top做动画位移 - 分页切换时，用
opacity: 0 → opacity: 1配合transition，比强行触发重排更稳 - 真要硬件加速，只加在动画元素本身（如加载动画 spinner），别加在整个列表父容器上
分页和列表渲染真正难的不是写出来，而是字段映射、参数对齐、重绘控制这三处细节——它们不出错时一切正常，一出错就很难定位到根源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
