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. LINUX文件及目录管理命令基础

    Linux命令行组成结构 Linux命令结构 在Linux中一切皆文件,一切皆命令! 命令提示符: [root@tt ~]# [xiaohui@tt ~]$ Linux命令行常用快捷键 ctrl + ...

  2. 基于layer简单的弹层封装

    /** * 产生长度为32的Guid字符串 */ function getGuid32() { var rt_str = String.fromCharCode(65 + Math.floor(Mat ...

  3. NodeJS 模块&函数

    NodeJS 模块&函数 nodejs的多文件操作通过模块系统实现,模块和文件一一对应.文件本身可以是javascript代码.JSON或编译过的C/C++扩展 基本用法 nodeJS通过ex ...

  4. NHibernate查询优化的相关资料

    一.http://www.cnblogs.com/dddd218/archive/2009/09/01/1557640.html 1.立即加载(lazy=false)并不能在所有情况下都会减少SQL语 ...

  5. 【贪心】[hdu1052]Tian Ji -- The Horse Racing(田忌赛马)[c++]

    Tian Ji -- The Horse Racing Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java ...

  6. HTML 回顾整理

    <html>标签:定义HTML文档 <body>标签:定义文档主体 <h1> - <h6> 标签:定义HTML标题 <hr> 标签:创建水平 ...

  7. pygame-KidsCanCode系列jumpy-part2-加速度与摩擦力

    上一节,我们整理了一个游戏开发的新框架(即:Game类),本节将运用这个框架,实现基本的加速度及摩托力效果. 先定义游戏的精灵(下面代码命名为sprites.py) from part_02.sett ...

  8. ES5, ES6, ES2016, ES.Next: What's going on with JavaScript versioning?

    JavaScript has a strange naming history. For its initial release in 1995 as part of Netscape Navigat ...

  9. SharePoint REST 服务获取讨论版问题

    前言 最近,有这么个需求,需要获取讨论版里的问题,然后汇总,这里就考虑用REST服务了. 1.我们先创建这么一个讨论版列表,然后添加一些问题,如下图: 2.然后需要开发REST服务代码了,如下图: 3 ...

  10. 通过Tag标签回退版本修复bug

    tag是对历史一个提交id的引用,如果理解这句话就明白了使用git checkout tag即可切换到指定tag,例如:git checkout v0.1.0 切换到tag历史记录会处在分离头指针状态 ...