zoukankan      html  css  js  c++  java
  • 关于JS异步加载方案

    javascript延迟加载的解决方案:

    1.使用defer标签

    Js代码  收藏代码
    1. <span style="font-size: small;"><script type="text/javascript" src="load.js" defer></script></span>  

     2.使用XMLHttpRequest对象加载

    Js代码  收藏代码
    1. <span style="font-size: small;">var xhr = new XMLHttpRequest();  
    2. xhr.open("get","load.js",true);  
    3. xhr.onreadystatechange=function(){  
    4.     if(readyState==4){  
    5.         if(status>=200&&status<300||status==304){  
    6.            var script = document.createElement("script");  
    7.             script.type = "text/javascript";  
    8.             script.src = xhr.responseText;  
    9.             document.body.appendChild(script);  
    10.         }  
    11.     }  
    12. }  
    13. xhr.send(null);</span>  

    3.使用推荐的无阻塞模式:

    Js代码  收藏代码
    1. function loadScript(url , callback){     
    2.     
    3.      var script = document.createElement("script");     
    4.     
    5.      script.type="text/javascript";     
    6.     
    7.      if(script.readyState){     
    8.    
    9.          script.onreadystatechange = function(){     
    10.    
    11.              if(script.readyState=="loaded"||script.readyState=="complete"){     
    12.     
    13.                   script.onreadystatechange=null;     
    14.     
    15.                   callback();     
    16.     
    17.             }     
    18.     
    19.          }     
    20.     
    21.      }else{     
    22.     
    23.         script.onload = function(){     
    24.     
    25.             callback();     
    26.     
    27.         }     
    28.     
    29.      }     
    30.     
    31.      script.src = url;     
    32.     
    33.      document.getElementsByName("head")[0].appendChild(script);     
    34.     
    35. }    

     4.HTML5中可以使用async方式设置异步加载js

    Js代码  收藏代码
    1. <script type="text/javascript" src="load.js" async="true"></script>  

    关于JS异步加载的测试

    对IE8和Firefox3.6测试结果:
    1.常规的在head里面使用Script标签引用js,不再是堵塞模式加载(也就是说脚本文件不再是一个一个被加载,加载完成一个才开始加载另一个),而是最

    大6个JS同时开始加载(并发限制为6个),但是script的执行顺序还是按照Script标签顺序,而且会阻碍页面的呈现。
    2.由于1的原因,所以使用document.write("<script>...</script>")(此方式对Firefox无效)的方式和head.append(script)(此方式兼容IE和Firefox)的方式

    使用异步加载意义不大
    3.但是使用head.append(script)的方式,不会阻碍界面的呈现,但是要注意:
    (1)如果对于window.onload事件的触发有所影响:在 IE中,window.onload事件会在页面其它元素被加载完毕之后立即触发(即不必等所有脚本加载完,而

    是html页面加载完),而FireFox里的window.onload事件会等待动态添加的那些脚本文件也被加载完毕后才触发。
    (2)虽然我们动态加载的script元素是有严格顺序的,但是浏览器可不一定这样认为。在FireFox中,脚本文件会按照它动态加载的script元素的顺序执

    行,而IE会根据脚本文件下载完毕的顺序执行。

    注意:
    1.在IE6和IE7中,常规的在head里面使用Script标签引用js,是堵塞模式加载,也就是说必须加载完一个JS,才能去加载下一个JS
    2.在IE6和IE7中,并发限制是2个。也就是即使使用head.append(script)的方式异步加载3个JS,也会等前两个JS加载完成以后才会加载第三个JS。
  • 相关阅读:
    XAML学习笔记之Layout(五)——ViewBox
    XAML学习笔记——Layout(三)
    XAML学习笔记——Layout(二)
    XAML学习笔记——Layout(一)
    从0开始搭建SQL Server 2012 AlwaysOn 第三篇(安装数据,配置AlwaysOn)
    从0开始搭建SQL Server 2012 AlwaysOn 第二篇(配置故障转移集群)
    从0开始搭建SQL Server 2012 AlwaysOn 第一篇(AD域与DNS)
    Sql Server 2012 事务复制遇到的问题及解决方式
    Sql Server 2008R2升级 Sql Server 2012 问题
    第一次ACM
  • 原文地址:https://www.cnblogs.com/Gbeniot/p/3860601.html
Copyright © 2011-2022 走看看