当在 HTML 页面中执行脚本(JS)时,页面的状态是不可响应的,直到脚本已完成。

通过使用Web Worker, 我们可以在浏览器后台运行Javascript, 而不占用浏览器自身线程。Web Worker可以提高应用的总体性能,并且提升用户体验。

1、在后台运行Javascript

一般来说Javascript和页面的UI会共用一个线程,所以当点击一个按钮开始运行Javascript后,在这段代码运行完毕之前,页面是无法响应用户操作的,换句话来说就是被“冻结”了。而这段代码可以交给Web Worker在后台运行,那么页面在Javascript运行期间依然可以响应用户操作。后台会启动一个worker线程来执行这段代码,用户可以创建多个worker线程。

所以你可以在前台做一些小规模分布式计算之类的工作,不过Web Worker有以下一些使用限制:

Web Worker无法访问DOM节点;

Web Worker无法访问全局变量或是全局函数;

Web Worker无法调用alert()或者confirm之类的函数;

Web Worker无法访问window、document之类的浏览器全局变量;

不过Web Worker中的Javascript依然可以使用setTimeout(),setInterval()之类的函数,也可以使用XMLHttpRequest对象来做Ajax通信。

2、专用线程dedicated web worker,以及共享线程shared web worker

当在 HTML 页面中执行脚 本(JS)时,页面的状态是不可响应的,直到脚本已完成。

通过使用Web Worker, 我们可以在浏览器后台运行Javascript, 而不占用浏览器自身线程。Web Worker可以提高应用的总体性能,并且提升用户体验。

1、在后台运行Javascript

一般来说Javascript和页面的UI会共用一个线程,所以当点击一个按钮开始运行Javascript后,在这段代码运行完毕之前,页面是无法响应用户操作的,换句话来说就是被“冻结”了。而这段代码可以交给Web Worker在后台运行,那么页面在Javascript运行期间依然可以响应用户操作。后台会启动一个worker线程来执行这段代码,用户可以创建多个worker线程。

所以你可以在前台做一些小规模分布式计算之类的工作,不过Web Worker有以下一些使用限制:

Web Worker无法访问DOM节点;

Web Worker无法访问全局变量或是全局函数;

Web Worker无法调用alert()或者confirm之类的函数;

Web Worker无法访问window、document之类的浏览器全局变量;

不过Web Worker中的Javascript依然可以使用setTimeout(),setInterval()之类的函数,也可以使用XMLHttpRequest对象来做Ajax通信。

2、专用线程dedicated web worker,以及共享线程shared web worker

Dedicated web worker:随当前页面的关闭而结束;这意味着Dedicated web worker只能被创建它的页面访问。

Shared web worker:可以被多个页面访问。在Javascript代码中,“Work”类型代表Dedicated web worker,而“SharedWorker”类型代表Shared web worker。

在绝大多数情况下,使用Dedicated web worker就足够了,因为一般来说在web worker中运行的代码是专为当前页面服务的。

而在一些特定情况下,web worker可能运行的是更为普遍性的代码,可以为多个页面服务。在这种情况下,我们会创建一个共享线程的Shared web worker,它可以被与之相关联的多个页面访问,只有当所有关联的的页面都关闭的时候,该Shared web worker才会结束。相对Dedicated web worker,shared web worker稍微复杂些。

3、Web Worker使用XMLHttpRequest与服务端通信

有些情况下,web worker还需要与服务器进行交互。比如页面可能需要处理来自数据库中的信息,我们就需要使用Ajax技术与服务器交互。

4、通过Error事件捕捉错误信息

当我们把越来越复杂的逻辑加到Web Worker里时,错误处理机制是必不可少的。而Web Worker恰恰提供了error事件,供开发者捕捉错误信息。

Worker对象可以绑定error事件;而且evt对象中包含错误所在的代码文件(evt.filename)、错误所在的代码行数(evt.lineno)、以及错误信息(evt.message)。

5、通过terminate()方法终止Web Worker

有些情况下,我们可能需要强制终止执行中的Web Worker。Worker对象提供了terminate()来终止自身执行任务,被终止的Worker对象不能被重启或重用,我们只能新建另一个Worker实例来执行新的任务。

