JavaScript腳本加載的方式有哪些

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

站在用戶的角度思考問題，與客戶深入溝通，找到淇濱網(wǎng)站設(shè)計(jì)與淇濱網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名注冊(cè)、網(wǎng)站空間、企業(yè)郵箱。業(yè)務(wù)覆蓋淇濱地區(qū)。

方式一：慣例的做法

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

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

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

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

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

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

方式三：動(dòng)態(tài)腳本

通過文檔對(duì)象模型（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>

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

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

<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>

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

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

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

方式四：LABjs

LABjs庫(kù)能幫我們真正地實(shí)現(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)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享標(biāo)題：JavaScript腳本加載的方式有哪些
分享路徑：http://muchs.cn/article30/jpjdso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開發(fā)、軟件開發(fā)、面包屑導(dǎo)航、網(wǎng)站內(nèi)鏈、網(wǎng)站收錄、App設(shè)計(jì)

廣告

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

商城網(wǎng)站建設(shè)