Web Worker加载外部文件实践

Jinuss 2024-10-15 16:03:02 阅读 53

概述

在<code>Web Worker 多线程编程一文中介绍了Web Worker的编程思想,碰巧最近工作中某个工程需要加载外部文件,最大的文件大小达到30MBWeb Worker无疑是不错的选择。

编程实现

不用 Web Worker

加载外部文件使用原生的fetch方法读取文件,其核心代码如下:

function loadlandsBound() {

-- -->

fetch("./geojson/lands.json")

.then((response) => response.json())

.then((data) => {

/** 业务逻辑处理 */

})

.catch((error) => console.error("Error loading GeoJSON:", error));

}

如果需要加载多个文件,可能就需要封装多个函数,调用fetch方法去请求文件。

使用 Web Worker

使用Web Worker编程,实现就较为复杂。涉及到多线程之间的数据交互。

worker.js实现如下:

self.onmessage = async function (evt) {

const {

type



声明

本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。