前端文件上传--2020年2月7日学习笔记

面试题:前端文件上传
一:基本回答

前端使用type为file的input的,以及formData,将文件通过ajax传给后端。

二:进阶之文件切片

将文件分为若干个小块,然后依次上传,后端接受完所有文件后再合并。
相较于上面的优点是可以断点续传和秒传,切片后每个小块通过md5计算其唯一的hash值,上传时都问后端校验下,是否存在该块,不存在才上传,如果整个文件都存在的话那就是秒传了。

三:进阶之优化计算hash

切片后每个小块计算hash较耗费时间,此时页面就会卡住,影响用户体验,解决方法有:

  1. webworker,开一个子进程去计算hash,主线程只需要等待其完成的通知即可,计算量没有减少,但主线程不卡顿;优点是逻辑简单,缺点是增加了网络请求;
  2. time-slice,时间切片,利用浏览器空闲时间去计算hash,不影响延迟浏览器的关键事件,如动画和输入响应等,原理是浏览器的requestIdleCallback方法;优点是效率比webworker的高,更细腻,缺点是requestIdlecallback该api有兼容问题,自己实现较为复杂,可参考react的fiber架构 ;
  3. 抽样hash,也就是不把小块的全部文件去做全量hash,而是抽取其前中后两个字节,共6个字节去计算hash(大概思路,细节还要更复杂);牺牲一些命中率,换取时间;可以结合上面两种方法使用;
三:进阶之优化大量请求

切片后增加了上传文件的请求数量,需要控制请求的并发数以及失败重试;
至于判断每个小块是否存在的请求,可以只需要一个,后端返回已经存在的文件hash的数组,之后的判断无需一个个请求;

四:进阶之慢启动策略

解决的是分片到底分多大的问题,不能写死为1m或是200kb,需要根据当前网络情况,动态调整切片大小数,参考TCP的慢启动策略;
具体为,假设理想是每30s上传一个区块,区块初始大小为1m,如果上传只用了10s,则下一个区块大小为3m;如果花了60s,则下一个区块变成500kb;以此类推,由于网速波动,区块大小需要一直判断;

更多优化点
  1. 碎片清理,定期清理服务器过期的碎片文件
  2. requestIdleCallback兼容性,如何自己实现一个
  3. 并发+慢启动配合
  4. 抽样hash+全量量哈希+时间切片配合
  5. 慢启动的变化应该更更平滑,比如使用三⻆角函数,把变化率平滑的限制在0.5~1.5之间
  6. websocket推送进度
  7. 文件碎片分机器器存储
  8. 文件碎片备份
  9. 体验优化,如上传的进度条、离开页面的提醒、拖拽上传、粘贴上传等
    ......
【自己的感悟之 学习的慢启动】

从小的任务开始,能够顺利地完成,再加大任务,不要一开始就搞个大的任务,高的期望反而卡住了,那就一点都没有完成。

后续还需要自己用代码全部实践一遍,以及运用的项目中

整理于 开课吧-大圣老师的2020.2.7号直播

ps:晚上看到煎蛋站长 染新冠肺炎发文交代后事--诸君,我可能感染了新冠肺炎 ,后检查发现不是,替他感到高兴,白嫖党第一次打赏十块,有5000+的人打赏,如此近距离的直面死亡,又回到人间,会有一些什么样的感悟呢?

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,634评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,951评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,427评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,770评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,835评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,799评论 1 294
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,768评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,544评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,979评论 1 308
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,271评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,427评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,121评论 5 340
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,756评论 3 324
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,375评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,579评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,410评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,315评论 2 352

推荐阅读更多精彩内容