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应用中还是非常有价值的。
Atas ialah kandungan terperinci html5 WebWorkers防止浏览器假死的示例代码分享. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Memahami Kod H5: Asas HTML5
Apr 17, 2025 am 12:08 AM
HTML5 adalah teknologi utama untuk membina laman web moden, menyediakan banyak elemen dan ciri -ciri baru. 1. HTML5 memperkenalkan unsur -unsur semantik seperti, dan lain -lain, yang meningkatkan struktur laman web dan SEO. 2. Sokongan unsur multimedia dan menanamkan media tanpa pemalam. 3. Borang meningkatkan jenis input baru dan sifat pengesahan, memudahkan proses pengesahan. 4. Menawarkan fungsi storan luar talian dan tempatan untuk meningkatkan prestasi laman web dan pengalaman pengguna.
Apakah pelayan Apache? Apa itu pelayan Apache?
Apr 13, 2025 am 11:57 AM
Apache Server adalah perisian pelayan web yang kuat yang bertindak sebagai jambatan antara penyemak imbas dan pelayan laman web. 1. Ia mengendalikan permintaan HTTP dan mengembalikan kandungan laman web berdasarkan permintaan; 2. Reka bentuk modular membolehkan fungsi lanjutan, seperti sokongan untuk penyulitan SSL dan laman web dinamik; 3. Fail konfigurasi (seperti konfigurasi tuan rumah maya) perlu ditetapkan dengan teliti untuk mengelakkan kelemahan keselamatan, dan mengoptimumkan parameter prestasi, seperti kiraan thread dan masa tamat, untuk membina aplikasi web berprestasi tinggi dan selamat.
Adakah H5 adalah singkat untuk HTML5? Meneroka butiran
Apr 14, 2025 am 12:05 AM
H5 bukan sekadar singkatan HTML5, ia mewakili ekosistem teknologi pembangunan web moden yang lebih luas: 1. H5 termasuk HTML5, CSS3, JavaScript dan API dan Teknologi yang berkaitan; 2. Ia menyediakan pengalaman pengguna yang lebih kaya, interaktif dan lancar, dan boleh berjalan dengan lancar pada pelbagai peranti; 3. Menggunakan timbunan teknologi H5, anda boleh membuat laman web responsif dan fungsi interaktif yang kompleks.
Petua untuk menggunakan sistem fail HDFS di CentOS
Apr 14, 2025 pm 07:30 PM
Panduan pemasangan, konfigurasi dan pengoptimuman untuk sistem fail HDFS di bawah sistem CentOS Artikel ini akan membimbing anda cara memasang, mengkonfigurasi dan mengoptimumkan Sistem Fail Hadoop diedarkan (HDFS) pada sistem CentOS. Pemasangan Alam Sekitar Java dan Konfigurasi HDFS: Pertama, pastikan persekitaran Java yang sesuai dipasang. Fail edit/etc/profil, tambahkan yang berikut, dan ganti /usr/lib/java-1.8.0/jdk1.8.0_144 dengan laluan pemasangan Java sebenar anda: Exportjava_home =/usr/lib/java-1.8.0/
Selesaikan masalah caching dalam kraf CMS: Menggunakan plug-in wiejeben/craft-laravel-mix
Apr 18, 2025 am 09:24 AM
Apabila membangunkan laman web yang menggunakan CraftCMS, anda sering menghadapi masalah caching fail sumber, terutamanya apabila anda sering mengemas kini fail CSS dan JavaScript, versi lama fail mungkin masih di -cache oleh penyemak imbas, menyebabkan pengguna tidak melihat perubahan terkini dalam masa. Masalah ini bukan sahaja memberi kesan kepada pengalaman pengguna, tetapi juga meningkatkan kesukaran pembangunan dan debugging. Baru-baru ini, saya menghadapi masalah yang sama dalam projek saya, dan selepas beberapa penjelajahan, saya dapati plugin Wiejeben/Craft-Laravel-Mix, yang sempurna menyelesaikan masalah caching saya.
Pemantauan prestasi dan alat penyelesaian masalah nginx
Apr 13, 2025 pm 10:00 PM
Pemantauan dan penyelesaian masalah prestasi Nginx terutamanya dilakukan melalui langkah-langkah berikut: 1. Gunakan Nginx-V untuk melihat maklumat versi, dan membolehkan modul Stub_status untuk memantau bilangan sambungan aktif, permintaan dan kadar hit cache; 2. Gunakan arahan atas untuk memantau pekerjaan sumber sistem, iostat dan vmstat monitor cakera I/O dan penggunaan memori masing -masing; 3. Gunakan TCPDUMP untuk menangkap paket untuk menganalisis trafik rangkaian dan menyelesaikan masalah sambungan rangkaian; 4. Konfigurasikan dengan betul bilangan proses pekerja untuk mengelakkan keupayaan pemprosesan serentak yang tidak mencukupi atau konteks proses yang berlebihan beralih ke atas; 5. Konfigurasikan cache Nginx dengan betul untuk mengelakkan tetapan saiz cache yang tidak betul; 6. Dengan menganalisis log nginx, seperti menggunakan arahan AWK dan GREP atau rusa
Cara mengkonfigurasi pelayan https di debian openssl
Apr 13, 2025 am 11:03 AM
Mengkonfigurasi pelayan HTTPS pada sistem Debian melibatkan beberapa langkah, termasuk memasang perisian yang diperlukan, menghasilkan sijil SSL, dan mengkonfigurasi pelayan web (seperti Apache atau Nginx) untuk menggunakan sijil SSL. Berikut adalah panduan asas, dengan mengandaikan anda menggunakan pelayan Apacheweb. 1. Pasang perisian yang diperlukan terlebih dahulu, pastikan sistem anda terkini dan pasang Apache dan OpenSSL: sudoaptDateSudoaptgradesudoaptinsta
Cara Memantau Status HDFS di CentOS
Apr 14, 2025 pm 07:33 PM
Terdapat banyak cara untuk memantau status HDFS (sistem fail diedarkan Hadoop) pada sistem CentOS. Artikel ini akan memperkenalkan beberapa kaedah yang biasa digunakan untuk membantu anda memilih penyelesaian yang paling sesuai. 1. Gunakan WebUI Hadoop sendiri, antara muka web Hadoop sendiri untuk menyediakan fungsi pemantauan status kluster. Langkah -langkah: Pastikan kluster Hadoop berjalan dan berjalan. Akses WebUI: Masukkan http: //: 50070 (Hadoop2.x) atau http: //: 9870 (Hadoop3.x) dalam penyemak imbas anda. Nama pengguna dan kata laluan lalai biasanya HDFS/HDFS. 2. Pemantauan alat baris arahan Hadoop menyediakan satu siri alat baris arahan untuk memudahkan pemantauan
