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. 读《31天学会CRM项目开发》记录3 - CRM解决方案

    一. 二.CRM系统设计方案 CRM技术部分设计方案主要包括:服务器端设计方案.客户端设计方案.数据库设计方案.应用系统框架设计方案. 1.服务器端设计方案 配备平台:IIS7和SQL Server2 ...

  2. DP专题：划分数问题

    一.这个专题有什么用 练练DP 练练组合数学 ...... 二.正题 此类问题有如下几种形态: 1. 将n划分成若干正整数之和的划分数.2. 将n划分成k个正整数之和的划分数.3. 将n划分成最大数不 ...

  3. select 多选 （EasyUI）

    <script type="text/javascript" src="/EasyUI/jquery.min.js"></script> ...

  4. PAT Basic 1008

    1008 数组元素循环右移问题 (20 分) 一个数组A中存有N(>0)个整数,在不允许使用另外数组的前提下,将每个整数循环向右移M(≥0)个位置,即将A中的数据由(A​0​​A​1​​⋯A​N ...

  5. UVALive - 4885 Task 差分约束

    Task 题目连接: https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&page ...

  6. 模板-gcd

    GCD int gcd(int a, int b) { return b == 0 ? a : gcd(b, a%b); } EXGCD void ex_gcd(int a, int b, int & ...

  7. week 10 blog

    一.Iterations : 1.do...while : 创建执行指定语句的循环,直到测试条件评估为false.在执行语句后评估条件,导致指定语句至少执行一次. 例子:在以下示例中,do...而循环 ...

  8. fopen_s遇到的一个问题

    今天使用公司代码的日志模块记录程序运行的相关信息,发现日志总是只有两条记录,即程序启动和结束,别的都没有.跟踪了很久,终于发现是日志输出模块被我修改了一个地方:把fopen改成了fopen_s,毕竟报 ...

  9. IDEA调试SpringMvc项目时，出错：java.lang.ClassNotFoundException: org.springframework.web.context.ContextLoaderListener，解决办法

    具体报错信息如下图所示: 解决方法:File > Project Structure > Artifacts > 在右侧Output Layout右击项目名,选择Put into O ...

  10. SpringBoot+SpringDataJPA项目中使用EntityManager执行自定义复杂SQL的方法

    import javax.annotation.Resource; import javax.persistence.EntityManager; @Resource private EntityMa ...