- 文件校验
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.登录验证码功能
登录 - 实用库
svg-captcha
nodemailer
jsonwebtoken
fs-extra
hexdump 看图片二进制
md5 spark-md5
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