应使用defer属性加载业务js、async加载统计脚本，禁用document.write；首屏css内联且控制在2–3kb，非关键css用media="print"延迟加载；图片首屏用eager、非首屏用lazy；启用gzip/brotli压缩。
HTML模板本身不执行逻辑，但它的结构、资源引用方式和加载策略直接决定首屏能否快速渲染。优化核心不是“改模板语法”，而是控制浏览器解析 HTML 时的资源调度顺序与 DOM 构建效率。
怎么让 script 不阻塞 HTML 解析
浏览器遇到 <script src="..."></script> 会立刻暂停 HTML 解析，下载并执行 JS，导致白屏。这不是脚本写得不好，而是默认行为。
- 无依赖统计类脚本（如 analytics.js）用
async：下载不阻塞，执行时机不可控，可能早于DOMContentLoaded - 业务逻辑 JS（如交互组件、表单校验）优先用
defer：下载不阻塞，执行在 DOM 解析完成后、DOMContentLoaded前，且按顺序执行 - 绝对不要把
<script></script>放在里又不加属性——这是首屏白屏最常见原因 - 禁用
document.write()：现代浏览器已废弃，执行即清空文档流，必然阻塞且不可恢复
关键 CSS 怎么内联才真正生效
外部 <link rel="stylesheet"> 是渲染阻塞的，浏览器必须构建完 CSSOM 才能绘制第一帧。内联不是“把所有 CSS 塞进 <style></style>”，而是精准提取首屏必需样式。
- 内联内容必须控制在 2–3KB 内，过大反而拖慢 HTML 传输；避免在
<style></style>中嵌入 base64 大图 - 非首屏 CSS（如弹窗、分页、暗色主题）用
<link rel="stylesheet" media="print" onload="this.media='all'">延迟加载 - 严禁在 CSS 文件中用
@import引入关键样式：它串行加载、无法预加载、实测拖慢 FCP 超 300ms - 验证是否生效：Chrome DevTools → Coverage 面板看哪些 CSS 规则从未被使用，删掉比压缩更有效
preload 和 lazy 加载怎么配对不翻车
preload 和 loading="lazy" 看似都是“提前/延迟加载”，但语义和触发时机完全不同，混用等于浪费带宽或卡住首屏。
-
<link rel="preload" as="font" crossorigin>只用于当前导航「立刻要用」的资源，比如首屏字体、Hero 图；必须带as和crossorigin（字体不加crossorigin就不会加载） -
<img loading="lazy" src="...">只对<img>和<iframe></iframe>生效，且只在离视口约 1250px 时触发；首屏大图绝不能加，否则最大内容绘制（LCP）会严重延迟 - 别对
<img>同时设src和loading="lazy"再加 JS 监听——浏览器可能先加载src，造成重复请求 - 低版本 Safari 和部分安卓 WebView 不支持
loading="lazy"，可用'loading' in HTMLImageElement.prototype做兼容判断
HTML 结构本身怎么减负不伤语义
DOM 节点越多，浏览器解析、样式计算、布局的时间就越长。但“精简”不是删标签，而是去掉冗余层级和无效语义。
- 删除无意义的
<div> 包裹层，用 <code><header></header>、<nav></nav>、<main></main>等语义化标签替代，现代浏览器对它们有解析优化 - 避免多层嵌套表格或浮动布局，改用 Flexbox 或 Grid——它们生成的 DOM 更扁平，样式计算更快
- 上线前移除所有开发残留：注释、空标签、测试用的
<div style="border:1px solid red">... <li>启用 Gzip/Brotli 压缩 + HTML minifier（如 <a style="color:#f60; text-decoration:underline;" title="html" href="https://m.php.cn/zt/15763.html" target="_blank">html</a>-minifier-terser），空白符和换行能减少 15%~30% 体积</li> <p>最容易被忽略的是：HTML 模板的优化效果，只有在服务端开启 Gzip/Brotli、且资源路径稳定（避免每次构建 hash 变化导致缓存失效）时才能真正落地。光改标签结构，不配服务器压缩，提升几乎为零。</p> </div>
