文件校验
isPng/isJpg/isGif/ isBmp/isJpeg

2.断点续传
上传之前，问一下后端，文件是否上传过，有妙传；如果没有，是否有存在的切片
Promise控制并发上传切片数量 -- 对于后面4

3.大文件指纹计算 -- 计算hash(只通过文件名判断，会出现恶意攻击)，文件过大
A.web-worker
计算hash md5
通过postMessage向主线程传递数据
onMessage接受主线程的通知，监听主线程给的数据

md5过大？ --> idle 切片
B.使用浏览器本身的空闲时间，计算md5

C.抽样数据
首位取全部数据(2M)，中间取前中后各2各字节。
加起来文件不会超过5M，计算hash变快。

4.并发数控制+错误重试
慢启动 - 借鉴tcp策略（确保区块大小和带宽匹配）

7
// commit测试(husky: hooks: pre-commit)+代码commit规范(feat: fix:)
husky
// 提交规范
commitizen
// 更严格
validate-commit-msg

！！！8
//登录
1.session-cookie
2.jwt
3.OAuth -- github, 微信登录等

9.登录验证码功能

图片格式.png

image头部信息二进制
https://www.jianshu.com/p/45c0f85c47ed?nomobile=yes

JS的二进制家族：Blob、ArrayBuffer和Buffer
https://zhuanlan.zhihu.com/p/97768916

10.文件上传

总结:

v1.0
前端 按钮 点击 传给后端formData
后端 获取文件路径 放到指定目录下

v2.0
拖拽+进度条

v3.0
// 图片头信息判断
imgVal -- 头部二进制信息

// md5计算(worker -> idle -> 抽样hash)
A.浏览器主线程只有一个，如果文件很大，浏览器会很卡顿 -> Webworker
new Worker('/hash.js')
worker.postMessage // 主线程给worker发消息
worker.onmessage    // worker给主线程发消息 (主线程监听)

B.worker缺陷？无法使用npm，需要static目录 --> idle改进
(切的更小100k? 使用时间切片->fiber架构的启发)
requestIdleCallback计算文件md5

C.更高级 -> 抽样hash -> 不管多大，保证5M以内
// 断点续传
calculateHashSample -> uploadChunks -> mergeRequest
计算时间切片hash -> 上传切片chunk -> 合并chunk
// 秒传 -- 场景网络断了，继续上次上传

// 并发数控制与报错重试及次数限制
// 比较一个大文件上传和批量上传大量文件 - 重试

思考：
碎片清理
文件碎片存储在多个机器上
文件碎片备份
兼容性更好的requestIdleCallback
并发+慢启动
抽样hash+全量hash双重判断
websocket推送
cdn...

40.Markdown
<div contenteditable="true">哈哈</div>
编辑器发展史
1.刚开始第三方的tinyMce，wangEditor
2.开源slate.js
3.定制化雨雀 word 类浏览器风格

45 列表渲染
定高，计算visibleData显示

思考：
？？ 如何不定高
??translateY

文件上传

10.文件上传

推荐阅读更多精彩内容