06月22, 2017

html5 worker小记

最近在做文件上传,显示文本内容时,想到是不是要新开一个worker(线程),不然页面容易被卡。(因为我们的测试童鞋一言不合就上传40MB的文本,或者更大的)。

当然,我们可以判断一下文件大小,然后不做reader。

 if (file.size / 1024 / 1024 - 4 > 0) {
    message.error("上传的文件不能超过4MB");
    e.target.value = "";
    return;
}

出于这样的心态,把之前的代码给简单重构了一下。这里其实要考虑两个问题:

  • worker要怎么写?
  • 怎么结合webpack?

这两个基本搜索一下,都可以得到答案,所以我在这里就贴一下实现的代码吧!

let MyWorker = require("worker-loader!./fileWorker.js");
let worker = new MyWorker();
worker.postMessage({file: file});
worker.onmessage = function(event) {
    // event.data拿到传过来的文件文本内容
};

这里有用到了worker-loader

// fileWorker.js
onmessage =function(event) {
    let file = event.data.file;
    let reader = new FileReader();
    reader.onload = function(e) {
        postMessage(e.target.result);
    }
    reader.readAsText(file);
};

写法上略相似于node的fork子进程,或者websocket。

本文链接:www.my-fe.pub/post/html-worker.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。