项目亮点训练
抓住项目中的一些亮点
你做什么项目(亮点)
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 道题
软:多读书
项目做成亮点的训练方式