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中selenium判断某个元素是否存在

    selenium工具 直接通过findElement方法获取某个元素,如果该元素不存在肯定会报错,selenium又没有可以判断该元素是否存在的方法 于是我们可以手写一个工具类,来判断这个元素是否存在 ...

  2. centos 安装notepad++

    notepad++在linux下名字为notepadqq第一步,还是下载软件库$ sudo wget -O /etc/yum.repos.d/sea-devel.repo http://sea.fed ...

  3. WUSTOJ 1347: GCD(Java)互质

    题目链接:1347: GCD Description 已知gcd(a,b)表示a,b的最大公约数. 现在给你一个整数n,你的任务是在区间[1,n)里面找到一个最大的x,使得gcd(x,n)等于1. I ...

  4. python3快速安装升级pip3

    一.下载地址: 获取get-pip.py安装文件: 官网链接:https://bootstrap.pypa.io/get-pip.py 百度云链接:https://pan.baidu.com/s/14 ...

  5. leetcode动态规划笔记三---单序列型

    单序列型DP 相比一维DP,这种类型状态转移与过去每个阶段的状态都有关. Longest Increasing Subsequence : 求最大最小值 Perfect Squares : 求某个规模 ...

  6. 两个gif图片动画效果

    <div className="uploading-animation-tip-wrap"> <img src={require('~/shared/assets ...

  7. IDEA 导入 NodeJS 项目部署启动

    1.导入项目 2.添加模块 3.配置启动项 4.启动 5.备注 如果不明白,新建一个项目查看配置详情 原文地址:https://blog.csdn.net/tiankongzhichenglyf/ar ...

  8. rabbitmd

    一.前期准备   (1)条件:准备3台linux系统,确保能连到download.yunwei.edu   (2)编写yum源下载脚本: vim yum-repo.sh wget -O /etc/yu ...

  9. VBA子程序(十六)

    子程序(Sub Procedures,也叫子过程)与函数类似,但有一些差异. 子过程不需要有返回一个值,而函数可能会或可能不会有返回一个值. 子程序可以不用call关键字来调用. 子程序总是包含在Su ...

  10. nginx热加载、热升级、回滚

    修改完配置文件后使用 nginx -s reload 命令进行热加载 编译好新的 nginx 二进制文件后,运行nginx 开启nginx服务,然后使用 kill -USR2 新的nginx_mast ...