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. Java连接Jira,创建、修改、删除工单信息

    还不了解Jira是什么的同学可以看一下这篇文章:https://www.cnblogs.com/wgblog-code/p/11750767.html 本篇文章主要介绍如何使用Java操作Jira,包 ...

  2. C#在DataTable中使用LINQ

    LINQ 查询适用于实现的数据源 IEnumerable<T>接口或System.Query.IQueryable接口. DataTable类默认是没有实现以上接口的. 所以要在DataT ...

  3. Apollo 与 .net core

    appsettings配置内容 { "Apollo": { "AppId": "netcore", "Env": &qu ...

  4. 一、zuul如何路由到上游服务器

    所有文章 https://www.cnblogs.com/lay2017/p/11908715.html 正文 zuul在分布式项目中充当着一个网关的角色,而它最主要的功能像nginx一样针对上游服务 ...

  5. 调试location指令时,直接让location输出文本

    有时候我们调试location指令时希望location指令能够直接输出文本,这样能够方便我们进行调试.这时我们可以使用echo模块实现,但是大多数情况我们没有安装这个模块,那么我们还可以使用另一个方 ...

  6. vscode教程(基础篇)

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

  7. MySQL索引机制详解(B+树)

    一.索引是什么? 索引是为了加速对表中数据行的检索而创建的一种分散存储的数据结构. 二.为什么要使用索引? 索引能极大的减少存储引擎需要扫描的数据量. 索引可以把随机IO变成顺序IO. 索引可以帮助我 ...

  8. 流程控制 while for

    循环执行 计算机最擅长的功能之一就是按照规定的条件,重复执行某些操作,这是程序设计中最能发挥计算机特长的程序结构. 1.while语句 while(表达式){ 各种语句.... } 当表达式的值为tr ...

  9. 简述FTP的主动模式与被动模式(精简)

    一.主被动 主动: 客户端从任意一个大于1024的端口现在假设为1234(非特权端口)连接到服务端的21端口(命令端口),随之客户端监听端口(N+1)即为1235端口(可以理解为这是客户端认定的数据端 ...

  10. 论文阅读:Deformable ConvNets v2

    论文地址:http://arxiv.org/abs/1811.11168 作者:pprp 时间:2019年5月11日 0. 摘要 DCNv1引入了可变形卷积,能更好的适应目标的几何变换.但是v1可视化 ...