現在不少站点依赖 JavaScript 渲染：列表由接口拉取，正文由前端拼装，導航由组件生成。對訪客来说頁面是完整的，對抓取工具来说却可能只是一個加载中的骨架。前端渲染内容自查，就是確認人看到的内容和抓取工具拿到的内容，是不是同一份。
為什么會只剩空壳
常见的原因有這几種：
- 首屏内容完全由脚本异步請求後插入，HTML 源碼里只有一個挂载点；
- 關键信息放在点击後才出現的折叠区、标簽頁或彈窗里；
- 分頁、篩選依赖接口，地址不變或變化没有規律；
- 图片地址和正文連結由脚本動態寫入，源碼中對應位置是空的。
抓取工具通常先取 HTML，再决定是否执行脚本。执行脚本需要額外资源，也可能因為超时、资源被屏蔽而中断，于是最终拿到的是一個空壳。
自查怎么做
1. 關掉脚本看一遍
用浏览器禁用 JavaScript 打開頁面，或直接抓取 HTML 源碼。如果正文、導航、主要連結都不见了，說明關键内容依赖脚本。
2. 對比两份快照
把原始 HTML 和渲染後的 DOM 各存一份，逐項對照：标题、正文、图片替代文字、内鏈、分頁地址。差异越大，需要處理的地方越多。
3. 检查入口和連結
站内連結如果是脚本事件绑定的按钮，抓取工具通常不會去点。連結應该是真正的 a 标簽，带上可以訪問的 href。
4. 看资源是否被挡
脚本、接口如果寫在 robots.txt 的禁止項里，抓取工具就無法取到資料来完成渲染。需要在別让接口被大量抓取和内容能被渲染之間做個取舍。
可以考虑的處理方式
- 服務端渲染：在服務端把 HTML 拼好再返回，首屏内容直接出現在源碼里，改動相對集中。
- 静態化或预渲染：對更新不频繁的栏目頁、詳情頁，在發布时生成静態 HTML，既能被直接讀取，也减轻資料库压力。
- 同构渲染：同一套代碼在服務端和客戶端執行，首屏由服務端輸出，後續交互由客戶端接管。
- 動態渲染：识別到抓取工具时返回预渲染版本，普通訪客仍走原来的前端流程。實現較简單，但要保證两版内容一致，避免出現差异。
- 内容分层：把标题、摘要、正文主体、主要内鏈放進首屏 HTML，评论、推荐、点赞之類的交给脚本。
容易忽略的几個细节
- 分頁和篩選的地址應该可以獨立打開，而不是只有点击才触發；
- 懒加载图片要保留可讀的地址或占位，別让图片信息只存在于脚本里；
- 發布時間、作者、面包屑等字段尽量用静態标簽寫出来；
- 如果站点有站点地图，確認清單里的地址都能返回带内容的 HTML。
提醒：渲染方式的調整會影响頁面加载表現和服務器负载，改完之後记得观察一段時間的响應時間和错誤率，別只看抓取结果。
小结
前端渲染本身不是問题，問题在于關键内容只存在于脚本執行之後。把正文、連結、分頁這些需要被讀到的部分放進 HTML，其余交互仍然可以交给前端。這样訪客体驗不變，抓取工具也能拿到相對完整的頁面。