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++_代码重用4-多重继承

    继承使用时要注意,默认是私有派生.所以要公有派生时必须记得加关键字Public. MI(Multi Inheritance)会带来哪些问题?以及如何解决它们? 两个主要问题: 从两个不同的基类继承同名 ...

  2. HDU - 5050 (大数二进制gcd)

    It's time to fight the local despots and redistribute the land. There is a rectangular piece of land ...

  3. eclipse 安装 scala

    1.官网下载地址 http://scala-ide.org/download/current.html 目前最新的版本 http://download.scala-ide.org/sdk/lithiu ...

  4. 实现Java程序跨平台运行十二个注意事项

    [转自] http://blog.chinaunix.net/uid-20550186-id-1927257.html 使用Java语言编写应用程序最大的优点在于"一次编译,处处运行&quo ...

  5. h5列表页的性能优化

    //0.还原状态 caoke.loading=false $(".loadbtn").text("点击加载更多") //1 还没有任何数据的情况 if(data ...

  6. 人生苦短,我用pycharm

    一.安装 1.首先到官网上下载正版,然后点击安装,只需要更改下面一个地方即可 2.激活码或者帐号的话,可以去百度搜,也可以去某宝买,也就3块钱(一年),不建议使用破解版,如果你真的差这三块钱的话,你还 ...

  7. PIE SDK地图图层渲染方案管理

    1. 功能简介 在数据种类较多.渲染规则复杂的情况下,逐个设置其渲染方式是一件繁琐的工作.PIE SDK提供了一种省力省心的办法, PIE SDK提供栅格和矢量数据渲染方案的打开与保存.能够将配色方案 ...

  8. 使用nodejs 访问mongodb

    我使用了 express 框架 目录结构 db.js 文件 function connectionDB(hostname, port) { //注释地方暂时没有使用.是把官方代码照抄下来 // var ...

  9. mysql limit查询(分页查询)探究

    MySQL的Limit子句 LIMIT offset,length Limit子句可以被用于强制 SELECT 语句返回指定的记录数.Limit接受一个或两个数字参数.参数必须是一个整数常量.如果给定 ...

  10. 九度oj题目1385:重建二叉树

    题目1385:重建二叉树 时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:4419 解决:1311 题目描述: 输入某二叉树的前序遍历和中序遍历的结果,请重建出该二叉树.假设输入的前序遍历和 ...