由js文件中引入另外的js文件想到的

1. html中，使用<script src="../static/js/xxx.js"></script>引入js文件。

 

2. 在js文件中，引入js文件的方式：

方式一： (body標籤存在的狀況下)

var new_element = document.createElement("script");
new_element.setAttribute("type", "text/javascript");
new_element.setAttribute("src", "xxx.js");
document.body.appendChild(new_element);

 

方式二：

在調用文件的頂部加入下述代碼

document.write("<script language=javascript src='xxx.js'></script>");

 

script標籤上面這個async屬性（詳情見：http://blog.csdn.net/c14210220635c/article/details/72934211）

這個屬性是HTML5給script新添加的屬性，並且只適用於外部的JavaScript文件，若是在script標籤上添加了這個屬性，那麼代表這個腳本資源就再也不是同步加載的了，而是異步加載的，因此不會阻塞瀏覽器對頁面的渲染。固然這個屬性會存在一些兼容性問題，一些瀏覽器還未實現對這個屬性的支持。

 

3.其餘

1. JavaScript做爲瀏覽器腳本語言，主要用途是與用戶互動，以及操做DOM，最大特色是單線程。

2. 瀏覽器是按照從上到下的順序來解析顯示頁面的，在執行過程當中，若是有JS或者CSS文件的調用，瀏覽器就會現根據路徑把這些文件下載下來，並把這些代碼「看」一遍，看完以後有可能執行一部分，也有可能接着往下解析HTML。

因此說在HTML裏面順序很重要，若是瀏覽器遇到大量的JS要「看」，或者執行，那麼頁面下面的東西就不會執行，由於目前大部分的瀏覽器都是單線程的執行方式。

必須讓瀏覽器頁面徹底加載完畢後，再去執行JS，因此咱們通常把JS文件放在最後。

等全部的DOM準備穩當，頁面就渲染CSS效果，添加事件。

3. 爲了利用CPU的計算能力，HTML5提出Web Worker標準。容許JavaScript腳本建立多個線程，可是子線程徹底受主線程控制，且不得操做DOM。

 

任務隊列：

全部的任務分爲兩種，一種是同步任務，一種是異步任務。

同步任務：在主線程上排隊執行的任務，只有前一個任務執行完畢，才能執行後一個任務。

異步任務：不進入主線程，而進入「任務隊列」（task queue）的任務，只有「任務隊列」通知主線程，某個異步任務能夠執行了，該任務纔會進入主線程執行。

 

異步執行的運行機制（同步執行可視爲沒有異步任務的異步執行）：

1.全部同步任務都在主線程上執行，造成一個執行棧（execution context stack）；

2.主任務以外，還存在一個「任務隊列」（task queue），只要異步任務有了運行結果，就在「任務隊列」之中放置一個事件；

3.一旦「執行棧」中的全部同步任務執行完畢，系統就會讀取「任務隊列」，查看裏面的事件。對應的異步任務，因而結束等待狀態，進入執行棧，開始執行。

4.主線程不斷重複上面的第三步。

 

JavaScript運行機制：主要主線程空了，就會去讀取「任務隊列」，這個過程會不斷重複。

 

事件和回調函數：

「任務隊列」是一個事件的隊列（或者消息的隊列），io設備完成一項任務，就在「任務隊列」中添加一個事件，表示相關的異步任務能夠進入「執行棧」了。主線程讀取「任務隊列」就是讀取裏面有哪些事件。

 

「任務隊列」中的事件，除了io設備的事件之外，還包括一些用戶產生的事件（好比鼠標點擊、頁面滾動等）。只要指定過回調函數，這些事件發生時就會進入「任務隊列」，等待主線程讀取。

 

所謂「回調函數」（callback），就是那些會被主線程掛起的代碼。異步任務必須指定回調函數，但主線程開始執行異步任務，就是執行對應的回調函數。

 

「任務隊列」是一個先進先出的數據結構，排在前面的事件，優先被主線程讀取。

因爲存在「定時器」功能，主線程首先要檢查一下執行時間，某些事件只有到了規定的事件，才能返回主線程。

 

Event Loop：

主線程從「任務隊列」中讀取事件，這個過程是循環不斷的，因此整個的這種運行機制又稱爲Event Loop（事件循環）。

 

定時器：

即指定某些代碼在多少時間以後執行。

定時器功能主要由setTimeout()和setInterval()這兩個函數完成，它們內部運行機制徹底同樣，區別在於前者指定的代碼是一次性執行的，後者是反覆執行。

console.log(1);
setTimeout(function(){console.log(2);},1000);
console.log(3);

上面代碼的執行結果是1，3，2，由於setTimeout()將第二行推遲到1000毫秒以後執行。

若是將setTimeout()的第二個參數設爲0，就表示當前代碼執行完（執行棧清空）之後，當即執行（0毫秒間隔）指定的回調函數。

setTimeout(function(){console.log(1);}, 0);
console.log(2)；

上面代碼的執行結果老是2，1，由於只有在執行完第二行之後，系統纔會去執行"任務隊列"中的回調函數。

總之，setTimeout(fn,0)的含義是，指定某個任務在主線程最先可得的空閒時間執行，也就是說，儘量早的執行。它在「任務隊列」的尾部添加一個事件，所以要等到同步任務和「任務隊列」現有的事件都處理完，纔會獲得執行。

 

HTML5標準規定了setTimeout()的第二個參數的最小值（最短間隔）不得低於4毫秒，若是低於這個值就會自動增長。

在此以前，老版本的瀏覽器都將最短間隔設爲10毫秒。另外，對於DOM的變更（尤爲是涉及頁面從新渲染的部分），一般不會當即執行，而是每16毫秒執行一次。這是使用requestAnimationFrame()的效果要好於setTimeout()。

注意：setTimeout()只是將事件插入了「任務隊列」，必須等到當前代碼（執行棧）執行完，主線程纔會去執行它指定的回調函數。要是當前代碼耗時很長，有可能要等好久，因此並無辦法保證回調函數必定會在setTimeout()指定的時間執行。

 

參考自： http://www.ruanyifeng.com/blog/2014/10/event-loop.html