HTML渲染慢主因是资源加载时机不当和DOM结构冗余：关键CSS需内联或preload（带as="style"），script按依赖选async/defer，DOM应扁平化，预渲染须确保数据就绪。
HTML 渲染慢，八成卡在资源加载时机和 DOM 结构冗余上——不是 CSS 写得不够压缩，而是 link 放错了位置；不是 JS 体积太大，而是它本不该在首屏解析时就执行。
关键 CSS 必须内联或 preload，但不能漏掉 as 属性
浏览器遇到 <link rel="stylesheet"> 会暂停 HTML 解析，直到 CSSOM 构建完成。这意味着哪怕 DOM 已解析完毕，DOMContentLoaded 早触发，页面仍白屏。
- 首屏必需的 CSS（如排版、颜色、按钮样式）应内联到
<head>中，体积控制在 ≤10KB；超量会拖慢 HTML 下载与解析 - 若必须外链，用
<link rel="preload" href="main.css" as="style">强制提前获取；漏掉as="style"会导致浏览器按脚本处理，无法参与 CSSOM 构建 - 避免在
<body>底部放link：即使加了media="print"，某些旧版 Safari 仍会阻塞渲染 - 慎用
@import：它在 CSS 文件内部引入其他 CSS，是串行加载，且无法被preload提前捕获
script 标签的 async 和 defer 不是二选一，而是按依赖关系分层使用
默认 <script src="a.js"></script> 是同步阻塞的，会中断 DOM 构建。但 async 和 defer 的行为差异极大，混用容易导致执行顺序错乱或 DOM 访问失败。
-
async：下载不阻塞 HTML 解析，下载完**立即执行**，适合无依赖的独立脚本（如埋点、广告 SDK），多个async脚本执行顺序不确定 -
defer：下载不阻塞解析，执行在 **DOM 解析完成后、DOMContentLoaded 触发前**，且按书写顺序执行，适合主业务逻辑（如初始化 Vue/React 实例） - 不要给
defer脚本加async：两者互斥，后者会被忽略 - 内联脚本（
<script>console.log('hi')</script>）默认同步执行，若需延迟，应显式包裹document.addEventListener('DOMContentLoaded', ...)
DOM 结构越扁平，浏览器构建 DOM 树和计算样式越快
每多一层嵌套，DOM 节点数就指数级增长，样式计算（尤其是继承、通配符选择器）和布局（Layout）开销直线上升。这不是“语义化”的取舍问题，而是解析性能的硬边界。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 删掉无意义的
<div class="wrapper"><div class="container"><div class="content">套娃，直接用<main>或带语义类名的单层<div> - 避免用
<table>做布局：其 DOM 节点数量远高于等效的flex或grid，且浏览器对表格布局的优化远弱于现代布局模型 - 移除开发残留的
<!-- debug: xxx -->注释：它们虽不渲染，但仍作为注释节点进入 DOM 树，增加遍历成本 - 慎用
innerHTML = '<div>...</div>'拼接大量结构：每次赋值都触发完整子树重建；改用documentFragment或批量createElement插入
预渲染只对静态内容有效，动态数据必须标记“就绪”才不会截出 loading 状态
预渲染本质是在构建时用 Puppeteer 渲染 HTML 字符串，但它不知道你的 React/Vue 组件何时真正完成数据加载——它只认 DOM 是否“静止”。没处理好，首页就永远卡在骨架屏。
- Vue CLI 项目用
prerender-spa-plugin时，确保router.beforeEach或组件beforeMount中不发起未完成的异步请求；否则输出的是空容器 - React +
react-snap必须显式调用window.snapSaveState()，且仅在数据 fetch 完成后触发，否则截屏时仍是loading... - 服务端不支持的 API（如
navigator.geolocation、window.location.search）要在预渲染环境里 mock 或 guard，否则 Puppeteer 直接报错退出 - 预渲染后的 HTML 中，
<script>标签不能删：它是 CSR（客户端渲染）接管页面的入口，删了就变纯静态页
最容易被忽略的其实是「资源加载链路」的隐式依赖：一个没加 as 的 preload、一个写在 <body> 里的 link、一段在 defer 脚本里却依赖了未挂载 DOM 的逻辑——它们单独看都没错，合起来就让首屏多卡 300ms。优化不是堆技巧，而是把每条加载路径的因果关系理清楚。
