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。
  • 相关阅读:
    使用清华源进行pip install
    BERT和ULMFIT embedding比较文本分类结果
    Ubuntu16.04更新python3.5到python3.7
    base64方式显示控件
    在使用redis做缓存后,mybatis的延迟加载失效
    springboot:redis反序列化发生类型转换错误
    eclipse :代码自动补全不生效解决办法
    微信扫码支付:问题集锦
    微信扫码支付(4):统一下单
    微信扫码支付(3):获取验签秘钥
  • 原文地址:https://www.cnblogs.com/Gbeniot/p/3860601.html
Copyright © 2011-2022 走看看