zoukankan      html  css  js  c++  java
  • 无阻塞加载脚本的方案

    1.动态加载脚本

      <script type="text/javascript">

         function loadScript(url){

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

         script.type="text/javascript";

         script.src=url;

         document.body.appendChild(script);

         }

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

     

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

    /*var xhrObj = new XMLHttpRequest();

    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.XMLHttpRequest){

      xhr=new XMLHttpRequest();

    }

    else{

     xhr=new ActiveXObject("Microsoft.XMLHttp")

    }

    return xhr;

     }

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

    xhrObj.send("");

    4.Script Defer

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

    代码如下:

    1

    <script defer src="A.js"></script>

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

  • 相关阅读:
    B站14天数据分析笔记6次课笔记
    B站14天数据分析笔记5次课作业
    B站14天数据分析笔记5次课Pandas
    1037 在霍格沃茨找零钱 (20 point(s))
    第一章:第三节探索性数据分析
    Java没有运行选项
    Eclipse截图的时候错误提示消失/复制粘贴错误信息
    错误记录_css属性的值一定不需要引号么?
    错误记录_语法哪里错了?
    微软输入法使用
  • 原文地址:https://www.cnblogs.com/12606huchao/p/5201851.html
Copyright © 2011-2022 走看看