一文带你看懂 Web Worker

最新推荐文章于 2023-11-13 16:32:08 发布

千锋python和唐唐

最新推荐文章于 2023-11-13 16:32:08 发布

阅读量359

点赞数

本文链接：https://blog.csdn.net/chen801090/article/details/102463741

版权

Web Worker为JavaScript提供多线程能力，允许在后台线程执行耗时任务，避免阻塞主线程，提升用户体验。本文介绍了Web Worker的基本概念、使用限制和实例，适合前端开发者了解如何在实践中应用Web Worker进行数据处理、加密、预取数据等任务。

摘要由CSDN通过智能技术生成

以前我们总说，JS是单线程没有多线程，当JS在页面中运行长耗时同步任务的时候就会导致页面假死影响用户体验，从而需要设置把任务放在任务队列中；执行任务队列中的任务也并非多线程进行的，然而现在HTML5提供了我们前端开发这样的能力 - Web Workers API，我们一起来看一看 Web Worker 是什么，怎么去使用它，在实际生产中如何去用它来进行产出。

一文带你看懂 Web Worker

1. 概述

Web Workers 使得一个Web应用程序可以在与主执行线程分离的后台线程中运行一个脚本操作。这样做的好处是可以在一个单独的线程中执行费时的处理任务，从而允许主（通常是UI）线程运行而不被阻塞。

它的作用就是给JS创造多线程运行环境，允许主线程创建worker线程，分配任务给后者，主线程运行的同时worker线程也在运行，相互不干扰，在worker线程运行结束后把结果返回给主线程。这样做的好处是主线程可以把计算密集型或高延迟的任务交给worker线程执行，这样主线程就会变得轻松，不会被阻塞或拖慢。这并不意味着JS语言本身支持了多线程能力，而是浏览器作为宿主环境提供了JS一个多线程运行的环境。

不过因为worker一旦新建，就会一直运行，不会被主线程的活动打断，这样有利于随时响应主线程的通性，但是也会造成资源的浪费，所以不应过度使用，用完注意关闭。或者说：如果worker无实例引用，该worker空闲后立即会被关闭；如果worker实列引用不为0，该worker空闲也不会被关闭。

看一看它的兼容性
在这里插入图片描述