Fatal编程技术网
  • javascript/
  • 我没有'；我不知道当'；延迟加载'；JavaScript

我没有'；我不知道当'；延迟加载'；JavaScript

javascript

我没有'；我不知道当'；延迟加载'；JavaScript,javascript,lazy-loading,Javascript,Lazy Loading,我创建了下面的示例，页面在HTML页面底部动态加载temp.js。js有一个小的休眠功能，在记录“脚本加载”之前，它会将浏览器绑定3秒钟。在HTML页面的最底部，它记录了一个“页面加载” 现在，了解了我对浏览器、下载资源和JS的单线程特性的了解，我认为这会发生 显示HTML console.log“页面已加载” 在temp.js执行此操作时，大约需要等待三秒钟 console.log告诉我“脚本已加载” 但实际上发生的是这样的 console.log“页面已加载”（几乎立即加载） 空白页大约三秒

我创建了下面的示例，页面在HTML页面底部动态加载temp.js。js有一个小的休眠功能，在记录“脚本加载”之前，它会将浏览器绑定3秒钟。在HTML页面的最底部，它记录了一个“页面加载”

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

  • 显示HTML
  • console.log“页面已加载”
  • 在temp.js执行此操作时，大约需要等待三秒钟
  • console.log告诉我“脚本已加载”
    • 但实际上发生的是这样的

  • console.log“页面已加载”（几乎立即加载）
  • 空白页大约三秒钟
  • 显示HTML并显示console.log，告诉我“脚本已加载”
    • 这是你所期望的行为吗

    
查询选择器

      

    • 

    • 

    
（功能（）{
var e=document.createElement（'script'）；
e、 src='temp.js'；
e、 异步=真；
document.getElementsByTagName（“head”）[0].appendChild（e）；
})();
console.log（“页面加载”）；
    我不知道跨浏览器的
    异步
    的支持或行为是什么，但我怀疑主要问题在于
    睡眠
    功能

    通常，sleep函数会完全按照它所说的去做-暂停当前正在执行的线程，并在
    x
    秒内再次唤醒它。您的sleep函数除了执行while循环条件
    （now+ms）>（（new Date（））.getTime（））
    ，执行次数与浏览器所能执行的次数相同。这肯定会锁定任何其他Javascript执行，根据浏览器的不同，可能也会影响页面呈现

    您想用Javascript模拟睡眠：

    setTimeout(function() {
console.log ('Script Loaded');
}, 3000);
    我不知道跨浏览器的
    async
    的支持或行为是什么，但我怀疑主要问题在于
    sleep
    函数

    通常，sleep函数会完全按照它所说的去做-暂停当前正在执行的线程，并在
    x
    秒内再次唤醒它。您的sleep函数除了执行while循环条件
    （now+ms）>（（new Date（））.getTime（））
    ，执行次数与浏览器所能执行的次数相同。这肯定会锁定任何其他Javascript执行，根据浏览器的不同，可能也会影响页面呈现

    您想用Javascript模拟睡眠：

    setTimeout(function() {
console.log ('Script Loaded');
}, 3000);
    发生了什么

    • 一些HTML被解析
    • 块1被解析，它向
    • 块2被解析并加载日志页面
    • 解析头部中的块，并运行阻塞睡眠功能
    • 3秒过去
    • 已记录加载的脚本
    • 块已完成解析，并呈现
    • 此时将显示第页
    改变

    document.getElementsByTagName（“head”）[0].appendChild（e）
    
到
    

    document.getElementsByTagName（“body”）[0].appendChild（e）
    
HTML页面将首先加载
    
问题是在呈现HTML正文之前，必须加载并运行
    中的所有脚本
    

      

    • 一些HTML被解析
      • 

    • 块1被解析，它向
      • 

    • 块2被解析并加载日志页面
      • 

    • 解析头部中的块，并运行阻塞睡眠功能
      • 

    • 3秒过去
      • 

    • 已记录加载的脚本
      • 

    • 块已完成解析，并呈现
      • 

    • 此时将显示第页
      • 

    
改变
    

    document.getElementsByTagName（“head”）[0].appendChild（e）
    
到
    

    document.getElementsByTagName（“body”）[0].appendChild（e）
    
HTML页面将首先加载
    

    问题是在呈现HTML正文之前必须加载并运行
    中的所有脚本
    在不同的浏览器中尝试，我相信行为会有所不同。当然，最好的方法是在脚本标记中添加“延迟”或“异步”。当您在
    窗口中有该代码时会发生什么？onload
    事件？我不知道从浏览器到浏览器会发生什么，所以我使用YUI 2事件实用程序的事件。您的问题中有问题吗？听起来你是在征求意见。你使用睡眠功能而不是
    setTimeout（）
    有什么原因吗？在不同的浏览器中尝试一下，我相信行为会有所不同。当然，最好的方法是在脚本标记中添加“延迟”或“异步”。当您在
    窗口中有该代码时会发生什么？onload
    事件？我不知道从浏览器到浏览器会发生什么，所以我使用YUI 2事件实用程序的事件。您的问题中有问题吗？听起来你在征求意见。你使用睡眠功能而不是
    setTimeout（）
    ，这有什么原因吗？谢谢Raynos。这是一个很好的回答。谢谢雷诺斯。这是一个很好的回答。谢谢roryf。这个函数应该这样做，因为我想看看如果浏览器被锁定在动态加载的JS进程中会发生什么。我不太清楚，但我想知道为什么在发生这种情况时页面仍然没有加载，但上面的Raynos给了我答案，将脚本附加到身体而不是头部。谢谢roryf。这个函数应该这样做，因为我想看看如果浏览器被锁定在动态加载的JS进程中会发生什么。我不是很清楚，但我想知道为什么p

    setTimeout(function() {
console.log ('Script Loaded');
}, 3000);