请提供具体的文章内容，我才能根据要求生成符合规范的摘要。
为什么<script>放在<head里会让首屏白屏</script>
浏览器解析HTML是流式的，遇到没加defer或async的<script>就立刻暂停解析、下载并执行，等它跑完才继续建DOM树。哪怕只有一行console.log(1)，<h1>和首图都得干等。
-
<script>放</body>前最稳——DOM已就绪，不用等事件触发 - 非关键脚本（统计、埋点）必须加
defer：按顺序下载+执行，不阻塞解析 -
async只适合完全独立逻辑（如广告加载），执行时机不可控，document.getElementById可能返回null - 内联脚本永远阻塞，除非只做极轻量初始化（如设置
window.__INIT__）
DOM嵌套超6层会触发强制重排
浏览器每创建一个DOM节点都要做样式匹配和布局计算。嵌套越深，CSS选择器路径越长，getBoundingClientRect()这类读取操作越容易触发强制同步布局（forced reflow），低端安卓机上FCP延迟明显。
- 用Chrome DevTools → Elements面板右键节点 → “Show DOM properties”，查
depth值；超过6层就要警惕 - 用
<main>、<section>替代无意义的<div class="wrapper"><div class="inner"><div class="content"> - 避免在
<table>里嵌套<div>：表格需整行解析完才能渲染，重排成本更高 - Flexbox/Grid能实现的布局，别靠三层
<div>堆出来
首屏内容位置靠后直接拉垮LCP指标
浏览器不会“跳着解析”。<h1>、<img fetchpriority="high">、<form>如果写在HTML底部，哪怕体积再小，也得等前面所有标签解析完才进DOM树——LCP自然被拖长。
- 把首屏核心元素尽量前置：
<main>、<h1>、首图、主按钮 - 导航栏、广告位、埋点脚本这类非首屏内容，考虑用
loading="lazy"+fetchpriority="low"降权 - 或拆成
<template>+ JS动态插入，初始DOM更干净 - 绝对不要在
<head>里用<script>动态生成首屏DOM——这等于把原生流式解析退化成JS重建
<meta charset="utf-8">必须出现在前1024字节内
这不是建议，是规范强制要求。如果它不在前1024字节内，浏览器可能先按latin1解析一部分再重载，导致页面闪动或乱码——尤其在HTTP/1.1未压缩时极易复现。
立即学习“前端免费学习笔记（深入）”；
- 把它放在
<head>最开头，紧贴<html>标签之后 - 避免在它前面放大段注释、空格或BOM头
- 服务端渲染时注意模板引擎是否在charset前注入了调试信息或埋点脚本
真正卡住性能的往往不是JS执行慢，而是HTML结构本身让浏览器“不知道从哪下手”。嵌套深度、脚本位置、首屏顺序、编码声明——这些看似静态的写法，每个都在决定渲染流水线的起点和节奏。
