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以后：
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应用。
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
解决 Craft CMS 中的缓存问题：使用 wiejeben/craft-laravel-mix 插件
Apr 18, 2025 am 09:24 AM
在使用CraftCMS开发网站时，常常会遇到资源文件缓存的问题，特别是当你频繁更新CSS和JavaScript文件时，旧版本的文件可能仍然被浏览器缓存，导致用户无法及时看到最新的更改。这个问题不仅影响用户体验，还会增加开发和调试的难度。最近，我在项目中遇到了类似的困扰，经过一番探索，我找到了wiejeben/craft-laravel-mix这个插件，它完美地解决了我的缓存问题。
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
Debian OpenSSL如何配置HTTPS服务器
Apr 13, 2025 am 11:03 AM
在Debian系统上配置HTTPS服务器涉及几个步骤，包括安装必要的软件、生成SSL证书、配置Web服务器（如Apache或Nginx）以使用SSL证书。以下是一个基本的指南，假设你使用的是ApacheWeb服务器。1.安装必要的软件首先，确保你的系统是最新的，并安装Apache和OpenSSL：sudoaptupdatesudoaptupgradesudoaptinsta
如何在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提供一系列命令行工具，方便监