Dedicated Web Worker 和 Shared Web Worker相关推荐

  1. 下一代 Web 应用模型 —— Progressive Web App (PWA)

    今年 9 月份的时候,<程序员>杂志社就邀请我写一篇关于 PWA 的文章.后来花式拖稿,拖过了 10 月的 QCon,11 月的 GDG DevFest,终于在 12 月把这篇长文熬了出来 ...

  2. 【思考】PHP——成也Web,败也Web

    背景 早年我并不知道Python写的Web应用是怎么部署的,总觉得像PHP.ASP一样,仅仅提供一个语言级别的执行模块,直接嵌入Web服务器运行,甚至于直接对外提供带扩展名的URL都是自然而然的事情. ...

  3. java web 速成_渐进式Web应用程序:速成课程

    java web 速成 Progressive Web Apps (PWAs) try to overlap the worlds of the mobile web apps and native ...

  4. 下一代 Web 应用模型 — Progressive Web App

    刚开始接触Progressive Web App,作为一名前端感觉这个挺有趣的,就想深入了解一下,下面这篇是转载自黄玄的一篇博客,算是简单了解一下. 今年 9 月份的时候,<程序员>杂志社 ...

  5. 下一代 Web 应用模型 —— Progressive Web App

    今年 9 月份的时候,<程序员>杂志社就邀请我写一篇关于 PWA 的文章.后来花式拖稿,拖过了 10 月的 QCon,11 月的 GDG DevFest,终于在 12 月把这篇长文熬了出来 ...

  6. 基于 Web 引擎技术的 Web 内容录制

    随着基于WebRTC技术的Web应用快速成长,记录web在线教育.视频会议等场景的互动内容并对其准确还原越来越成为一项迫切需求.在主流浏览器中,通常基础设施部分已实现了页面渲染结果的采集及编码.开发者 ...

  7. RTE 大会回顾 | 基于 Web 引擎技术的 Web 内容录制

    随着基于WebRTC技术的Web应用快速成长,记录web在线教育.视频会议等场景的互动内容并对其准确还原越来越成为一项迫切需求.在主流浏览器中,通常基础设施部分已实现了页面渲染结果的采集及编码.开发者 ...

  8. 3supervisor启动worker源码分析-worker.clj

    supervisor启动worker源码分析-worker.clj supervisor通过调用sync-processes函数来启动worker,关于sync-processes函数的详细分析请参见 ...

  9. supervisor启动worker源码分析-worker.clj

    supervisor通过调用sync-processes函数来启动worker,关于sync-processes函数的详细分析请参见"storm启动supervisor源码分析-superv ...

最新文章

  1. java里面有控制器吗_java怎么运行控制器里的类 java控制台输入类以及
  2. pythonturtle画房子_用python的turtle模块实现给女票画个小心心
  3. C# Winform下一个热插拔的MIS/MRP/ERP框架14(自动更新)
  4. 打印对象和toString方法
  5. Android studio真机调试
  6. 学习Javascript的书籍(转)
  7. python比较文件的修改时间,如何比较python中两个文件的修改日期?
  8. 拼多多api接口php算法,PHP 调用 拼多多 API 模板
  9. Linux 命令汇总!【珍藏版】
  10. Java创建型设计模式之简单工厂,工厂方法,抽象工厂
  11. 联机饥荒一直显示启动服务器,饥荒联机版启动服务器时遇到一些麻烦 | 手游网游页游攻略大全...
  12. 微信公众号开发接入_官方文档
  13. html thead隐藏,HTML的thead标签
  14. win10移动热点,手机无法连接或连接超时
  15. 基于形状图像检索的形状描述符评估——18.07.30
  16. ftp上传文件时出现 550 Permission denied,不是用户权限问题
  17. SpringCloud学习(十八):Config分布式配置中心的介绍与搭建
  18. WFU校赛题解 B、C、F
  19. iOS培训机构该如何选择之浅析
  20. Linux MySQL数据库的备份

热门文章

  1. .NET web开发入门小例子
  2. [附源码]java毕业设计ssm新冠疫苗预约接种信息管理
  3. react如何遍历并比较_在React中遍历JSON
  4. P1414 又是毕业季II(数论)
  5. OpenSSL在Win10环境下的安装
  6. java iterable stream,在Java中将Iterable转换为Stream
  7. hadoop【大象】慕课笔记
  8. 【JS】中parentNode,parentElement,childNodes,children之间的区别
  9. 在每天下午五点使用计算机结束后,电脑辐射对人的皮肤有什么影响
  10. 区块链BaaS云服务(26)永旗超级账本VBH