基于blob对象动态封装一个web worker

最新推荐文章于 2024-11-28 17:23:42 发布

溪宁

最新推荐文章于 2024-11-28 17:23:42 发布

阅读量1.8k

点赞数

分类专栏：前端学习文章标签： web worker blob

本文链接：https://blog.csdn.net/qq_38164763/article/details/99708144

版权

本文介绍了如何利用HTML5的Web Worker和Blob对象动态创建后台线程执行JavaScript函数，详细阐述了基本使用、深入思考以及动态创建Web Worker的步骤，并提供了封装成可复用组件的示例。

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

一、前言

在html5出来以后，有许多新特性值得我们关注, 其中一个就是web worker。相信如果关心前端发展的同学就算没有使用过web worker也听过这个东西。今天我们就来讲一讲web worker。

二、基本使用

其实，web worker的作用十分简单，就是可以在后台运行一个js文件，所以我们在实际使用中可以将一些非常耗时的计算交给web worker去做。但是值得注意的是，在web worker中是无法拿到window/document/parent对象的，以我的理解就是，你可以看作是与该页面完全独立的一个线程。所以如果涉及到大量的dom操作的时候我们是无法靠web worker完成的，相反，如果是大量的计算工作，我们完全可以将其交给web worker来做，最后将计算的结果返回给我们。说了这么多，那么我们下面来实际使用一下。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
</head>
<body>
 
<p>计数： <output id="result"></output></p>
<button onclick="startWorker()">开始工作</button> 
<button onclick="stopWorker()">停止工作</button>
 
<script>
    var w;
    
    function startWorker() {
    
        w = new Worker('./index.js');
        w.onmessage = function(event) {
    
            document.getElementById

最低0.47元/天解锁文章