我不知道当我使用'lazy loading'JavaScript

I didn't know that would happen when 'lazy loading' JavaScript

本文关键字：lazy loading JavaScript 我不知道      更新时间：2023-09-26

我创建了下面的示例，其中页面在HTML页面的底部动态加载temp.js。temp.js有一个小睡眠功能，在登录"脚本加载"之前绑定浏览器3秒。在HTML页面的最底部，它记录了一个' page Loaded'

现在，知道我对浏览器的了解，下载资源和JS的单线程性质，我认为这会发生。

    显示
  1. HTML
  2. console.log 'Page Loaded'
  3. 大约三秒等待，而temp.js做的东西
  4. console.log告诉我'Script Loaded'

但实际上发生的是

  1. console.log 'Page Loaded'(几乎立即)
  2. 空白页约3秒
  3. 显示HTML, console.log告诉我'Script Loaded'

这是你所期望的行为吗?

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>块1被解析，它添加了一个新的脚本标签到<head>
  • <script> block 2被解析并加载日志页面
  • <script> blockin head被解析并运行阻塞睡眠函数
  • 3秒过去
  • 脚本加载被记录
    • <head>块已经完成解析，它呈现<body>
  • 显示页面。

改变

document.getElementsByTagName("head")[0].appendChild(e);

document.getElementsByTagName("body")[0].appendChild(e);

首先加载HTML页面。

问题是 <head>中的所有脚本必须在呈现HTML主体之前加载并运行

我不知道async的支持或行为是跨浏览器的，但我怀疑主要问题是你的sleep功能。

通常一个睡眠函数会做它所说的——暂停当前正在执行的线程，并在x秒内再次唤醒它。您的sleep函数正在做任何事情-它执行while循环条件(now + ms) > ((new Date()).getTime ())的次数是浏览器所能执行的次数。这肯定会锁定任何其他Javascript执行，并且根据浏览器的不同，可能也会影响页面呈现。

你想在Javascript中使用setTimeout来模拟睡眠:

setTimeout(function() {
console.log ('Script Loaded');
}, 3000);
相关文章：