Appearance
HTML 工程化：文档壳、资源顺序与 SSR 模板边界
主题边界
- 工程中的 HTML 更多体现为模板壳、SSR 输出、Head 管理和资源插入顺序，而不是只写静态页面。
- 这层决定浏览器在拿到首字节后先做什么。
机制与流程
- HTML 壳通常包含
doctype、html/lang、meta charset、viewport、关键样式入口、挂载点和脚本入口。 - SSR 模板会把服务端已生成的 DOM、状态注水脚本、资源清单和 hydration 入口拼到同一文档。
- Head 管理不仅影响 SEO，也影响 CSP、预加载提示、字体连接和主题色等运行时行为。
关键差异
- 静态站点的 HTML 壳相对稳定；SSR / SSG / Islands 架构会根据路由与数据动态拼装文档壳。
- 前端路由应用的
index.html看似简单，但它承担所有资源图谱的根入口。
边界条件
- 错误的脚本注入顺序、重复的 meta、缺失的 charset/viewport 都会演变成线上故障。
- 把所有关键数据都通过内联脚本注水会增加 XSS 面和 HTML 体积。
工程落点
- 文档壳治理涉及 CSP、预加载、字体策略、SSR 注水体积和 hydration 启动顺序。
- 很多构建工具的 HTML transform、资源注入和环境变量替换都发生在这一层。