同步脚本放里导致首屏完全空白，是因为它让JS执行时机提前至DOM构建最初始阶段，HTML解析器遇同步即暂停，DOM树几乎为空，JS执行完前页面彻底无内容。
同步脚本放里为什么首屏完全空白
不是它“阻塞”了渲染，而是它让 JS 执行时机卡在 DOM 构建最开头——HTMLParser一遇到没加async或defer的<script></script>，立刻停住，把主线程交给 JS 引擎。此时哪怕里只写了<h1>Hello</h1>，这个节点都进不了 DOM 树，更不会触发样式计算和绘制。
常见错误现象：DOMContentLoaded延迟 800ms 以上，但 JS 本身只执行 50ms；工具栏显示“正在加载”，页面却始终白底无内容。
- 同步脚本在
：DOM 树几乎为空，JS 执行完前，用户什么都看不到 - 同步脚本在
底部：DOM 已基本就绪，但 JS 仍会阻塞后续 paint 任务，文字可能有、样式没、按钮点不动 -
defer脚本：下载不打断解析，执行推迟到 DOM 解析完毕、DOMContentLoaded触发前——这是唯一能保序且不卡首屏的结构级方案
<template></template>为什么能绕过主线程争抢
<template></template>的内容根本不会参与 HTML 解析流程，也不触发 JS 执行、资源加载或样式计算。它只是内存里一个惰性的DocumentFragment，完全不占主线程时间片。
对比两种插入方式：
立即学习“前端免费学习笔记（深入）”；
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
-
innerHTML = htmlStr：每次都要重新解析字符串 → 构建节点 → 触发重排预备，JS 执行期间这事根本干不了 -
document.importNode(template.content, true)：纯内存复制，不触发布局/样式计算，JS 执行完立刻可插入
注意：template.content是DocumentFragment，不能直接querySelector，得先挂载或用querySelectorAll遍历；里面写的<script></script>和<style></style>会被忽略，事件监听必须手动绑定。
嵌套过深的<div>怎么放大线程竞争延迟
<p>浏览器主线程顺序处理：DOM 构建 → 样式计算 → 布局 → 绘制。每多一层嵌套，样式继承链就拉长一节，布局计算复杂度非线性上升。JS 正在跑时，这些任务全被挂起；JS 一停，浏览器得一口气补完积压的所有样式和布局工作——用户感知就是“点了按钮，界面卡顿半秒才响应”。</p>
<p>6 层以上嵌套（比如<code><div><section><div><div><div>）会让样式计算耗时翻倍，尤其当 CSS 里有<code>*{}或大量inherit时，问题更明显。
- 真实项目里最容易被跳过的检查点：用 DevTools 的 Layers 面板看 layout tree 深度，超过 8 层就得警惕
- 替换方案：用语义化标签如
<article></article>、<aside></aside>替代无意义<div>，既降深度又提可访问性
<li>不要为了“结构清晰”而套壳——清晰是指逻辑分层，不是 DOM 节点数量多</li>
<h3>用<code>table做布局为什么实际中总翻车
<article></article>、<aside></aside>替代无意义<div>，既降深度又提可访问性
<li>不要为了“结构清晰”而套壳——清晰是指逻辑分层，不是 DOM 节点数量多</li>
<h3>用<code>table做布局为什么实际中总翻车table标签只该用于二维结构化数据展示，不是页面骨架工具。用它套导航、侧边栏或整页容器，响应式、SEO、可访问性全会出问题。
典型翻车点：
- 移动端
width: 100%在多层<table>嵌套中常被忽略，内容直接横向溢出切掉 <li>搜索引擎把<code><tr>当数据行理解，根本识别不出“顶部导航”“右侧操作区”这类语义 <li>屏幕阅读器按表头-数据关系播报，把菜单读成“第1列:首页,第2列:关于”，用户完全听不懂</li> <li>改一个列宽要查三层<code>colspan="2"，稍不注意就错位，维护成本飙升
判断标准很简单：内容能否复制进 Excel 并直接排序、筛选、求和？能，就该用<table>；不能，立刻换<code>display: flex或display: grid。最关键的是，所有响应式表格方案，都依赖<meta name="viewport" content="width=device-width, initial-scale=1">——没这句，再细的 CSS 也白搭。
