用语义化标签替代无意义能减少dom节点数、提升解析与查询效率；+srcset可按需加载适配图片；内联首屏关键css可加速fcp；延迟加载非首屏和第三方脚本能减轻主线程压力。
用语义化标签替代无意义 <div> 能直接减少 DOM 节点数
<p>浏览器解析 HTML 时，每个 <code><div> 都要创建节点、计算样式、参与布局。一堆嵌套 <code><div> 不仅拖慢解析，还让 JS 查询（比如 <code>document.querySelectorAll('.wrapper .inner .content')）更慢。语义化标签如 <header></header>、<nav></nav>、<article></article>、<section></section> 本身不带样式，但能精准表达结构，让浏览器和辅助工具更高效处理。
实操建议：
- 把纯容器型
<div class="header"> 换成 <code><header></header>；<div class="nav"> → <code><nav></nav>；<div class="main"> → <code><main></main> - 避免「语义套娃」：不要
<section><div><div> <p>，能用 <code><article><h2></h2> <p></p></article>就别加中间层 - 检查是否真需要包裹：CSS Grid / Flex 容器可直接作用于语义标签，不必额外套
<div> 来“撑开”布局 <h3> <code><picture></picture>+srcset比单纯<img>更快加载适配图一个
<img src="hero.jpg">在手机上也会下载桌面尺寸图，浪费带宽、拉长 LCP。而<picture></picture>允许按屏幕宽度、像素密度甚至设备类型提供不同资源，浏览器只下载最匹配的那个。常见错误现象：用了
<picture></picture>却没写<source></source>的media或type，导致回退到<img>，白忙一场。实操建议：
- 响应式图片优先用
<picture></picture>包裹，至少包含一个<source media="(max-width: 768px)" srcset="hero-sm.jpg"></source>和兜底<img src="hero-lg.jpg" alt=""> -
srcset中的宽度描述符（如hero-400w.jpg 400w）必须配合sizes属性，否则浏览器无法判断该选哪个 - 不要给所有图片都上
<picture></picture>：图标、SVG、小装饰图用普通<img>更轻量
内联关键 CSS，但别把整个
style.css塞进浏览器遇到外部
style.css会阻塞渲染，直到 CSSOM 构建完成。把首屏必需的样式（比如导航栏颜色、标题字体、LCP 元素布局）内联进的<style></style>，能跳过一次 HTTP 请求，显著提升 FCP。容易踩的坑：
- 把整站 CSS 内联 → HTML 体积暴涨，反而拖慢首字节（TTFB）和传输时间
- 内联后没删对应外部文件中的重复规则 → 浏览器多解析一遍，且可能因层叠顺序出错
- 服务端未做缓存控制，导致内联 CSS 无法被 CDN 缓存，每次请求都重传
实操建议：用工具（如
critters或mini-css-extract-plugin的 critical CSS 提取功能）自动提取首屏 CSS，只内联顶部可见区域涉及的规则。延迟加载非首屏
<iframe></iframe>和第三方脚本，用loading="lazy"或动态插入<iframe></iframe>（尤其是嵌入地图、视频、评论框）默认会立即加载并执行，即使用户根本没滚动到那里。它还会触发跨域资源请求、JS 执行、甚至广告追踪，严重拖慢主文档解析和主线程。使用场景：评论区、底部推荐、隐藏弹窗里的嵌入内容、表单验证用的第三方 widget。
实操建议：
- 对非首屏
<iframe></iframe>加loading="lazy"（Chrome 76+ 支持，Safari 15.4+，Firefox 115+），浏览器会等其进入视口附近再加载 - 对老浏览器或需精确控制的场景，先用占位
<div>，滚动监听后动态创建 <code><iframe></iframe>并设src - 第三方 JS（如统计、客服）一律禁用自动注入，改用事件触发加载（例如用户点击「在线客服」按钮后再
document.createElement('script')）
真正影响加载速度的，往往不是某个炫技技巧，而是那些看起来“不影响功能”的嵌套
<div>、没设 <code>sizes的srcset、或者把 200KB CSS 全塞进的惯性操作。改之前先用 Chrome DevTools 的 Coverage 标签看看哪些 CSS/JS 实际没用到，比盲目优化更省力。 - 响应式图片优先用
