web worker 使用

web worker 是现代浏览器具有的可以处理密集型任务非常便利的解决方案,众所周知,JavaScript是单线程的(一个JavaScript引擎实例只能占用一个线程,线程由宿主环境提供而非JavaScript引擎,引擎只是占用了一个线程来执行任务),但是如果我们可以使用一个新的JavaScript引擎实例的话就可以在新的线程上去处理一些密集型、容易堵塞UI的任务。当前页面的JavaScript线程去处理有关UI与交互方面的任务从而提高页面流畅度。

如何使用 (Web) Worker

worker 是啥?可以理解为一个新的 JavaScript 引擎实例,既然是实例的话... 那不就是一个对象了吗,new 一个就好了呗【滑稽】。

const worker = new Worker(url);
// url 为 Worker 实例中运行的 js 的路径

实现当前页面与 worker 的通讯

由于 worker 与当面页面中的 JavaScript引擎 并非同一线程,并不能共享数据,数据之间需要通过 postMessage 来传递。就和当前页面中 iframe 使用很相似,不同的是 worker 中只运行 js。

// 页面中运行的 js
const worker = new Worker(url); worker.addEventLister('message', function(evt) {
console.log(evt.data);
}) worker.postMessage('from page.');
// worker.js
addEventLister('message', function(evt) {
console.log(evt.data);
}); postMessage('from worker.');

web Worker基本使用的更多相关文章

  1. JavaScript多线程之HTML5 Web Worker

    在博主的前些文章Promise的前世今生和妙用技巧和JavaScript单线程和浏览器事件循环简述中都曾提到了HTML5 Web Worker这一个概念.在JavaScript单线程和浏览器事件循环简 ...

  2. Web Worker javascript多线程编程(一)

    什么是Web Worker? web worker 是运行在后台的 JavaScript,不占用浏览器自身线程,独立于其他脚本,可以提高应用的总体性能,并且提升用户体验. 一般来说Javascript ...

  3. Web Worker javascript多线程编程(二)

    Web Worker javascript多线程编程(一)中提到有两种Web Worker:专用线程dedicated web worker,以及共享线程shared web worker.不过主要讲 ...

  4. 过段时间逐步使用HTML5新增的web worker等内容

    想来快2017年了,2013年前的手机应该很少有人用了,以后逐渐使用HTML5新增的高级API吧. 先把web worker的内容再熟悉一下,因为微软虚拟学院的'面向有经验开发人员的 JavaScri ...

  5. web Worker使js实现‘多线程’?

    大家都知道js是单线程的,在上一段js执行结束之前,后面的js绝对不会执行,那么为什么标题说js实现‘多线程’,虽然说加了引号,可是标题也不能乱写不是,可恶的标题党? 姑且抛开标题不说,先说我们经常会 ...

  6. HTML5:web socket 和 web worker

    a:hover { cursor: pointer } 做练习遇到了一个选择题,是关于web worker的,问web worker会不会影响页面性能?补习功课之后,答案是不会影响. 查阅了相关资料学 ...

  7. javascript 多线程Web Worker不引用外部js文件的方法

    最近在Android开发中 Webview通过调用JavascriptInterface的方式与App交互 在交互的过程中,有些App上的操作时间会比较长,Web中调用的话会造成程序假死的情况 于是想 ...

  8. HTML5 Web Worker的使用

    Web Workers 是 HTML5 提供的一个javascript多线程解决方案,我们可以将一些大计算量的代码交由web Worker运行而不冻结用户界面. 一:如何使用Worker Web Wo ...

  9. Web Worker 是什么鬼?

    前言 前端工程师们一定有过这样的体验,当一个页面加载了大量的 js 文件时,用户界面可能会短暂地"冻结".这很好理解,因为 js 是单线程的语言.我们再走的极端点,一段 js 中出 ...

  10. Web Worker

    写在前面 众所周知,JavaScript是单线程的,JS和UI更新共享同一个进程的部分原因是它们之间互访频繁,但由于共享同一个进程也就会造成js代码在运行的时候用户点击界面元素而没有任何响应这样的情况 ...

随机推荐

  1. C++_IO与文件4-简单文件的输入与输出

    通过键盘输入和屏幕输出被称为是控制台输入/输出: 更广义上讲控制台的输入/输出也是一种特殊的文件输入/输出: 当使用cin进行输入时,程序将输入视为一系列的字节,其中的每个字节都被解释成字符编码: 不 ...

  2. c++中map的基本函数

    c++中map的一些方法 begin() 返回指向map头部的迭代器     clear() 删除所有元素     count() 返回指定元素出现的次数     empty() 如果map为空则返回 ...

  3. WPF Hidden和Collapsed

    对于这两种设定,其实已经提示的很清楚了 Visibility="Hidden"不显示元素,但是在布局为元素保留空间 Visibility="Collapsed" ...

  4. jmeter发送邮件的模板

    <hr/> (本邮件是程序自动下发的,请勿回复!)<br/><hr/> 项目名称:$PROJECT_NAME<br/><hr/> 构建编号: ...

  5. GreenPlum 大数据平台--介绍

    一,GreenPlum 01,介绍: Greenplum是一种基于PostgreSQL的分布式数据库,其采用shared-nothing架构,主机.操作系统.内存.存储都是自我控制的,不存在共享. 官 ...

  6. java泛型中的各种限制

    java和其他语言一样,都支持泛型,包括泛型类和泛型方法,但是java的泛型比较特殊.因为java的泛型并不是在java诞生之初就加入的,在很长的一段时间里,java是没有泛型的,在需要泛型的地方,统 ...

  7. 随机森林(Random Forests)

    简单地看了一些入门的资料. 随机森林似乎和CART有些联系. 随机森林的算法步骤: 1. 利用自助法(Bootstrap)从原始训练集中生成k个自助样本集,每个自助样本集是每棵分类树的全部训练数据.自 ...

  8. C#异步编程模型

    什么是异步编程模型 异步编程模型(Asynchronous Programming Model,简称APM)是C#1.1支持的一种实现异步操作的编程模型,虽然已经比较“古老”了,但是依然可以学习一下的 ...

  9. JavaScript各类型变量和对象

    一.javascript支持的数据类型: var x=1 数字 var x=0.1   小数 var x=true/false bool var x="abc"      字符串 ...

  10. 二、MVC3+EF单表增删改查

    document 表为例 写入静态类 NorthwindDataProvider: Controller可直接调用:如 //获取document表全部数据 NorthwindDataProvider. ...