html结构缺陷是首屏白屏主因：嵌套超6层触发重排、脚本未用defer阻塞解析、内联代码超50行延迟dom构建、懒加载误用于首屏图。
HTML结构本身就会拖慢渲染——不是JS跑得慢，是浏览器还没把DOM建完。 嵌套过深、标签滥用、脚本位置错乱，这三类问题直接卡在解析阶段，首屏白屏或内容缺失往往就出在这儿，而不是后续的JS执行或图片加载。
DOM嵌套超过6层会触发截断或重排
浏览器流式解析HTML，每多一层嵌套就要多创建一个节点、多算一次样式、多走一次布局检查。移动端或低端设备上，<div><div><div><table><tr><td><div></div></td></tr></table></div></div></div>这种结构极易让首次内容绘制（FCP）延迟200ms以上，严重时甚至导致后半段HTML被跳过——DevTools里根本看不到你写的<main></main>。
- 用Chrome DevTools → Elements面板右键任意节点 →
Show DOM properties查depth值，≥7就必须拆解 - 能用
<section></section>、<article></article>、<nav></nav>替代<div>堆叠的，优先替换；语义标签不增加渲染开销，反而降低CSS选择器复杂度 <li>避免在<code><td>里嵌套<code><div>，表格单元格内样式计算成本高，嵌套后极易触发强制重排 <h3> <code><script></script>放里不加defer就是阻塞渲染没加
defer或async的<script></script>放在或顶部时，浏览器必须暂停HTML解析、下载并执行完脚本，才能继续构建DOM树。这是首屏白屏最常见原因，且和JS代码量无关。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件下载如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 依赖DOM的操作（如初始化轮播、绑定事件）一律用
defer：并行下载，DOM解析完再按序执行 - 完全独立逻辑（统计、埋点）可用
async，但注意它不保证顺序，且可能在document.body还不存在时就运行 - 真要操作DOM的脚本，别信“DOMContentLoaded比load快”的模糊说法——实测晚100ms挂载，首屏就晚100ms
- 绝对不要在
里写<script>console.log()</script>，除非是极小的CSP nonce注入等同步必需逻辑
内联
<style></style>和<script></script>超50行就该拆服务器返回的HTML体如果含大段内联代码，不仅拉高TTFB（Time to First Byte），还会让HTML解析器卡在文本扫描阶段，延迟DOM构建起点。单个
<style></style>或<script></script>块超过50行，基本等于主动给首屏加延迟。- 用
curl -I看响应头Content-Length，HTML体 >15KB 时，重点检查内联资源占比 - 首屏关键CSS可内联，但务必控制在14KB以内；其余CSS全部外链，配合
<link rel="preload" as="style">预加载 - 内联JS只保留极简初始化逻辑（如设置
window.__INIT__），业务逻辑全走外链+defer
懒加载
<img>和预加载<link rel="preload">不是可选项现代浏览器原生支持
loading="lazy"，不用JS库也能见效。但它只对非首屏图片有效——首屏图加了反而会延迟加载；而字体、关键CSS这些隐性依赖资源，不加preload就只能等HTML解析到对应标签才发起请求，白白浪费空闲带宽。- 所有非首屏
<img>必须加loading="lazy"；首屏图明确去掉该属性 - 首屏必用字体加
<link rel="preload" href="https://www.php.cn/link/2d084a4acd512e6314d6e8ae111b8205" as="font" type="font/woff2" crossorigin>，缺crossorigin属性会失效 - 关键CSS文件（如
base.css）用<link rel="preload" as="style">预加载，再用<link rel="stylesheet">正常引入 - 慎用
prefetch，它适合“用户下一步可能访问的页面”，不是首屏资源
真正难优化的不是某一行JS，而是结构决策点：比如要不要为复用性把
<header></header>抽成组件、是否允许<table>里出现<code><div>、能不能接受把<code><h2></h2>改成<h3></h3>来维持层级连续——这些选择不报错，但会在首屏渲染、SEO索引、无障碍访问三个维度同时埋雷。 - 依赖DOM的操作（如初始化轮播、绑定事件）一律用
