时间戳

首页 > 解决方案 > JavaScript 不会阻止 DOM 构建

javascript - JavaScript 不会阻止 DOM 构建

问题描述

我有这个html：

<head>
</head>
<body>
    <h1>TEST</h1>

    <script src="index.js" type="text/javascript"></script>

</body>
</html>

我专门制作index.js了一个大文件，比如1MB。并在谷歌浏览器的慢速网络上进行测试。

现在，当我运行网站时，TEST 立即出现在屏幕上。页面仍在加载（因为 js 文件很大），但 TEST 立即出现。

我在某处读到：The entire DOM CONSTRUCTION process is halted until the script finishes executing.如果是这样，为什么屏幕上会出现“测试”？DOM 构建没有完成，因为浏览器遇到了脚本，遇到后怎么知道 DOM 准备好了<h1>TEST</h1>。

在我看来：加载 index.js 后应该会出现 TEST 。

标签： javascript

解决方案

只有在下载/解析脚本时才会停止未来的 DOM 构建。已解析的 DOM 元素（例如 your <h1>）位于 script 标签之前，仍保留在 DOM 中 - 脚本的下载不会导致它们在脚本完成之前被删除。

如果你把它换了：

<head>
</head>
<body>
    <script src="index.js" type="text/javascript"></script>
    <h1>TEST</h1>
</body>
</html>

TEST正如您所期望的那样，它需要一些时间才能显示出来，因为在这里，<script>出现在 之前，TEST因此需要在 TEST 出现之前解析脚本。

推荐阅读