防止浏覽器假死的方法

一個浏覽器至少存在三個線程js引擎線程(處理js)GUI渲染線程(渲染頁面)浏覽器事件觸發線程(控制交互)下面我們給大家介紹一下防止浏覽器假死的方法!

JavaScript引擎是基於事件驅動單線程執行的JS引擎一直等待著任務隊列中任務的到來然後加以處理浏覽器無論再什麼時候都只有一個JS線程在運行JS程序

GUI 渲染線程負責渲染浏覽器界面當界面需要重繪(Repaint)或由於某種操作引發回流(reflow)時該線程就會執行但需要注意 GUI渲染線程與JS引擎是互斥的當JS引擎執行時GUI線程會被掛起GUI更新會被保存在一個隊列中等到JS引擎空閒時立即被執行

事件觸發線程當一個事件被觸發時該線程會把事件添加到待處理隊列的隊尾等待JS引擎的處理這些事件可來自JavaScript引擎當前執行的代碼塊如setTimeOut也可來自浏覽器內核的其他線程如鼠標點擊AJAX異步請求等但由於JS的單線程關系所有這些事件都得排隊等待JS引擎處理

了解了浏覽器的內核處理方式就不難理解浏覽器為什麼會進入假死狀態了當一段JS腳本長時間占用著處理機就會掛起浏覽器的GUI更新而後面的事件響應 也被排在隊列中得不到處理從而造成了浏覽器被鎖定進入假死狀態另外JS腳本中進行了DOM操作一旦JS調用結束就會馬上進行一次GUI渲染然後才 開始執行下一個任務所以JS中大量的DOM操作也會導致事件響應緩慢甚至真正卡死浏覽器如在IE下一次插入大量的HTML而如果真的彈出了“腳本 運行時間過長“的提示框則說明你的JS腳本肯定有死循環或者進行過深的遞歸操作了

現在如果遇到了這種情況我們可以做的不僅僅是優化 代碼html的webWorkers提供了js的後台處理線程的API它允許將復雜耗時的單純js邏輯處理放在浏覽器後台線程中進行處理讓js線 程不阻塞UI線程的渲染這個線程不能和頁面進行交互如獲取元素alert等多個線程間也是可以通過相同的方法進行數據傳遞

直接看代碼

例子用戶輸入一個數字進行加法運算(+=)

以前的做法

計算

使用webWorkers以後

calculatehtml

使用webWorkers以後

calculatehtml

計算

calculatejs

onmessage = function(event){

var num = eventdata;

var result = ;

for(var i = ; i

result += i;

}

postMessage(result);

};

webWorker需要將代碼放入web服務器中 如果使用的是localhost請用高版本的chrome浏覽器打開firefox浏覽器在處理localhost的時候會出現“Could not get domain!”的錯誤關於這個可以參考對比上面的兩種實現方式當計算值達到億的時候普通做法耗時已經很長且一般會卡死了

以上就是我們給大家介紹的防止浏覽器假死的方法了。希望大家繼續關注我們的網站!