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