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. python系统编程（十）

    多线程-非共享数据 对于全局变量,在多线程中要格外小心,否则容易造成数据错乱的情况发生 1. 非全局变量是否要加锁呢? #coding=utf-8 import threading import ti ...

  2. Java RMI的轻量级实现 - LipeRMI

    Java RMI的轻量级实现 - LipeRMI 之前博主有记录关于Java标准库的RMI,后来发现问题比较多,尤其是在安卓端直接被禁止使用,于是转向了第三方的LipeRMI 注意到LipeRMI的中 ...

  3. asp.net缓存 （转）

    原文地址 http://www.cnblogs.com/knowledgesea/archive/2012/07/10/2530436.html 谢谢 一.缓存概念,缓存的好处.类型.         ...

  4. 小甲鱼Python视频课后答案（第一讲）---仅记录学习

    1.python是什么语言? Python是一种支持面向对象的解释性高级语言,属于脚本语言的一种. 2.IDLE是什么? IDLE是开发python程序的基本IDE(集成开发环境),具备基本的IDE的 ...

  5. HTML自学笔记

    HTML自学笔记 1.HTML Hyper Text Markup Language 超文本标记语言 超文本:比普通文本更加强大,可以添加各种样式 标记语言:通过一组标签来对内容进行描述. 标签:&l ...

  6. C10K问题

    转自:https://www.jianshu.com/p/ba7fa25d3590 C10K问题由来 随着互联网的普及,应用的用户群体几何倍增长,此时服务器性能问题就出现.最初的服务器是基于进程/线程 ...

  7. C++异常处理解析: 异常的引发(throw), 捕获(try catch)、异常安全

    前言: C++的异常处理机制是用于将运行时错误检测和错误处理功能分离的一 种机制(符合高内聚低耦合的软件工程设计要求),  这里主要总结一下C++异常处理的基础知识, 包括基本的如何引发异常(使用th ...

  8. NLP 第7章 文本向量化

  9. Dubbo接口压测

    在每年的双十一大促之前,除了全链路压测,还需要各个业务方对自己业务提供的核心接口进行单接口压测,以评判系统的稳定性和承压能力. 一.准备工作 环境准备:确保应用性能环境(perf)正常可用 压测接口梳 ...

  10. WPF双向数据绑定总结

    参考官方:https://docs.microsoft.com/zh-cn/dotnet/framework/wpf/data/data-binding-wpf 实例程序:https://files. ...