html5 WebWorkers防止瀏覽器假死的範例程式碼分享
在Web開發的時候經常會遇到瀏覽器不回應事件進入假死狀態，甚至彈出「腳本運行時間過長「的提示框，如果出現這種情況說明你的腳本已經失控了。
一個瀏覽器至少存在三個執行緒：js引擎執行緒(處理js)、GUI渲染執行緒(渲染頁面)、瀏覽器事件觸發執行緒(控制互動)。
1：JavaScript引擎是基於事件驅動單執行緒執行的，JS引擎一直等待著任務佇列中任務的到來然後加以處理，瀏覽器無論再什麼時候都只有一個JS執行緒在運行JS程式。
2：GUI 渲染執行緒負責渲染瀏覽器介面，當介面需要重繪(Repaint)或由於某種操作引發回流(reflow)時,該執行緒就會執行。但要注意 GUI渲染執行緒與JS引擎是互斥的，當JS引擎執行時GUI執行緒會被掛起，GUI更新會被保存在一個佇列中等到JS引擎空閒時立即執行。
3：事件觸發線程，當一個事件被觸發時該線程會把事件加到待處理佇列的隊尾，等待JS引擎的處理。這些事件可來自JavaScript引擎目前執行的程式碼區塊如setTimeOut、也可來自瀏覽器核心的其他執行緒如滑鼠點擊、AJAX非同步請求等，但由於JS的單執行緒關係所有這些事件都得排隊等待JS引擎處理。
了解了瀏覽器的核心處理方式就不難理解瀏覽器為什麼會進入假死狀態了，當一段JS腳本長時間佔用著處理機就會掛起瀏覽器的GUI更新，而後面的事件回應也被排在佇列中無法處理，造成了瀏覽器被鎖定進入假死狀態。另外JS腳本中進行了DOM操作，一旦JS呼叫結束就會馬上進行一次GUI渲染，然後才開始執行下一個任務，所以JS中大量的DOM操作也會導致事件響應緩慢甚至真正卡死瀏覽器，如在IE6下一次插入大量的HTML。而如果真的彈出了「腳本運行時間過長「的提示框則表示你的JS腳本肯定有死循環或進行過深的遞歸操作了。
現在如果遇到了這種情況，我們可以做的不僅僅是優化程式碼，html5的webWorkers提供了js的後台處理線程的API，它允許將複雜耗時的單純js邏輯處理放在瀏覽器後台執行緒中進行處理，讓js執行緒不阻塞UI執行緒的渲染。這個線程不能和頁面進行交互，如獲取元素、alert等。多個線程間也是可以透過相同的方法進行資料傳遞。
直接看程式碼：
範例：使用者輸入一個數字，進行加法運算(+=)
以前的做法：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>webworkers--calculate</title>
</head>
<body>
<input id="num" name="num" type="text"/>
<button onclick = "calculate()">计算</button><br />
<div id="result" style="color:red;"></div>
<div id="time" style="color:red;"></div>
<script type="text/javascript" src="calculate.js"></script>
<script type="text/javascript">
function calculate(){
data1 = new Date().getTime();
var num = document.getElementById("num").value;
var val = parseInt(num,10);
var result =0;
for(var i =0; i<num;i++){
result += i;
}
data2 = new Date().getTime();
document.getElementById("result").innerHTML ="计算结果："+result;
document.getElementById("time").innerHTML ="普通 耗时："+ (data2 - data1)+"ms";
}
</script>
</body>
</html>使用webWorkers以後使用webWorkers以後使用webWorkers ：
calculate.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>webworkers--calculate</title>
</head>
<body>
<input id="num" name="num" type="text"/>
<button onclick = "calculate()">计算</button><br />
<div id="result" style="color:red;"></div>
<div id="time" style="color:red;"></div>
<script type="text/javascript" src="calculate.js"></script>
<script type="text/javascript">
var worker = new Worker("calculate.js");
var data1 =0;
var data2 =0;
worker.onmessage = function(event){
var data = event.data;
data2 = new Date().getTime();
document.getElementById("result").innerHTML ="计算结果："+data;
document.getElementById("time").innerHTML ="workers 耗时："+ (data2 - data1)+"ms";
};
function calculate(){
data1 = new Date().getTime();
var num = document.getElementById("num").value;
var val = parseInt(num,10);
worker.postMessage(val);
}
</script>
</body>
</html>calculate.js
onmessage = function(event){
var num = event.data;
var result = 0;
for(var i = 0; i<num;i++){
result += i;
}
postMessage(result);
};webWorker需要將程式碼放入web伺服器中，如果使用的是localhost請使用高版本的chrome瀏覽器打開，firefox瀏覽器在處理localhost的時候會出現「Could not get domain!」的錯誤，
對比上面的兩種實作方式，當計算價值達到100億的時候，普通做法耗時已經很長，而且一般會卡死了。
webWorkers在Chrome15下的效果。 修正：getTime()回傳的應該是毫秒（ms），而不是秒(s)。
普通方法在Chrome15下的效果
可見webWorkers在未來的web應用中還是非常有價值的。
以上是html5 WebWorkers防止瀏覽器假死的範例程式碼分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
了解H5代碼：HTML5的基本原理
Apr 17, 2025 am 12:08 AM
HTML5是構建現代網頁的關鍵技術，提供了許多新元素和功能。 1.HTML5引入了語義化元素如、、等，增強了網頁結構和SEO。 2.支持多媒體元素和，無需插件即可嵌入媒體。 3.表單增強了新輸入類型和驗證屬性，簡化了驗證過程。 4.提供了離線和本地存儲功能，提升了網頁性能和用戶體驗。
apache服務器是什麼 apache服務器是乾嘛的
Apr 13, 2025 am 11:57 AM
Apache服務器是強大的Web服務器軟件，充當瀏覽器與網站服務器間的橋樑。 1. 它處理HTTP請求，根據請求返回網頁內容；2. 模塊化設計允許擴展功能，例如支持SSL加密和動態網頁；3. 配置文件（如虛擬主機配置）需謹慎設置，避免安全漏洞，並需優化性能參數，例如線程數和超時時間，才能構建高性能、安全的Web應用。
解決 Craft CMS 中的緩存問題：使用 wiejeben/craft-laravel-mix 插件
Apr 18, 2025 am 09:24 AM
在使用CraftCMS開發網站時，常常會遇到資源文件緩存的問題，特別是當你頻繁更新CSS和JavaScript文件時，舊版本的文件可能仍然被瀏覽器緩存，導致用戶無法及時看到最新的更改。這個問題不僅影響用戶體驗，還會增加開發和調試的難度。最近，我在項目中遇到了類似的困擾，經過一番探索，我找到了wiejeben/craft-laravel-mix這個插件，它完美地解決了我的緩存問題。
H5是HTML5的速記嗎？探索細節
Apr 14, 2025 am 12:05 AM
H5不僅僅是HTML5的簡稱，它代表了一個更廣泛的現代網頁開發技術生態：1.H5包括HTML5、CSS3、JavaScript及相關API和技術；2.它提供更豐富、互動、流暢的用戶體驗，能在多設備上無縫運行；3.使用H5技術棧可以創建響應式網頁和復雜交互功能。
HDFS文件系統在CentOS上的使用技巧
Apr 14, 2025 pm 07:30 PM
CentOS系統下HDFS文件系統的安裝、配置及優化指南本文將指導您如何在CentOS系統上安裝、配置和優化Hadoop分佈式文件系統(HDFS)。 HDFS安裝與配置Java環境安裝:首先，確保已安裝合適的Java環境。編輯/etc/profile文件，添加以下內容，並將/usr/lib/java-1.8.0/jdk1.8.0_144替換為您的實際Java安裝路徑：exportJAVA_HOME=/usr/lib/java-1.8.0/jdk1.8.0_144exportPATH=$J
Nginx性能監控與故障排查工具使用
Apr 13, 2025 pm 10:00 PM
Nginx性能監控與故障排查主要通過以下步驟進行：1.使用nginx-V查看版本信息，並啟用stub_status模塊監控活躍連接數、請求數和緩存命中率；2.利用top命令監控系統資源佔用，iostat和vmstat分別監控磁盤I/O和內存使用情況；3.使用tcpdump抓包分析網絡流量，排查網絡連接問題；4.合理配置worker進程數，避免並發處理能力不足或進程上下文切換開銷過大；5.正確配置Nginx緩存，避免緩存大小設置不當；6.通過分析Nginx日誌，例如使用awk和grep命令或ELK
Nginx日誌分析與統計，了解網站訪問情況
Apr 13, 2025 pm 10:06 PM
本文介紹瞭如何分析Nginx日誌以提升網站性能和用戶體驗。 1.理解Nginx日誌格式，例如時間戳、IP地址、狀態碼等；2.使用awk等工具解析日誌，統計訪問量、錯誤率等指標；3.根據需求編寫更複雜的腳本或使用更高級工具，例如goaccess，分析不同維度的數據；4.對於海量日誌，考慮使用Hadoop或Spark等分佈式框架。通過分析日誌，可以識別網站訪問模式、改進內容策略，並最終優化網站性能和用戶體驗。
如何在CentOS上監控HDFS狀態
Apr 14, 2025 pm 07:33 PM
在CentOS系統上監控HDFS（Hadoop分佈式文件系統）狀態有多種途徑。本文將介紹幾種常用方法，助您選擇最合適的方案。 1.利用Hadoop自帶的WebUIHadoop自帶的Web界面提供集群狀態監控功能。步驟：確保Hadoop集群已啟動並運行。訪問WebUI：在瀏覽器中輸入http://:50070（Hadoop2.x）或http://:9870（Hadoop3.x）。默認用戶名和密碼通常為hdfs/hdfs。 2.命令行工具監控Hadoop提供一系列命令行工具，方便監
