Web Workers 介绍

Web Workers 是个啥

有时候,我们写的脚本需要执行一些耗时的大计算量的操作。在脚本执行过程中,浏览器会出现冻结用户界面的情况(用户对页面进行操作,但浏览器没有响应)。

为什么会出现这种情况呢?因为浏览器响应用户的操作和执行脚本是在一个进程中的,脚本在执行的过程中,就没办法响应用户的操作,so sad。

那怎么避免出现这种情况呢?以前我的做法是,将大计算的操作分成若干个子操作,每个子操作都在 setTimeout 中。用 setTimeout 是为了让浏览器在每个子操作执行完后,会有一小段时间来响应用户的操作。但即使这样做,也不一定能解决问题。在有些情况下,可以让服务器来做计算。

换个思路,如果能让耗时的大计算量的操作在浏览器的后台的一个独立进程中执行呢?这时候,就该 Web Workers 出场啦~

Web Workers 指的是可以让脚本文件在浏览器后台(独立线程)独立运行的技术。因为 Worker 是在浏览器创建的独立线程里运行的,因此,即使在 Worker 中运行再复杂的任务也不会冻结浏览器的用户界面。

Worker 的使用场景

  • 执行一些大计算量的操作
  • 异步加载资源

使用 Worker 的注意点

在 Worker 中,其上下文是 DedicatedWorkerGlobalScope,而不是 Window。DedicatedWorkerGlobalScope 中只支持很一小部分与 DOM 相关的 API。DedicatedWorkerGlobalScope 中所有的 API 见这里

简单了说,就是 Worker 不能进行 DOM 操作。不支持 alert,console 等。创建 Worker 的页面必须是和 Worker 文件是同域的。

Web Worker 的类型

Web Worker 分为 DedicatedWorker 和 SharedWorker。本文下面介绍的是 DedicatedWorker。本文中指的 Web Worker 指的是 DedicatedWorker。对 SharedWorker 感兴趣的见这里

用法

创建 Worker

var worker = new Worker('worker.js');//必须是同域的

信息通信

主页面

var worker = new Worker('worker.js');
worker.postMessage(msg);//主页面向worker发消息。msg可以是对象,字符串之类。

worker.js

onmessage = function(evt) {// 处理主页面发来的消息
    postMessage('reveive data ' + evt.data + 'from page');// 向主页面发消息
}

终止 Web Workers

worker.terminate();

完整demo见这里

更多的demo见这里

Web Workers API

浏览器兼容性

支持的浏览器 IE 10+,Firefox,Chrome。更多见Can I Use

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Web 前端菜鸟源码阅读列表

    阅读优秀源码的好处有好多,如能学习一些技术知识,编码技巧,组织代码的方式,提高理解能力等等。

    Joel
  • 元素的垂直居中的方法

    Joel
  • HTML相关的面试题

    在浏览器中有三种渲染模式: 怪癖模式(quirks mode),准标准模式(almost standards mode)和标准模式(standards mode...

    Joel
  • [Flutter Widget] TabBar

    TabBar在客户端的表现形式是一般展示在appBar的下面,做同一级别不同类型界面的展示工作。

    flyou
  • 使用React和Node.js制作音乐类App的一次总结

    Peter谭金杰
  • 2016年那些看似不靠谱的云计算预测,有哪些成真了?|深度

    作者:T客汇 杨丽 关键词:云计算,数据,分析 网站:www.tikehui.com 核心提示:2016年已经过去大半,云计算市场也发展得风生水起,Tablea...

    人称T客
  • 亚马逊云平台孵化器:跟创业小伙伴一起玩

    [在对亚马逊AWS在中国业务发展的评估中,除了市场的业绩表现外,有多少人尝试使用公有云服务,是否在持续地使用是其中一个重要的考核指标] “听风平安卫士”是一家集...

    静一
  • Linux系统下搭建LNMP环境

    “每个理性的IT人士都置顶了吴柯的运维笔记” LNMP代表的就是:Linux系统下Nginx+MySQL+PHP这种网站服务器架构。 Linux是一类Unix计...

    吴柯
  • ceph分布式存储-集群客户端连接

    Lucien168
  • 【PageLayout】非常简单的一键切换加载-空数据-错误页,支持自定义

    Android中经常使用一个空白页和网络错误页用来提高用户体验,给用户一个较好的感官,如果获取到的数据为空,那么会显示一个空白数据页,如果在获取数据的过程中网络...

    Hankkin

扫码关注云+社区

领取腾讯云代金券