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 条评论
登录 后参与评论

相关文章

来自专栏bboysoul

matomo的安装使用和体验

matomo的前身是piwik,是一个强大的网站流量分析网站,我使用它的原因就是因为我的网站原先使用的是百度统计,但是百度统计最近貌似不稳定了,所以我想自己搭建...

36720
来自专栏一个会写诗的程序员的博客

webpack 极简教程(前端自动化构建)

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。

12110
来自专栏马涛涛的专栏

webpack@3简单使用

这篇博客用的是webpack3的版本,作为入门理解学习 非原创,只为学习记录。博客大部分内容引用来源如下:

28460
来自专栏后端技术探索

nginx 授权资源跨站访问

最近一h5前端同事反馈说某个字体库连接(类似于http://www.example.com/test.ttf)无法访问。

11420
来自专栏贾鹏辉的技术专栏@CrazyCodeBoy

Windows平台搭建React Native开发环境

尊重版权,未经授权不得转载 本文出自:贾鹏辉的技术博客(http://www.devio.org) 告诉大家一个好消息,为大家精心准备的React N...

30940
来自专栏CSDN技术头条

由浅入深学习JavaScript Debug技巧

我常常看到不少开发者不懂如何Debug JavaScript代码,因此决定写一篇博客为初学者介绍如何Debug。我希望这篇文章可以提供一些有用的信息。我尝试在本...

19990
来自专栏Wordpress专用主机|主题模板|必备插件

如何手动配置WordPress浏览器缓存

66150
来自专栏web前端

smartClient 1--框架介绍

    快速构建 大型企业应用开发(无需过多关注UI),适合基于云技术的应用,主要关注业务的发展和营销,加快开发进程

12700
来自专栏大闲人柴毛毛

架构高性能网站秘笈(五)——Web组件分离

什么是Web组件? 网站的静态网页HTML、JavaScript脚本、CSS样式、图片、动态数据称为网站的Web组件。也就是说,一个Web应用由各种各样的We...

41480
来自专栏从零开始学自动化测试

selenium+python自动化78-autoit参数化与批量上传

前言 前一篇autoit实现文件上传打包成.exe可执行文件后,每次只能传固定的那个图片,我们实际测试时候希望传不同的图片。 这样每次调用的时候,在命令行里面加...

40430

扫码关注云+社区

领取腾讯云代金券