超过3层的嵌套会拖慢DOM构建和样式计算，尤其在低端设备上引发明显卡顿；应优先用等语义标签替代，结合CSS Grid/Flexbox布局，并通过Chrome DevTools检查node.depth值优化结构。
避免深度嵌套的 <div> 结构
<p>超过3层的 <code><div> 嵌套会拖慢DOM构建和样式计算，尤其在低端设备上明显卡顿。浏览器解析时需逐层匹配CSS选择器，嵌套越深，重排重绘成本越高。
<p>实操建议：</p>
<ul><li>用 <code><section></section>、<article></article>、<nav></nav> 等语义化标签替代无意义的 <div> 堆叠
<li>检查现有结构：Chrome DevTools → Elements 面板右键节点 → “Show DOM properties”，观察 <code>childElementCount 和层级深度
<div> 撑结构
<h3>给高频操作的元素加 <code>id 而非 class
用 document.getElementById() 查找元素比 querySelector() 或 getElementsByClassName() 快一个数量级——前者是原生哈希查找，后两者需遍历DOM树。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 轮播图切换、表单实时校验、滚动监听中反复用
document.querySelector('.item')导致 FPS 下降 - 动态插入的节点未设
id，后续更新只能靠querySelectorAll+ 循环匹配
正确做法：
- 对需要JS频繁读写的元素（如
<canvas></canvas>、状态容器<div id="status-bar">）直接赋予唯一 <code>id - 避免用
id做样式钩子——CSS里仍用class，JS操作只认id - 字体文件：
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>—— 必须加crossorigin，否则字体加载失败 - 关键CSS：
<link rel="preload" href="critical.css" as="style" onload="this.onload=null;this.rel='stylesheet'">—— 用onload回调防阻塞 - 不要对
<img alt="怎么优化HTML标签提升性能？加载加速指南" >用preload：浏览器已通过HTML解析自动发起请求；应改用loading="eager"或懒加载控制 - 4G网络下，一张未适配的1920px宽图可能达800KB；用
srcset后首屏图可压缩到120KB以内 - Safari 对
<img srcset alt="怎么优化HTML标签提升性能？加载加速指南" >支持稳定，但旧版 Firefox 对<picture></picture>的media查询响应有延迟，建议 fallback 到src
<link rel="preload"> 只预加载关键资源
不是所有资源都适合 preload。滥用会导致带宽抢占，反而延迟首屏渲染。它只适用于：当前页面立即需要、且浏览器尚未发现的资源（比如字体、关键CSS、首屏大图）。
使用场景与参数差异：
用 <picture></picture> + srcset 替代单图 <img src alt="怎么优化HTML标签提升性能？加载加速指南" >
单图方案强制所有设备下载同一尺寸资源，移动端浪费带宽，桌面端又可能模糊。现代方案需按视口宽度、设备像素比（dpr）分发适配图像。
性能影响明显：
简短示例：
<picture> <source media="(max-width: 768px)" srcset="hero-sm.webp 1x, hero-sm@2x.webp 2x"> <source type="image/webp" srcset="hero.webp 1x, hero@2x.webp 2x"> <img src="hero.jpg" alt="Hero"> </picture>
注意 <source></source> 顺序：浏览器从上到下匹配，第一个满足条件的生效；src 是最终 fallback，必须保留。
真正卡顿的地方往往不在 JS 执行，而在 HTML 结构本身——比如一个被忽略的 <div> 嵌套，或一段没加 <code>crossorigin 的字体 preload，会让整页加载节奏乱掉。这些点不报错，但会在 Lighthouse 的“Avoid enormous network payloads”或“Minimize main-thread work”里悄悄扣分。
