1. 为什么使用Web Workers API

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

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

2. 应用

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

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

2. 新建Worker实例

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

简单了解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. Struts笔记2

    Struts2-配置文件result元素 作用:为动作指定结果视图 name属性:逻辑视图的名称,对应着动作方法的返回值.默认值是success type属性:结果类型,指的就是用什么方式转到定义的页 ...

  2. [C++] 习题 2.15 实现简单环形队列

    目录 前置技能 环形队列 具体实现 设计一个环形队列,用front和rear分别作为队头和队尾指针,另外用一个tag表示队列是空 ( 0 ) 还是不空 ( 1 ),这样就可以用front==rear作 ...

  3. python第三天---列表的魔法

    # list 列表 # 中括号括起来,逗号分隔每个元素, # 列表中可以是数字字符串.列表等都可以放进去 list1 = [123, "book", "手动", ...

  4. 搭建hexo静态博客

    使用hexo搭建博客,并将博客部署到github 需要的工具 Node.js Git 一个Github账号 正式开始 在任意目录下新建一个文件夹,如blog,在该文件夹下右键打开git bash he ...

  5. CentOS6.8 克隆

    克隆 克隆前,先将上面安装好并且设置好的系统关机 (1) 右键centos -->管理->克隆->下一步->下一步->完整克隆 ->克隆名称起名有意义点就行-> ...

  6. netty--buffer分配策略

    AdaptiveRecvByteBufAllocator 动态分配buffer大小的类. 如果前一次读取完全填满了分配的缓冲区,它将逐渐增加预期的可读字节数.(增加的方式:初始化类的时候,会预先设置好 ...

  7. 利用 nodejs 解析 m3u8 格式文件,并下 ts 合并为 mp4

    利用 nodejs 解析 m3u8 格式文件,并下 ts 合并为 mp4 以前看视频的时候,直接找到 video标签,查看视频地址,然后下载下来.. 后来发现,好多 video 标签打开元素审查,如下 ...

  8. 采用二进制方式安装K8S集群,版本etcd-v3.3.10,flannel-v0.11.0,kubernetes-server-linux-amd64

    官方提供的几种Kubernetes部署方式 minikube Minikube是一个工具,可以在本地快速运行一个单点的Kubernetes,尝试Kubernetes或日常开发的用户使用.不能用于生产环 ...

  9. Qt界面阴影效果(背景图片)

    实现原理: 1.顶层窗体设置为无边框,背景半透明 2.顶层窗体的子窗体使用带有阴影的图片做背景 代码: //CMainWindow.h#ifndef CMAINWINDOW_H#define CMAI ...

  10. ifconfig介绍

    [root@controller01 ~]# ip addr 1: lo: <LOOPBACK,UP,LOWER_UP> mtu 65536 qdisc noqueue state UNK ...