免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

JavaScript腳本加載的方式有哪些-創(chuàng)新互聯(lián)

這篇文章主要為大家展示了“JavaScript腳本加載的方式有哪些”,內(nèi)容簡而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“JavaScript腳本加載的方式有哪些”這篇文章吧。

成都創(chuàng)新互聯(lián)公司從2013年成立,是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司,擁有項目成都網(wǎng)站設(shè)計、做網(wǎng)站網(wǎng)站策劃,項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命,1280元紅安做網(wǎng)站,已為上家服務(wù),為紅安各地企業(yè)和個人服務(wù),聯(lián)系電話:028-86922220

方式一:慣例的做法

最傳統(tǒng)的方式是在head標簽內(nèi)插入<script>標簽。

然而這種常規(guī)的做法卻隱藏著嚴重的性能問題。根據(jù)上述對<script>標簽特性的描述,我們知道,在該示例中,當(dāng)瀏覽器解析到<script>標簽時,瀏覽器會停止解析其后的內(nèi)容,而優(yōu)先下載腳本文件,并執(zhí)行其中的代碼,這意味著,其后的test.css樣式文件和<body>標簽都無法被加載,由于<body>標簽無法被加載,那么頁面自然就無法渲染了。因此在該javaScript代碼完全執(zhí)行完之前,頁面都是一片空白。

<script type="text/javaScript" src="example.js"></script>

方式二:經(jīng)典的做法

既然<script>標簽會阻塞其后內(nèi)容的加載,那么將<script>標簽放到所有頁面內(nèi)容之后不就可以避免這種糟糕的狀況了嗎? 將所有的<script>標簽盡可能地放到<body>標簽底部,以盡量避免對頁面其余部分下載的影響。

在IE8+瀏覽器上已經(jīng)實現(xiàn)了腳本并行下載,但在某些瀏覽器中(即使腳本文件放到了<body>標簽底部),頁面中腳本仍是一個接著一個加載的。所以我們需要下一個方法,即:動態(tài)加載腳本。

方式三:動態(tài)腳本

通過文檔對象模型(DOM),我們可以幾乎可以頁面任意地方創(chuàng)建。

<script type='text/javascript'>
  var script = document.createElement('script');
  script.type = 'text/javaScript';
  script.src = 'file1.js';
  document.getElementsByTagName('head')[0].appendChild(script);
</script>

上述代碼動態(tài)創(chuàng)建了一個外鏈file1的<script>標簽,并將其添加到<head>標簽內(nèi)。這種技術(shù)的重點在于:

無論在何時啟動下載,文件的下載和執(zhí)行過程不會阻塞頁面其他進程(包括腳本加載)。
然而這種方法也是有缺陷的。這種方法加載的腳本會在下載完成后立即執(zhí)行,那么意味著多個腳本之間的運行順序是無法保證的(除了Firefox和Opera)。當(dāng)某個腳本對另一個腳本有依賴關(guān)系時,就很可能發(fā)生錯誤了。比如,寫一個jQuery代碼,需要引入jQuery庫,然而你寫的jQuery代碼文件很可能會先完成下載并立即執(zhí)行,這時瀏覽器會報錯——‘jQuery未定義'之類的,因為此時jQuery庫還未下載完成。于是做出以下改進:

<script type='text/javascript'>
  function loadScript(url, callback) {
    var script = document.createElement('script');
    script.type = "text/javaScript";
    // IE和opera支持onreadystatechange
    // safari、chrome、opera支持onload
    if (script.readyState) {//IE
      script.onreadystatechange = function() {
        if (script.readyState == "loaded"
            || script.readyState == "complete") {
          script.onreadystatechange = null;
          callback();
        }
      };
    } else {//其他瀏覽器
      script.onload = function() {
        callback();
      };
    }
    script.src = url;
    document.getElementsByTagName('head')[0].appendChild(script);
  }
</script>

上述代碼改進的地方就是增加了一個回調(diào)函數(shù),該函數(shù)會在相應(yīng)腳本文件加載完成后被調(diào)用。這樣便可以實現(xiàn)順序加載了,寫法如下(假設(shè)file2依賴file1,file1和file3相互獨立):

loadScript(‘file1.js',function(){ loadScript(‘file2.js',function(){}); }); loadScript(‘file3.js',function(){});

file2會在file1加載完后才開始加載,保證了在file2執(zhí)行前file1已經(jīng)準備妥當(dāng)。而file1和file3是并行下載的,互不影響。 雖然loadScript函數(shù)已經(jīng)足夠好,但還是有些不盡人意的地方——通過分析這段代碼,我們知道,loadScript函數(shù)中的順序加載是以腳本的阻塞加載來實現(xiàn)的(正如上述紅字部分指出的那樣)。而我們真正想實現(xiàn)的是——腳本同步下載并按相應(yīng)順序執(zhí)行,即并行加載并順序執(zhí)行。

方式四:LABjs

LABjs庫能幫我們真正地實現(xiàn)“并行加載與順序執(zhí)行”,推薦寫法如下:

<script src="LAB.js"></script>
<script type="text/javaScript">
    $LAB
     .script("script1.js").wait()
     .script("script2-a.js")
     .script("script2-b.js")
     .wait(function(){
       initScript1();
       initScript2();
     })
     .script("script3.js")
     .wait(function(){
       initScript3();
     });
</script>

方式五:requireJS

<script src="require.js"></script>
<script type="text/javaScript">
    require([
      "script1.js",
      "script2-a.js",
      "script2-b.js",
      "script3.js"
     ],
     function(){
      initScript1();
      initScript2();
      initScript3();
     }
    );
</script>

以上是“JavaScript腳本加載的方式有哪些”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道!

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站m.newbst.com,海內(nèi)外云服務(wù)器15元起步,三天無理由+7*72小時售后在線,公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢,專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)站名稱:JavaScript腳本加載的方式有哪些-創(chuàng)新互聯(lián)
本文地址:http://m.newbst.com/article32/hcpsc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供ChatGPT用戶體驗營銷型網(wǎng)站建設(shè)企業(yè)網(wǎng)站制作Google定制網(wǎng)站

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)

成都定制網(wǎng)站網(wǎng)頁設(shè)計