Web Worker 案例

Posted leayrainy

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Web Worker 案例相关的知识,希望对你有一定的参考价值。

什么是 Web Worker?

当在 html 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成。

web worker 是运行在后台的 javascript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 在后台运行。

检测浏览器是否支持 Web Worker

在创建 web worker 之前,请检测用户的浏览器是否支持它:

if(typeof(Worker)!=="undefined")
{
    // 是的! Web worker 支持!
    // 一些代码.....
}
else
{
    //抱歉! Web Worker 不支持 
}
 



<!DOCTYPE html> <html> <head>  <meta charset="utf-8">  <title>菜鸟教程(runoob.com)</title>  </head> <body> <p>计数: <output id="result"></output></p> <button onclick="startWorker()">开始工作</button> <button onclick="stopWorker()">停止工作</button> <p><strong>注意:</strong> Internet Explorer 9 及更早 IE 版本浏览器不支持 Web Workers.</p> <script> var w; function startWorker() { if(typeof(Worker) !== "undefined") { if(typeof(w) == "undefined") { w = new Worker("demo_workers.js"); } w.onmessage = function(event) { document.getElementById("result").innerHTML = event.data; }; } else { document.getElementById("result").innerHTML = "抱歉,你的浏览器不支持 Web Workers..."; } } function stopWorker() { w.terminate(); w = undefined; } </script> </body> </html>

 












以上是关于Web Worker 案例的主要内容,如果未能解决你的问题,请参考以下文章

Nginx常见配置说明以及案例图

Web Worker 多线程

如何使用webpack在web worker中导入wasm?

Web Worker Best Practices

Web Worker Best Practices

即使文件路径无效,web worker 构造函数也不会失败