代碼塊： JS中的代碼塊是指由<script>標(biāo)簽分割的代碼段。JS是按照代碼塊來進(jìn)行編譯和執(zhí)行的，代碼塊間相互獨(dú)立(即就算代碼塊1出錯(cuò)，但不影響代碼塊2的加載和執(zhí)行)，但變量和方法共享。

案例：2個(gè)代碼塊

 

<script type="text/javascript"> 
    console.log("這是代碼塊一"); 
</script> 
  
<script type="text/javascript"> 
    console.log ("這是代碼塊二"); 
</script> 
  

 

HTML頁面中JS的加載原理： 在加載HTML頁面的時(shí)候，當(dāng)瀏覽器遇到內(nèi)嵌的JS代碼時(shí)會(huì)停止處理頁面，先執(zhí)行JS代碼，然后再繼續(xù)解析和渲染頁面。同樣的情況也發(fā)生在外鏈的JS文件中，瀏覽器必須先花時(shí)間下載外鏈文件中的代碼，然后解析并執(zhí)行它，在這個(gè)過程中，頁面的渲染和用戶互交完全被阻塞。由于現(xiàn)代瀏覽器都允許并行下載JS文件，因此<script>標(biāo)簽在下載外部資源時(shí)不會(huì)阻塞其他的<script>標(biāo)簽。遺憾的是JS下載過程仍然會(huì)阻塞其他資源的下載。

 

JavaScript的單線程：

JS語言的一大特點(diǎn)就是單線程，也就是說，同一個(gè)時(shí)間只能做一件事情。之所以是單線程，是因?yàn)榕c它的用途有關(guān)，作為瀏覽器腳本語言，JS的主要用途是與用戶互動(dòng)以及操作DOM。這決定了它只能是單線程，否則會(huì)帶來復(fù)雜的同步問題。為了利用多核CPU的計(jì)算功能，HTML5提出了web worker標(biāo)準(zhǔn)，允許JS腳本創(chuàng)建多個(gè)線程，但是子線程完全受主線程控制，且不能操作DOM，所以這個(gè)新標(biāo)準(zhǔn)并沒有改變JS單線程的本質(zhì)。

 

JavaScript的任務(wù)列隊(duì)：

JS任務(wù)可以分為兩種：一種是同步任務(wù)，另一種是異步任務(wù)。注意，只有主線程空了，才會(huì)去讀取"任務(wù)隊(duì)列"，這就是JS的運(yùn)行機(jī)制，這個(gè)過程會(huì)不斷重復(fù)。

同步任務(wù)：在主線程上排隊(duì)執(zhí)行的任務(wù)，只有前一個(gè)任務(wù)執(zhí)行完畢了，才會(huì)執(zhí)行后一個(gè)任務(wù)。

異步任務(wù)：在主線程之外，還存在一個(gè)“任務(wù)列隊(duì)”，異步任務(wù)就是不進(jìn)入主線程，而是進(jìn)入“任務(wù)列隊(duì)”的任務(wù)，只有“任務(wù)列隊(duì)”通知主線程，某個(gè)異步任務(wù)可以執(zhí)行了并且同步任務(wù)執(zhí)行完畢，該任務(wù)才會(huì)進(jìn)入主線程執(zhí)行。

 

Javascript的事件和回調(diào)函數(shù)：

"任務(wù)列隊(duì)"是一個(gè)事件的列隊(duì)，IO設(shè)備完成一項(xiàng)任務(wù)，就在"任務(wù)隊(duì)列"中添加一個(gè)事件，表示相關(guān)的異步任務(wù)可以進(jìn)入"執(zhí)行棧"了。主線程讀取"任務(wù)隊(duì)列"，就是讀取里面有哪些事件。"任務(wù)隊(duì)列"中的事件，除了IO設(shè)備的事件以外，還包括一些用戶產(chǎn)生的事件(如鼠標(biāo)點(diǎn)擊、頁面滾動(dòng)等等)。只要指定過回調(diào)函數(shù)，這些事件發(fā)生時(shí)就會(huì)進(jìn)入"任務(wù)隊(duì)列"，等待主線程讀取。所謂"回調(diào)函數(shù)"，就是那些會(huì)被主線程掛起的代碼。異步任務(wù)必須指定回調(diào)函數(shù)，當(dāng)主線程開始執(zhí)行異步任務(wù)，就是執(zhí)行對應(yīng)的回調(diào)函數(shù)。"任務(wù)隊(duì)列"是個(gè)先進(jìn)先出的數(shù)據(jù)結(jié)構(gòu)，排在前面的事件，優(yōu)先被主線程讀取。主線程的讀取過程基本上是自動(dòng)的，只要執(zhí)行棧一清空，"任務(wù)隊(duì)列"上***位的事件就自動(dòng)進(jìn)入主線程。但是，由于存在后文提到的"定時(shí)器"功能，主線程首先檢查一下執(zhí)行時(shí)間，某些事件只有到了規(guī)定的時(shí)間，才能返回主線程。

 

定時(shí)器：

除了放置異步任務(wù)的事件，"任務(wù)隊(duì)列"還可以放置定時(shí)事件，即指定某些代碼在多少時(shí)間之后執(zhí)行。定時(shí)器功能主要由setTimeout()和setInterval()這兩個(gè)函數(shù)來完成，它們的內(nèi)部運(yùn)行機(jī)制完全一樣，區(qū)別在于前者指定的代碼是一次性執(zhí)行，后者則為反復(fù)執(zhí)行。以下主要討論setTimeou()方法：

setTimeout()接受兩個(gè)參數(shù)，***個(gè)是回調(diào)函數(shù)，第二個(gè)是推遲執(zhí)行的毫秒數(shù)     

 

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

上面代碼的執(zhí)行結(jié)果是1=>3=>2，因?yàn)閟etTimeout()將第二行推遲到1000毫秒之后執(zhí)行

 

如果將setTimeout()的第二個(gè)參數(shù)設(shè)為0，就表示當(dāng)前代碼執(zhí)行完(執(zhí)行棧清空)以后立即執(zhí)行

 

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

上面代碼的執(zhí)行結(jié)果是3=>2，因?yàn)橹挥性趫?zhí)行完第二行以后，系統(tǒng)才會(huì)去執(zhí)行"任務(wù)隊(duì)列"中的回調(diào)函數(shù)?？傊瑂etTimeout(fn, 0)的含義是，指定某個(gè)任務(wù)在主線程最早的空閑時(shí)間執(zhí)行，也就是說盡可能早的執(zhí)行。它在"任務(wù)隊(duì)列"的尾部添加一個(gè)事件，因此要等到同步任務(wù)和"任務(wù)隊(duì)列"現(xiàn)有的事情都處理完，才會(huì)得到執(zhí)行。

 

需要注意的是，setTimeout()知識(shí)將事件插入了"任務(wù)隊(duì)列"，必須等到當(dāng)前代碼(執(zhí)行棧)執(zhí)行完，主線程才會(huì)去執(zhí)行它指定的回調(diào)函數(shù)，要是當(dāng)前代碼耗時(shí)很長，有可能要等很久，所以并沒有辦法保證回調(diào)函數(shù)一定會(huì)在setTimeout()指定的時(shí)間執(zhí)行。