为什么页面加载会卡在DOM解析上
你有没有遇到过这种情况：点开一个网页，页面白屏好几秒才慢慢显示内容？尤其在手机上特别明显。其实很多时候，问题就出在DOM被阻塞了。
浏览器从服务器拿到HTML后，会开始逐行解析。一旦遇到<script>标签，尤其是没有特殊处理的JS文件，它就会停下来，先去下载、执行这个脚本，等搞完了才继续往下解析。这期间，页面就是空白的——用户啥也看不到。
把JS移出关键路径
最直接的办法，是把那些非必要的JavaScript挪到页面底部，也就是</body>之前。这样浏览器能先快速构建DOM树，把内容展示出来。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的页面</title>
<!-- 样式放头部 -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>欢迎访问</h1>
<p>这是主要内容。</p>
<!-- JS放底部 -->
<script src="analytics.js"></script>
<script src="widgets.js"></script>
</body>
</html>用async和defer控制脚本行为
对于必须放在<head>里的脚本，比如一些核心逻辑或第三方SDK，可以用async或defer属性来避免阻塞。
async适合独立运行的脚本，比如广告、统计代码。它会异步下载，下载完立刻执行，不保证顺序。
<script async src="ads.js"></script>
<script async src="tracker.js"></script>defer更适合有依赖关系的脚本。它也是异步下载，但会等到整个文档解析完成后再按顺序执行。
<script defer src="helper.js"></script>
<script defer src="main.js"></script>提前告诉浏览器要加载什么
现代浏览器支持rel="preload"，可以提前声明关键资源，让浏览器尽早开始下载。
比如你知道某个JS对首屏很重要，可以直接预加载：
<link rel="preload" href="critical.js" as="script">注意别滥用，否则可能占用带宽，反而拖慢关键资源。
内联关键JavaScript
极少数情况下，有些脚本实在太关键，连网络请求都不能等。比如首屏的暗黑模式切换逻辑，可以考虑内联到HTML中。
<script>
(function() {
const theme = localStorage.getItem('theme') || 'light';
document.documentElement.className = theme;
})();
</script>这种方式省去了请求开销，但只适合非常小的代码片段。大的脚本内联会拉长HTML体积，得不偿失。
实际场景中的取舍
举个例子，你在做一个新闻站。首屏是标题和摘要，用户打开就要看到。这时候可以把轮播图、评论区这些功能的JS都延迟加载，优先让文字内容出来。
换个角度想，用户不是在“使用网页”，而是在“等待网页”。减少等待时间，本质上就是在提升体验。哪怕只是快半秒，感知也很明显。