淺析setTimeou線程機制

看高效能javascipt 這本書時，看到這麼一句話：

Putting scripts at the top of the page in this way typically leads to a noticeable delay, often in the form of a blank white page, before the user can even begin reading or otherwise interacting with the page.

解釋如下：

將script腳本放在頭部將導致一個明顯的延遲，通常的表現為：頁面開啟時一片空白，使用者不能閱讀也不能有任何互動。

我的理解是：將js放在頭部，js的載入和執行導致頁面渲染延遲。如果js放在尾部，由於頁面渲染先於js的載入或執行，可以優先呈現給使用者而不受js的阻塞影響。

為了驗證，做了以下實驗：

<p>hello world</p><script type="text/javascript">　　
    function f() {　　　　
    var t = +new Date();

　　　　//运行5秒　　　　while(true) {
　　　　　　if(+new Date() - t > 5) {
　　　　　　　　break;
　　　　　　}
　　　　}
　　}
　　f();　　// ①</script>

實驗結果有趣了：hello world 等了5秒後才出來。

深度驗證：將以上script裡面部分引入作為js外鏈或是動態載入。結果依然是等了5秒才出來。

也意味著頁面的呈現必須是在所有js載入並執行完成後才會出現。上面那段話是有問題的。

這是否就意味著只要js不涉及dom操作，放在頭部和尾部是同樣效果呢？當然不是。例如html裡面有圖片或其他資源的時候，如果將js放在頭部，圖片的下載需要等待js運行完之後才開始，而如果js放入尾部，由於圖片下載並不阻塞js的運行，可實作圖片的下載和js運行的並行。

問題到此，是否就結束了呢？當然沒有，前端工作很重要的一部分是效能最佳化，針對上述的js，如何進行最佳化呢？於是想到了setTimeout。

setTimeout 用處在於延遲執行js程式碼，它有個好處就是不會阻塞它後面js的執行。於是猜想setTimeout同樣不會阻塞頁面的渲染。

方案一：將上面的①部分替換為:

 setTimeout(f,0);

結果hello world 還是要等待5秒後才出來。但是如果細心的話你會發現瀏覽器標籤上的load符號不見了。

繼續猜想，0太小了，導致瀏覽器發現 setTimeout 後面沒有js程式碼後馬上就執行了setTimeout 裡面的內容，也就是 f 函式。於是把時間改成100ms。

方案二：將上面的①部分替換為：

setTimeout(f, 100);

結果hello world瞬間彈出。有點激動。有興趣的同學可以繼續測，這時你會發現會有一個臨界值（不同瀏覽器的臨界值不同），當setTimeout 第二個參數大於這個臨界值時，hello world會瞬間彈出，反之則需要等待裡面函數運行完成後彈出。

太神奇了，為什麼會出現這種情況？要解答這個問題，我們必須要研究一下瀏覽器的執行緒機制了。

我們知道瀏覽器內部至少會有這麼兩個執行緒：解析js的執行緒和渲染介面的執行緒。這裡我們暫且稱它們為JS線程和UI線程。

由於js是可操縱DOM的，如果在修改這些元素屬性同時渲染介面（即JS執行緒和UI執行緒同時運行），那麼渲染執行緒前後所獲得的元素資料就可能不一致了。因此為了防止渲染出現不可預期的結果，瀏覽器控制JS執行緒和UI執行緒以列隊的形式同步執行。

回到上面的問題，setTimeout執行時會新開一個定時器線程，這是正好處於JS線程運行當中，當JS線程執行完成後，發現setTimeout馬上就要開始執行（即時間小於上述的臨界值），為了避免UI執行緒運行時間太長而帶來的setTimeout嚴重拖曳時的不好體驗，瀏覽器選擇一直等待直到setTimeout到期，然後執行裡面的js。如果發現setTimeout還要隔較長時間才到期，為了避免時間上的浪費，瀏覽器選擇馬上切換到UI執行緒。

結論：setTimeout 可用來處理耗時的js程式碼，但千萬要小心第二個參數不要設定太小了，否則你看到的同樣是一個空白頁面。推薦在100ms左右，可滿足所有瀏覽器。當然，如果可以不相容IE的話，拋棄setTimeout吧，web workers 會是個很好的選擇。

在HTML4中，js建立的程式都是單執行緒的，Web Workers 是在HTML5中新增的，用來在web應用程式中實作後台處理的一種技術。使用這個API可以非常容易的創建在後台運行的線程：

var worker = new Worker('*.js');// 后台线程是不能访问页面或窗口对象的// 但可通过发送消息和接受消息与后台线程传递数据worker.onmessage = function (e) {};
worker.postMessage = function (e) {};

以上是淺析setTimeou線程機制的詳細內容。更多資訊請關注PHP中文網其他相關文章！