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. CDQ分治入门 + 例题 Arnooks's Defensive Line [Uva live 5871]

    CDQ分治入门 简介 CDQ分治是一种特别的分治方法,它由CDQ(陈丹琦)神犇于09国家集训队作业中首次提出,因此得名.CDQ分治属于分治的一种.它一般只能处理非强制在线的问题,除此之外这个算法作为某 ...

  2. ES6 原始类型 Symbol

    1. 创建Symbol (没有字面格式) Symbol是原始值,没有构造函数 Symbol接受一个可选参数,可以让你添加一段文本描述即将创建的Symbol,这段描述不可用于属性访问,以便于代码阅读和调 ...

  3. 自己遇到过的出现java.lang.StackOverflowError的原因

    public static JSONArray geth24Weather(String result) {//获取当天24小时以及第二天的天气结果对象        JSONObject fromO ...

  4. JS中原始类型Null和Undefined

    Undefined类型只有一个值,即undefined.当声明的变量还未被初始化时,变量的默认值为undefined.Null类型也只有一个值,即null.null用来表示尚未存在的对象,常用来表示函 ...

  5. 3ds max学习笔记（六）-- 基本操作（建模前奏）

    1.界面设置 在3ds Max的版本的界面中,默认是较深.若需要切换至较亮的界面,步骤: 执行“自定义”菜单,选择“加载自定义用户界面方案”从弹出的界面中选择样式文件,单击“打开”即可: 注:“amg ...

  6. Vue相关开源项目库汇总(史上最全)

    偶尔在网上看到的,先保存着,以备不时之需 https://www.jianshu.com/p/e37f4dde49a2 better-scroll:是一款重点解决移动端(未来可能会考虑 PC 端)各种 ...

  7. JS的document.anchors函数使用示例

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. 【模拟】[NOIP2011]铺地毯[c++]

    题目描述 为了准备一个独特的颁奖典礼,组织者在会场的一片矩形区域(可看做是平面直角坐标系的第一象限)铺上一些矩形地毯,一共有n张地毯,编号从 1 到n.现在将这些地毯按照编号从小到大的顺序平行于坐标轴 ...

  9. JSP显示页面和数据库乱码

    页面 和 数据库编码都是UTF-8,但就是奇怪. 指定Tomcat的编码为UTF-8 就行了

  10. 搭建SpringCloud-Eureka 注册中心以及服务提供与调用 快速了解 SpringCloud-Eureka

    原文地址:  搭建SpringCloud-Eureka 注册中心以及服务提供与调用   纸上得来终觉浅,绝知此事要躬行啊~果然看着很easy,自己搞起来就是各种坑~各位看官,容我慢慢道来~ 关于spr ...