Skip to content

前端如何处理十万级别的大量数据 ? #18

Open
@TieMuZhen

Description

@TieMuZhen

这是一道面试题,刚开始面试官问前端如何处理大量数据。我第一时间就脱口而出用分页呀!面试官说那是从后台的角度来考虑的。从前端的角度呢?我思考了一下,分批加载,懒加载。监听用户的滑动分批显示数据。接着又问,如果我要对这些大量数据做计算做处理呢,同时又不能让页面崩掉、假死。该如何操作呢?

答:通过worker来做子线程来实现的。

什么是worker

运行者 Worker 接口是Web Workers API的一部分,代表一个后台任务,

它容易被创建并向创建者发回消息。创建一个运行者只要简单的调用Worker()构造函数,指定一个脚本,在工作线程中执行。(引自MDN)

看概念可能有点枯燥,通俗点讲就是:因为js是单线程运行的,在遇到一些需要处理大量数据的js时,可能会阻塞页面的加载,造成页面的假死。这时我们可以使用worker来开辟一个独立于主线程的子线程来进行哪些大量运算。这样就不会造成页面卡死。也说明 worker可以用来解决大量运算是造成页面卡死的问题。

worker的属性

Worker.onmessage:指定 message 事件的监听函数,发送过来的数据在Event.data属性中。
Worker.onmessageerror:指定 messageerror 事件的监听函数。发送的数据无法序列化成字符串时,会触发这个事件。

worker的方法

Worker.postMessage():向 Worker 线程发送消息。
Worker.terminate():立即终止 Worker 线程。

使用worker的注意点

1.同源限制

分配给 Worker 线程运行的脚本文件,必须与主线程的脚本文件同源。

2.DOM 限制

Worker 线程所在的全局对象,与主线程不一样,无法读取主线程所在网页的 DOM 对象,也无法使用documentwindowparent这些对象。但是,Worker 线程可以navigator对象和location对象。

3.通信联系

Worker 线程和主线程不在同一个上下文环境,它们不能直接通信,必须通过消息完成。

4.脚本限制

Worker 线程不能执行alert()方法和confirm()方法,但可以使用 对象发出 AJAX 请求。

5.文件限制

Worker 线程无法读取本地文件,即不能打开本机的文件系统(file://),它所加载的脚本,必须来自网络。

基本用法

// 主线程
let work = new Worker("js/workers.js");
work.onmessage = function (event) {
    console.log(event);
}

// worker线程
let arr = [...好多图片路径];
postMessage(arr);

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions