首页 > web前端 > H5教程 > 正文

HTML5 Web Worker的介绍(附示例)

转载 2019-03-15 15:10:17 0 1200
赞助会员专享特权

本篇文章给大家带来的内容是关于HTML5 Web Worker的介绍(附示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

浏览器中的Web Worker

背景介绍

我们都知道JavaScript这个语言在执行的时候是采用单线程进行执行的,也就是说在同一时间只能做一件事,这也和这门语言有很大的关系,采用同步执行的方式进行运行,如果出现阻塞,那么后面的代码将不会执行,HTML5则提出了web Worker标准,表示JavaScript允许有多个线程,但是子线程完全受主线程的控制,子线程不能操作DOM,只有主线程可以操作DOM,所以以主线程为主的单线程执行原理成了JavaScript这门语言的核心。

进程与线程的区别

根本区别:进程是操作系统资源分配的基本单位,而线程是任务调度和执行的基本单位。
在操作系统中能同时运行多个进程(程序);而在同一个进程(程序)中有多个线程同时执行。

兼容性

3265870119-5c8a4aa6a212f_articlex.png

web worker是什么?

简单来说,其实就是在Javascript单线程执行的基础上,开启一个子线程,进行程序处理,而不影响主线程的执行,当子线程执行完毕之后再回到主线程上,在这个过程中并不影响主线程的执行过程。

举个栗子

传统情况下,执行下面的代码后,整个页面都会被冻结,由于javascript是单线程处理,如下代码已经完全组塞了后续的执行

while(1){}

如果换一种方式,我们通过开启一个新的线程来执行这段代码,将他放在一个单独的worker.js文件中,在主线程执行以下代码,则可以避免这种情况。

var worker = new Worker("worker.js")

Web Worker的用法

判断当前浏览器是否支持web worker

if (typeof (Worker) != "undefined") { //浏览器支持web worker  
    if (typeof (w) == "undefined") { //w是未定义的,还没有开始计数        
        w = new Worker("webworker.js"); //创建一个Worker对象,利用Worker的构造函数  
    }
    //onmessage是Worker对象的properties  
    w.onmessage = function (event) { //事件处理函数,用来处理后端的web worker传递过来的消息  
        // do something
    };
} 
else { // 浏览器不支持web worker
    // do something
}

API

①创建新的Worker

var worker = new Worker("worker.js")

②传递参数

worker.postMessage()

③接收消息

worker.onMessage = function(msg){}

④异常处理

worker.onerror = function(err){}

⑤结束worker

worker.terminate()

⑥载入工具类函数

importScripts()

Worker作用域

当我们创建一个新的worker时,该代码会运行在一个全新的javascript的环境中(WorkerGlobalScope)运行,是完全和创建worker的脚本隔离,这时我们可以吧创建新worker的脚本叫做主线程,而被创建的新的worker叫做子线程。
WorkerGlobalScope是worker的全局对象,所以它包含所有核心javascript全局对象拥有的属性如JSON等,window的一些属性,也拥有类似于XMLHttpRequest()等。
但是我们所开启的新的worker也就是子线程,并不支持操作页面的DOM。

线程间的通讯是传值而不是传地址

主线程与子线程数据通信方式有多种,通信内容,可以是文本,也可以是对象。需要注意的是,这种通信是拷贝关系,即是传值而不是地址,子线程对通信内容的修改,不会影响到主线程。事实上,浏览器内部的运行机制是,先将通信内容串行化,然后把串行化后的字符串发给子线程,后者再将它还原。

JavaScript中的数据类型存放原理以及传递规则

1453967017-5c8a4f1b54a4d_articlex.png

共享线程(SharedWorker)

共享线程是为了避免线程的重复创建和销毁过程,降低了系统性能的消耗,
共享线程SharedWorker可以同时有多个页面的线程链接。
使用SharedWorker创建共享线程,也需要提供一个javascript脚本文件的URL地址或Blob,该脚本文件中包含了我们在线程中需要执行的代码,如下:

var worker = new SharedWorker("sharedworker.js");

共享线程也使用了message事件监听线程消息,但使用SharedWorker对象的port属性与线程通信如下:

worker.port.onmessage = function(msg){};

同时我们也可以使用SharedWorker对象的port属性向共享线程发送消息如下:

worker.port.postMessage(msg);

运行原理

生命周期

①当一个web worker的文档列表不为空的时候,这个web worker会被称之为许可线程。
②当一个web worker的文档列表中的任何一个对象都是处于完全活动状态的时候,这个web worker会被称之为需要激活线程。
③当一个web worker是许可线程并且拥有计数器或者拥有数据库事务或者拥有网络连接或者它的web worker列表不为空的时候,这个web worker会被称之为受保护的线程。
④当一个web worker是一个非需要激活线程同时又是一个许可线程的时候,这个web worker会被称之为可挂起线程。

以webKit为例加载并执行worker的过程

1031074393-5c8a5061f2e10_articlex.png

应用

可以做什么:

1.可以加载一个JS进行大量的复杂计算而不挂起主进程,并通过postMessage,onmessage进行通信
2.可以在worker中通过importScripts(url)加载另外的脚本文件
3.可以使用 setTimeout(), clearTimeout(), setInterval(), and clearInterval()
4.可以使用XMLHttpRequest来发送请求
5.可以访问navigator的部分属性

不可以做什么:

1.不能跨域加载JS
2.worker内代码不能访问DOM
3.各个浏览器对Worker的实现不大一致,例如FF里允许worker中创建新的worker,而Chrome中就不行
4.不是每个浏览器都支持这个新特性

以上就是HTML5 Web Worker的介绍(附示例)的详细内容,更多请关注php中文网其它相关文章!

php中文网最新课程二维码
  • 相关标签:html5 javascript
  • 本文转载于:segmentfault,如有侵犯,请联系删除
  • 相关文章


  • HTML5中video标签如何使用
  • html5精选特效代码分享(收藏)
  • 什么是html5技术
  • HTML5画布如何设置字体颜色?(代码示例)
  • HTML5 Canvas绘图之drawImage() 方法的详细介绍(代码示例)
  • HTML5 Web Worker的介绍(附示例)
  • 网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
    独孤九贱(5)_ThinkPHP5视频教程

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架常识开始,将...

    独孤九贱(4)_PHP视频教程

    独孤九贱(4)_PHP视频教程

    江湖传言:PHP是世界上最好的编程语言。真的是这样吗?这个梗究竟是从哪来的?学会本课程,你就会明白了。 PHP中文网出品的PHP入门系统教学视频,完全从初学者的角度出发,绝不玩虚的,一切以实用、有用...

    独孤九贱(1)_HTML5视频教程

    独孤九贱(1)_HTML5视频教程

    《php.cn原创html5视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了HTML知识。 ...

    ThinkPHP5实战之[教学管理系统]

    ThinkPHP5实战之[教学管理系统]

    本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    PHP入门视频教程之一周学会PHP

    PHP入门视频教程之一周学会PHP

    所有计算机语言的学习都要从基础开始,《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术,是学习PHP必须掌握的内容,任何PHP项目的实现都离不开这部分的内容,通...

    作者信息

    不言

    认证0级讲师

    最近文章
    编程是什么? 1091
    查找是ctrl加什么? 687
    剪切快捷键ctrl加什么? 1666

    相关视频教程

  • html5教程:六小时玩转js与字符串视频教程-千锋教育 html5教程:六小时玩转js与字符串视频教程-千锋教育
  • HTML5新特性基础视频教程 HTML5新特性基础视频教程
  • 野秀堂HTML5+CSS3视频教程 野秀堂HTML5+CSS3视频教程
  • 2018前端入门_HTML5 2018前端入门_HTML5
  • HTML5 Canvas 动画实战教程 HTML5 Canvas 动画实战教程
  • html5开发实战之百度外卖手机站前端制作 html5开发实战之百度外卖手机站前端制作
  • 相关视频章节