1. 为什么使用Web Workers API

通过使用该API,web应用程序可以独立于主线程,运行一个单独的线程来处理脚本。

可以在独立的线程中解决耗时较长的任务,避免主线程阻塞。

2. 应用

1. 新建一个worker.js文件,将耗时较长的js代码放入其中;通过postMessage传递数据

// worker.js
let sum = 0;
for(let i=0; i<1000000; i++) {
sum += i;
}
self.postMessage(sum); // self表示当前窗口

2. 新建Worker实例

const worker = new Worker('./worker.js'); // 传入一个文件
worker.onmessage = function(e){
// e.data获取传递的数据
}

简单了解Web Workers API的更多相关文章

  1. HTML5权威指南--Web Storage,本地数据库,本地缓存API,Web Sockets API,Geolocation API(简要学习笔记二)

    1.Web Storage HTML5除了Canvas元素之外,还有一个非常重要的功能那就是客户端本地保存数据的Web Storage功能. 以前都是用cookies保存用户名等简单信息.   但是c ...

  2. 通过使用Web Workers,Web应用程序可以在独立于主线程的后台线程中,运行一个脚本操作。这样做的好处是可以在独立线程中执行费时的处理任务,从而允许主线程(通常是UI线程)不会因此被阻塞/放慢。

    Web Workers API - Web API 接口参考 | MDNhttps://developer.mozilla.org/zh-CN/docs/Web/API/Web_Workers_API ...

  3. Web Workers文档

    Web Worker为Web内容在后台线程中运行脚本提供了一种简单的方法.线程可以执行任务而不干扰用户界面.此外,他们可以使用XMLHttpRequest执行 I/O  (尽管responseXML和 ...

  4. Web Workers - (Worker(专有) and SharedWorker(共享))

    Web Worker为Web内容在后台线程中运行脚本提供了一种简单的方法 线程可以执行任务而不干扰用户界面 可以使用XMLHttpRequest执行 I/O (尽管responseXML和channe ...

  5. 利用web workers实现多线程处理

    利用web workers在后台线程中实现对数据库的增删改查操作,并在后台线程中生成页面上某个列表的完整的HTML代码,然后再前台脚本中直接将这段HTML代码输出到页面上! 利用web workers ...

  6. 使用Web Workers处理线程

    使用HTML 4和JavaScript创建出来的Web程序中,因为所有的处理都是在单线程中 HTML 5的Web Workers API,HTML 5中,一个Worker实际上为一个后台运行的线程.

  7. 通信API、使用Web Workers处理线程

    1.跨文档消息传输                                               要想接受从其他的窗口那里发过来的消息,就必须对窗口对象的message事件进行监视. w ...

  8. html5 Web Workers

    虽然在JavaScript中有setInterval和setTimeout函数使javaScript看起来好像使多线程执行,单实际上JavaScript使单线程的,一次只能做一件事情(关于JavaSc ...

  9. HTML5 Web Workers来加速您的移动Web应用

    一直以来,Web 应用程序被局限在一个单线程世界中.这的确限制了开发人员在他们的代码中的作为,因为任何太复杂的东西都存在冻结应用程序 UI 的风险.通过将多线程引入 Web 应用程… 在本文中,您将使 ...

随机推荐

  1. spring源码学习(一)--AOP初探

    LZ以前一直觉得,学习spring源码,起码要把人家的代码整体上通读一遍,现在想想这是很愚蠢的,spring作为一个应用平台,不是那么好研究透彻的,而且也不太可能有人把spring的源码全部清楚的过上 ...

  2. MACD波段选股

    MA12:=MA(C,); {股价连续3天站稳12日均线,且12日均线走平或向上} C1:=EVERY(C>MA12,) AND MA12>=REF(MA12,); {MACD金叉,且DI ...

  3. jQuery控制页面滚动条上下滚动

    .向上滚动  $(); .向下滚动   $(); 参数解读:$(this)表示要实现上下滚动的对象,-50表示向上滚动50px , +50表示向下滚动50px ,1000表示滚动速度

  4. 【转载】在windows上部署使用Redis

    下载Redis 在Redis的官网下载页上有各种各样的版本,我这次是在windows上部署的,要去GitHub上下载.目前的是2.8.12版的,直接解压,在\bin\release 目录下有个压缩包, ...

  5. C#避免WinForm窗体假死

    WinForm窗体在使用过程中如果因为程序等待时间太久而导致窗体本身假死无法控制,会严重影响用户的体验,这种情况大多是UI线程被耗时长的代码操作占用所致,可以新开一个线程用来完成耗时长的操作,然后再将 ...

  6. vscode教程(基础篇)

    转载:https://segmentfault.com/a/1190000017949680 本文主要介绍vscode在工作中常用的快捷键及插件,目标在于提高工作效率 本文的快捷键是基于mac的,wi ...

  7. mysql各版本驱动

    http://central.maven.org/maven2/mysql/mysql-connector-java/5.1.9/

  8. win10 下的 CUDA10.0 +CUDNN + tensorflow + opencv 环境部署

    1 CUDA 10.0 安装  win10 下的cuda 安装是非常简单的,和其他程序安装没什么区别,现在 tensorflow 1.13 版本以上 支持 CUDA 10.0 ,这里选取了CUDA 1 ...

  9. 在浏览器中输入www.taobao.com后执行的全部过程

    >>>点击网址后,应用层的DNS协议会将网址解析为IP地址: DNS查找过程: 1.        浏览器会检查缓存中有没有这个域名对应的解析过的IP地址,如果缓存中有,这个解析过程 ...

  10. Android笔记(二十七) Android中的动态广播和静态广播

    广播接收器注册一共有两种形式 : 静态注册和动态注册. 两者及其接收广播的区别: 1.动态注册的广播 永远要快于 静态注册的广播,不管静态注册的优先级设置的多高,不管动态注册的优先级有多低>\ ...