项目亮点训练
抓住项目中的一些亮点
你做什么项目（亮点）
1、不要做罗列太多
2、项目中的角色，内容，设计等，有没有别人做不到的
- 从 0 启动项目这方面
- 工程化，项目规范，发布部署...
- 需求深化
- 日常业务中如何训练自己，任何需求都可以做成亮点
- 网速不稳定
- 数据量变大
- 交互上的优化
- ...
- 团队的角度，做过什么项目提升全体开发效率 or 质量
比如
微观技术亮点：需求优化
文件上传
- axios.post+formData+进度条 over
- 需求做完，但是没亮点
- 文件是 2 个G
- 断点+续传
- 文件切分小块，分片上传，下次续传
- 拖拽，粘贴，交互上的优化
- 断点续传，需要给文件加一个唯一标识，常见的就是计算文件内容的 md5
- 计算 2G 文件的 md5, 可能需要 20s 左右，卡顿怎么解决
- webworker，影分身
- 抽样（损失一丢丢的正确率，换取了效率的巨大提升）
- 没抽到的数据如果修改了，这个是分辨不出来的
- 《布隆过滤器》的思想
- 可以预判，这个算法判断 hash 正确，可能误判，判断 hash 不正确，一定是准的
- 巨大的计算量导致的卡顿，如 react15 时代的 dom diff 如果计算量大，会导致卡顿
- 空闲时间计算
- 源码中学到的很多思想，并不是单纯的为了面试 or 看代码，新思路，解决问题
- 有亮点的图片格式限定
- 头像上传，只允许 .png 格式
- 最简单就是文件 .type, name.splite('.')[1]==='png'，根据文件名判断，都有小隐患
- 以上都有小隐患，可以通过修改后缀名来骗过
- 最好是通过二进制头信息读取格式要求
- 图片宽高，都可以在二进制里读出来，不用加载就能限定
- 切片切好了，一共 100 个切片，md5 算好了
- 如果直接 promise.all, 同时发起 100 个 tcp 的请求，也会卡顿
- 怎么解决
- 并发数控制+错误重试
- 一个切片到底多大，怎么定
- 可以借鉴 tcp 的慢启动逻辑，先发小包，根据响应时间动态调整（很快，包大小翻倍，很慢 包变小一些）
- ... 继续根据这些原则（网络慢，交互等）去扩展
列表渲染
1.数据量变大
2.虚拟滚动 antd 4.0 自带的功能
还有更多需求
宏观角度，项目的亮点是什么
从开发，到上线，所有的过程都是工程化负责，都可以又一丢丢亮点 可以 show
规范
- eslint
- 命名规范
- git 规范，分支，log 规范...
- 组件规范
- ....
- 使用 git hook 去校验规范
技术选型
- vue or react, 看团队的人
- 语言扩展库（loadsh 还是自己写）
- 是不是 ssr, 日期，组件库，数据，路由...
- ssr （首屏性能，seo）
- 从 0 开始， next or nuxt 等 ssr 框架
- 已经成型的 可以重构，也可以静态化，puppeteer 等方式 hack 一下，次优解，工作量比较低
通用逻辑分装
- axios 拦截器
- 权限拦截
- ...
- webpack 的优化
- 性能优化，bundle-analysis
- gzip, dll, 懒加载
- preload, prefetch
- 性能优化...
- 自定义插件，loader,plugin...
- 通用组件
- 组件库的基本设计，参考 element-ui, ant-design
- 私有 npm ...
- 基于这些系统的进阶提效
- lowcode
- codereview 流程
- 代码审核，写代码代码不能直接 merge master，要给一个同事审核
- code review 是可以用来监督自己学习的
- 不一定非得审核，举个例子，你觉得我的代码写的不错，你就找我要求我每次 commit，都默认给 review 一份
- 自动化部署 git+gitlab+钉钉推送
- 性能统计
- 报错统计 sentry
- ...
体验层面，都去用 ant.design
自身亮点修炼
亮点，追热点，不建议盲目追热点，学习成熟的技术,再考虑个人特色
不能和年轻人拼精力，有一些年轻人没有的能力，比如
硬：技术持续提升，从现在开始，LeetCode，每天刷一题，刷到 200 道题
软：多读书
项目做成亮点的训练方式