美文网首页H5
H5(Web Workers)

H5(Web Workers)

作者: 强某某 | 来源:发表于2018-06-08 16:42 被阅读12次

Web Workers

  • Worker:构造函数,加载分线程执行的js文件
  • Worker.prototype.onmessage: 用于接收另一个线程的回调函数
  • Worker.prototype.postMessage:向另一个线程发送消息
  • 缺点:worker内代码不能更新UI,不能跨域加载js,浏览器支持问题

说明:必须在服务器环境下,不能本地file,加载的js不能跨域,使用webworker的代码不要使用
箭头函数,let等新特性。

案例

html中的js
    var worker = new Worker('a.js');
    worker.postMessage(8);
    worker.onmessage = function (event) {
        console.log("接收的数据",event.data);
    }
a.js
// 斐波那契数列
function fibonacci(n){
    return n<=2?1:fibonacci(n-1)+fibonacci(n-2);
}
var onmessage = function(event) {
    let res=fibonacci(event.data);
    postMessage(res);
}
说明:之所以webworker代码中不能更新UI,是因为this指向是[object DedicatedWorkerGlobalScope],
即a.js中上下文不是window,没有UI更新相关的接口。

相关文章

  • H5(Web Workers)

    Web Workers Worker:构造函数,加载分线程执行的js文件 Worker.prototype.onm...

  • 初探 HTML5 Web Workers

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

  • JavaScript是如何工作的:Web Workers的构建块

    摘要: 理解Web Workers。 原文:JavaScript是如何工作的:Web Workers的构建块 + ...

  • Web Workers

    12月20号发布的Safri浏览器内核webkit表示自己开始支持service workers,这就意味的主流浏...

  • Web Workers

    当浏览器切换到后台运行,操作系统会把浏览器挂起,挂起之后,比如定时器,在回到原来页面的时候,会出现获取秒有重复的问...

  • Web Workers

    什么是Web Worker? 我们都知道HTML页面在执行script的时候是unresponsive的,直到sc...

  • Web Workers

    1.JS单线程 说起Web Workers,首先必须了解因为JS运行在浏览器中,是单线程的,每个window一个J...

  • Web Workers

    web worker JavaScript是单线程的,遇到计算密集型或高延迟的任务时,会影响整个页面的运行。Web...

  • Web Workers

    Web Workers 分类及 5 个使用场景 how-javascript-works 作者:Troland链接...

  • web Workers

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

网友评论

    本文标题:H5(Web Workers)

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