我创建了下面的示例，其中页面在 HTML 页面底部动态加载 temp.js。 temp.js 有一个小 sleep 功能，它会在记录“脚本已加载”之前绑定(bind)浏览器 3 秒。在 HTML 页面的最底部，它会记录“页面已加载”
现在，了解了我对浏览器、下载资源和 JS 的单线程性质的了解，我认为这会发生。
- 显示 HTML
- console.log“页面已加载”
- 大约等待三秒钟，temp.js 就会开始工作
- console.log 告诉我“脚本已加载”
但实际上发生的是这样的
- console.log“页面已加载”(几乎立即)
- 空白页约三秒钟
- 显示 HTML 并且 console.log 告诉我“脚本已加载”
这是您所期望的行为吗？
<小时/>function sleep (ms) {
var now = (new Date()).getTime ();
while ((now + ms) > ((new Date()).getTime ())) {
}
}
sleep (3000);
console.log ('Script Loaded');
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>querySelectorAll</title>
</head>
<body>
<ul>
<li><a href="">One</a></li>
<li><a href="">Two</a></li>
</ul>
<div id="nick">
<img src="image.png" alt="" width="10" height="10" />
<img src="image.png" alt="" width="10" height="10" />
<img src="image.png" alt="" width="10" height="10" />
</div>
<!-- <script type="text/javascript" src="temp.js"></script> -->
<script type="text/javascript">
(function() {
var e = document.createElement('script');
e.src = 'temp.js';
e.async = true;
document.getElementsByTagName("head")[0].appendChild(e);
})();
</script>
<script type="text/javascript">
console.log('Page Loaded');
</script>
</body>
</html>
最佳答案
发生了什么
- 解析了一些 HTML
-
<script>block 1 被解析，并将新的脚本标记添加到<head> -
<script>block 2 被解析并记录页面被加载 -
<script>head 中的 block 被解析并运行您的阻塞 sleep 函数 - 3秒过去了
- 记录加载的脚本
-
<head>block 已完成解析并呈现<body> - 页面已显示。
改变
document.getElementsByTagName("head")[0].appendChild(e);
至
document.getElementsByTagName("body")[0].appendChild(e);
HTML 页面将首先加载。
问题是 <head> 中的所有脚本必须在 HTML 正文渲染之前加载并运行
关于javascript - 我不知道当 'lazy loading' JavaScript 时会发生这种情况，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6747564/