前言

前几天看到一个文章，感触很深

作者从0实现了大文件的切片上传，断点续传，秒传，暂停等功能，深入浅出的把这个面试题进行了全面的剖析

彩虹屁不多吹，我决定蹭蹭热点，录录视频，把作者完整写代码的过程加进去，并且接着这篇文章写，所以请看完上面的文章后再食用，我做了一些扩展如下

计算hash耗时的问题，不仅可以通过web-workder，还可以参考React的FFiber架构，通过requestIdleCallback来利用浏览器的空闲时间计算，也不会卡死主线程

文件hash的计算，是为了判断文件是否存在，进而实现秒传的功能，所以我们可以参考布隆过滤器的理念, 牺牲一点点的识别率来换取时间，比如我们可以抽样算hash

文中通过web-workder让hash计算不卡顿主线程，但是大文件由于切片过多，过多的HTTP链接过去，也会把浏览器打挂 (我试了4个G的，直接卡死了)， 我们可以通过控制异步请求的并发数来解决，我记得这也是头条的一个面试题

每个切片的上传进度不需要用表格来显示，我们换成方块进度条更直管一些(如图)

并发上传中，报错如何重试，比如每个切片我们允许重试两次，三次再终止

由于文件大小不一，我们每个切片的大小设置成固定的也有点略显笨拙，我们可以参考TCP协议的慢启动策略， 设置一个初始大小，根据上传任务完成的时候，来动态调整下一个切片的大小， 确保文件切片的大小和当前网速匹配

小的体验优化，比如上传的时候

文件碎片清理

已经存在的秒传的切片就是绿的，正在上传的是蓝色的，并发量是4，废话不多说，我们一起代码开花

时间切片计算文件hash

其实就是time-slice概念，React中Fiber架构的核心理念，利用浏览器的空闲时间，计算大的diff过程，中途又任何的高优先级任务，比如动画和输入，都会中断diff任务， 虽然整个计算量没有减小，但是大大提高了用户的交互体验

requestIdleCallback

window.requestIdleCallback()方法将在浏览器的空闲时段内调用的函数排队。这使开发者能够在主事件循环上执行后台和低优先级工作

requestIdelCallback执行的方法，会传递一个deadline参数，能够知道当前帧的剩余时间，用法如下

requestIdelCallback(myNonEssentialWork);

function myNonEssentialWork (deadline) {

// deadline.timeRemaining()可以获取到当前帧剩余时间

// 当前帧还有时间 并且任务队列不为空

while (deadline.timeRemaining() > 0 && tasks.length > 0) {

doWorkIfNeeded();

}

if (tasks.length > 0){

requestIdleCallback(myNonEssentialWork);

}

}

复制代码

deadline的结构如下

interface Dealine {

didTimeout: boolean // 表示任务执行是否超过约定时间

timeRemaining(): DOMHighResTimeStamp // 任务可供执行的剩余时间

}

复制代码

该图中的两个帧，在每一帧内部，TASK和redering只花费了一部分时间，并没有占据整个帧，那么这个时候，如图中idle period的部分就是空闲时间，而每一帧中的空闲时间，根据该帧中处理事情的多少，复杂度等，消耗不等，所以空闲时间也不等。

而对于每一个deadline.timeRemaining()的返回值，就是如图中，Idle Callback到所在帧结尾的时间(ms级)

时间切片计算

我们接着之前文章的代码，改造一下calculateHash

async calculateHashIdle(chunks) {

return new Promise(resolve => {

const spark = new SparkMD5.ArrayBuffer();

let count = 0;

// 根据文件内容追加计算

const appendToSpark = async file => {

return new Promise(resolve => {

const reader = new FileReader();

reader.readAsArrayBuffer(file);

reader.onload = e => {

spark.append(e.target.result);

resolve();

};

});

};

const workLoop = async deadline => {

// 有任务，并且当前帧还没结束

while (count < chunks.length && deadline.timeRemaining() > 1) {

await appendToSpark(chunks[count].file);

count++;

// 没有了 计算完毕

if (count < chunks.length) {

关于找一找教程网

本站文章仅代表作者观点，不代表本站立场，所有文章非营利性免费分享。

本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章，希望广大程序员努力学习，让我们用科技改变世界。

[字节跳动面试官，我也实现了大文件上传和断点续传]http://www.zyiz.net/tech/detail-109137.html