首屏渲染卡顿主因是DOM构建阻塞、节点过多、图片未设宽高、@import同步阻塞及关键CSS缺失；需优化script加载、控制DOM节点≤1500、设置img宽高、禁用@import、内联关键CSS并验证。
首屏渲染卡顿，先查 DOMContentLoaded 和 load 时间差
如果用户明显感知到“页面白屏久”或“内容闪一下才出来”，大概率不是 JS 执行慢，而是 DOM 构建被阻塞。打开 DevTools → Performance 面板录制一次刷新，重点看 DOMContentLoaded（DOM 解析完成）和 load（所有资源加载完）之间的时间差。若差值 > 300ms，说明有大量同步阻塞资源（比如未加 async 或 defer 的 <script>、未压缩的内联 CSS、或超大 <style> 块）正在拖慢首屏。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把所有非首屏必需的
<script>加上defer；第三方统计、埋点脚本必须用async - 内联 CSS 控制在 2KB 以内，超出部分抽离为
<link rel="preload" as="style">+<link rel="stylesheet"> - 避免在
<head>中写document.write()或动态插入<script>，它会强制暂停 HTML 解析
DOM 节点数超 1500 就该警惕了
Chrome 渲染引擎对单页 DOM 节点数敏感：超过 1500 个节点时，innerHTML 更新、getBoundingClientRect()、甚至 querySelectorAll() 的性能会断崖式下降。这不是理论阈值，是真实可复现的瓶颈——尤其在低端安卓机上，document.body.children.length 达到 2000+ 后，滚动帧率常跌破 30fps。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用 DevTools → Elements 面板右键
<body>→ “Copy outerHTML”，粘贴到编辑器里执行document.querySelectorAll('*').length快速统计 - 删掉所有无用的包装
<div>，比如仅用于 margin/padding 的“空 div”；改用 CSS:where()或gap替代嵌套布局 - 列表页用虚拟滚动（如
react-window或原生IntersectionObserver+display: contents），别一次性渲染全部 item
<img> 和 <picture> 不设 width/height 会触发 layout thrashing
没设宽高的图片加载后会改变文档流高度，导致浏览器反复重排（reflow）。尤其当多个图片堆在首屏，layout 事件可能触发 5–10 次，直接吃掉 60fps 中的 2–3 帧。这不是“影响体验”，是让渲染线程卡住。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 所有
<img>必须带width和height属性（即使 CSS 覆盖也得写），现代浏览器会据此预留空间，避免重排 - 响应式图片优先用
<picture>+srcset，但每个<source>的media查询要精确，避免匹配多个 source 导致重复下载 - 首屏图用
loading="eager"，非首屏一律loading="lazy"；注意 Safari 15.4+ 才支持loading对<iframe>生效
内联关键 CSS 时，@import 是隐形炸弹
哪怕只在内联 <style> 里写了一行 @import url('xxx.css');，浏览器就会同步阻塞解析，等那个 CSS 下载、解析完才继续构建 DOM。它比一个未 defer 的 <script> 更隐蔽、更致命——因为开发者常以为“只是 import”，却不知它等于插入了一个同步网络请求。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 彻底禁用
@import，无论在内联 style 还是外部 CSS 文件中；用构建工具（如 PostCSS @import 插件）做静态合并 - 提取首屏关键 CSS 的工具推荐
critters（Vite/webpack 插件）或手写criticalCLI，别依赖“自动提取”类服务——它们常漏掉伪元素或媒体查询内的规则 - 验证是否生效：禁用 JS 后刷新页面，首屏文字/按钮是否仍能正常显示并有基础样式？不能的话，说明关键 CSS 没覆盖到位
DOM 结构瘦身不是删代码，是删掉“浏览器不得不处理的冗余指令”。最易忽略的点是：你以为的“语义化 wrapper”在渲染层就是无意义的节点；你以为的“兼容写法”在现代浏览器里反而触发降级路径。优化得越细，越要回归到浏览器实际执行的每一步——解析、构建、布局、绘制。
