美文网首页
HTML 5 Web Workers

HTML 5 Web Workers

作者: 河的左岸 | 来源:发表于2017-05-29 00:01 被阅读0次

前端多线程

web worker 是运行在后台的 JavaScript,不会影响页面的性能。

什么是 Web Worker?

当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成。
web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 在后台运行。

浏览器支持

所有主流浏览器均支持 web worker,除了 Internet Explorer。

实例

<!DOCTYPE html>
<html>
<body>

<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
 <button onclick="stopWorker()">Stop Worker</button>
 <br /><br />

<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="Sorry, your browser
 does not support Web Workers...";
}
}

function stopWorker()
{
w.terminate();
}
</script>

</body>
</html>   

demo_workers.js:

var i=0;

function timedCount()
{
i=i+1;
postMessage(i);
setTimeout("timedCount()",500);
}

timedCount(); 

注意

  • 由于 web worker 位于外部文件中,它们无法访问下例 JavaScript 对象:
    window 对象
    document 对象
    parent 对象
  • web worker 通常不用于如此简单的脚本,而是用于更耗费 CPU 资源的任务。

相关文章

  • 初探 HTML5 Web Workers

    原文:初探 HTML5 Web Workers 一、Web Workers是什么 Web Worker为Web内容...

  • HTML5 之 Web Worker

    HTML5 Web Worker Web Workers 是 HTML5 提供的一个javascript多线程解决...

  • HTML 5 Web Workers

    前端多线程 web worker 是运行在后台的 JavaScript,不会影响页面的性能。 什么是 Web Wo...

  • HTML 5 Web Workers

    什么是 Web Worker?当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成。web w...

  • HTML 5 Web Workers

    web worker 是运行在后台的 JavaScript,不会影响页面的性能。 什么是 Web Worker? ...

  • HTML5 Web Workers

    web worker 是运行在后台的JavaScript,不会影响页面的性能 什么是 Web Worker当在HT...

  • HTML5Web Workers

    web worker 是运行在后台的 JavaScript,不会影响页面的性能。 什么是 Web Worker? ...

  • HTML Web Workers

    Web Workers是运行在后台的JavaScript,不会影响页面的性能。 什么是Web Worker? 当在...

  • web worker初入

    在HTML5中提出了工作线程(Web Workers)的概念,即多线程概念,可以将一些大量计算的代码交给web w...

  • HTML5 Web Workers多线程(个人笔记)

    介绍 Web Workers 是HTML5提供的一个javaScript多线程解决方案。我们可以将一些大计算量的代...

网友评论

      本文标题:HTML 5 Web Workers

      本文链接:https://www.haomeiwen.com/subject/fwrffxtx.html