web worker 简介

通常，浏览器执行某段程序的时候会阻塞直到运行结束后在恢复到正常状态，而HTML5的Web Worker就是为了解决这个问题。通过worker线程完成密集计算，避免程序的阻塞和页面的卡顿(fps过低)

示例

用fibonacci数列来模拟测试

worker-test.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>测试 web worker</title>

</head>

<body>

    <script>

        function fibonacci(n) {

            return n < 2 ? n : arguments.callee(n - 1) + arguments.callee(n - 2);

        }

        function testNoWorker() {

            let start = Date.now();

            fibonacci(38);

            let end = Date.now();

            console.log(end - start); // wait a long time..

        }

        function testUseWorker() {

            let start = Date.now();

            let worker = new Worker('worker.js');

            worker.postMessage(38);

            worker.addEventListener('message', function (event) {

                let end = Date.now();

                console.log('worker result: ', end -start);

            });

            console.log('can do other jobs, when worker is computing');

        }

        testNoWorker();

        testUseWorker();

    </script>

</body>

</html>

worker.js

function fibonacci(n) {

    return n < 2 ? n : arguments.callee(n-1) + arguments.callee(n-2);

}

self.addEventListener('message', function (event) {

    let result = fibonacci(event.data);

    self.postMessage(result);

});

// 可用 setTimeout , setInterval

setTimeout(() => {

    console.log('timeout..');

}, 100);

setInterval(() => {

    console.log('setInterval...');

}, 200);

// 可发起ajax

fetch('data.json').then(res => res.json()).then(data => {console.log(data, '<--json data')});

// 可访问 location， navigator

console.log(location);

console.log(navigator);

// worker.js的执行上下文为 self (worker实例),

// self上的属性和方法可直接调用

console.log(typeof addEventListener);

console.log(typeof postMessage);

假设主页面需要多次执行耗时的操作(如: fibonacci), 可如下用worker来异步执行.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>测试 实例化多个 web worker</title>

</head>

<body>

    <script>

        function fibonacci(n) {

            let start = Date.now();

            let worker = new Worker('worker.js');

            worker.addEventListener('message', function (event) {

                let end = Date.now();

                console.log('worker result: ', end - start);

            });

            worker.postMessage(n);

        }

        /* 同时跑多个worker, 会降低每个worker线程的性能；但总比阻塞页面要好 */

        fibonacci(38);

        console.log('after one');

        fibonacci(38);

        console.log('after two');

        fibonacci(38);

        console.log('after three');

        console.log('can handle other jobs..');

    </script>

</body>

</html>

跨域与脚本引入

在主页面实例化worker, new Worker('/url/to/worker.js') worker脚本必须和主页面同域；在worker脚本中，可以 self.importScripts('url/to/script.js') 导入任何域的脚本, 多个 self.importScripts() 是顺序同步加载的

worker的方法

  • worker.terminate() 终止worker线程

限制

  • 不能访问主页面的全局变量和函数，没有 window, document; 但可访问 location, navigator
  • 支持setTimeout, setInterval, 可发起ajax
  • worker不能访问和操作dom
  • postMessage传的数据都会被复制，不会指向同一个内存地址

web worker 简介的更多相关文章

  1. JS线程模型&Web Worker

    js线程模型 客户端javascript是单线程,浏览器无法同时运行两个事件处理程序 设计为单线程的理论是,客户端的javascript函数必须不能运行太长时间,否则会导致web浏览器无法对用户输入做 ...

  2. Web Worker

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

  3. 深入HTML5 Web Worker应用实践：多线程编程

    HTML5 中工作线程(Web Worker)简介 至 2008 年 W3C 制定出第一个 HTML5 草案开始,HTML5 承载了越来越多崭新的特性和功能.它不但强化了 Web 系统或网页的表现性能 ...

  4. 深入 HTML5 Web Worker 应用实践：多线程编程

    深入 HTML5 Web Worker 应用实践:多线程编程 HTML5 中工作线程(Web Worker)简介 至 2008 年 W3C 制定出第一个 HTML5 草案开始,HTML5 承载了越来越 ...

  5. web worker的介绍和使用

    目录 简介 Web Workers的基本概念和使用 Web Workers的分类 worker和main thread之间的数据传输 简介 什么是web worker呢?从名字上就可以看出,web w ...

  6. JavaScript多线程之HTML5 Web Worker

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

  7. Web Worker javascript多线程编程（一）

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

  8. Web Worker javascript多线程编程（二）

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

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

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

随机推荐

  1. [模板][P4719]动态dp

    Description: 给定一棵n个点的树,点带点权. 有m次操作,每次操作给定x,y,表示修改点x的权值为y. 你需要在每次操作之后求出这棵树的最大权独立集的权值大小. Hint: \(n,m&l ...

  2. C++程序设计方法2：函数运算符重载

    函数运算符()重载 函数运算符()也能重载,它使得对象看上去像是一个函数名 ReturnType operator() (Parameters) { ...... } ClassName Obj; O ...

  3. 25条div+CSS编程提醒及小技巧整理

    1.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值. 2.同一个的class选择符可以在一个文档中重复出现,而id选择符却只能出现一次:对一个标签同时使用clas ...

  4. db2 runstats和reorg

    当数据库里某张表上有大量插入操作时,需要在表上做 RUNSTATS 命令保证数据库掌握准确的统计信息. 当数据库里某张表中的记录变化很大时(大量插入.删除.更新操作),需要在表上做 REORG 和 R ...

  5. linux命令之kill篇

    作业四:查询firewall进程,然后杀死 [root@localhost 桌面]# ps -aux |grep firewall root        772  0.0  2.0 327912 2 ...

  6. H5C301

    标题H5C301 1.html5 h5最新版本.所有主流浏览器都支持h5.但仅ie9及以上支持h5 改变了用户与文档的交互方式:多媒体 新增了其他的特性:语义,本地存储,网页多媒体 抛弃了不合理的标签 ...

  7. Servlet(5)—ServletRequest接口和ServletResponse接口

    ServletRequest接口: 使用ServletRequest接口创建对象,用于使客户端请求信息对Servlet可用,创建的对象作为参数传递之Servlet的Service() ServletR ...

  8. [赶集网] 【MySql】赶集网mysql开发36条军规

    [赶集网] [MySql]赶集网mysql开发36条军规 (一)核心军规(1)不在数据库做运算   cpu计算务必移至业务层:(2)控制单表数据量   int型不超过1000w,含char则不超过50 ...

  9. CSS3-loading动画

    (二) 上次分享了四个CSS3的加载动画,今天继续(标题接上一次). 在线demo:http://liyunpei.xyz/loading.html   (持续更新) 请注意:代码中的关键帧动画有的用 ...

  10. 02、创建RDD（集合、本地文件、HDFS文件）

    Spark Core提供了三种创建RDD的方式,包括:使用程序中的集合创建RDD:使用本地文件创建RDD:使用HDFS文件创建RDD. 1.并行化集合 如果要通过并行化集合来创建RDD,需要针对程序中 ...