星空网 > 软件开发 > Java

无阻塞加载脚本的方案

1.动态加载脚本

  <script type="text/javascript">

     function loadScript(url){

     var script=document.createElement("script");

     script.type="text/javascript";

     script.src='/images/loading.gif' data-original=url;

     document.body.appendChild(script);

     }

     loadScript("js/side-panel.js");

 

2.XHR Injection 使用动态创建script元素,来写入脚本,在某些情况下可能比上一种方法要快些。

/*var xhrObj = new 

xhrObj.onreadystatechange = function(){

    if(xhrObj.readyState == 4&&xhrObj.status==200){

        var scriptElem = document.createElement("script");

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

        scriptElem.text = xhrObj.responseText;

    }

};

 

xhrObj.open("GET", "js/pop.js", true);

xhrObj.send("");

3.XHR Eval

顾名思义,通过XHR读取脚本,通过Eval令脚本生效。

var xhrObj = getxhr();

xhrObj.onreadystatechange = function(){

    if(xhrObj.readyState == 4 && xhrObj.status==200){

        eval(xhrObj.responseText);

    }

};

 function getxhr(){

    var xhr=null;

if(window.

  xhr=new 

}

else{

 xhr=new ActiveXObject("Microsoft.

}

return xhr;

 }

xhrObj.open("GET", "js/pop.js", true);

xhrObj.send("");

4.Script Defer

原生方案。利用defer属性来防止脚本阻塞。

代码如下:

1

<script defer src='/images/loading.gif' data-original="A.js"></script>

defer是最简单的方法,现在主流的浏览器已经支持




原标题:无阻塞加载脚本的方案

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

钢蜂科技:https://www.goluckyvip.com/tag/31608.html
批发价格大跌:https://www.goluckyvip.com/tag/3161.html
港澳快递专线:https://www.goluckyvip.com/tag/31610.html
港澳台专线物流:https://www.goluckyvip.com/tag/31611.html
港澳物流专线:https://www.goluckyvip.com/tag/31612.html
港宝供应链:https://www.goluckyvip.com/tag/31613.html
TikTok 将推出先买后付服务 :https://www.goluckyvip.com/news/188219.html
深圳有没有比较好玩的景点 深圳有没有比较好玩的景点推荐一下:https://www.vstour.cn/a/366175.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流