跳到主要内容

项目亮点实战

· 6 分钟阅读
lzw.

项目亮点训练

抓住项目中的一些亮点

你做什么项目(亮点)

1、不要做罗列太多
2、项目中的角色,内容,设计等,有没有别人做不到的

  1. 从 0 启动项目这方面
    • 工程化,项目规范,发布部署...
  2. 需求深化
    • 日常业务中如何训练自己,任何需求都可以做成亮点
    • 网速不稳定
    • 数据量变大
    • 交互上的优化
    • ...
  3. 团队的角度,做过什么项目提升全体开发效率 or 质量

比如

微观技术亮点:需求优化

文件上传

  1. axios.post+formData+进度条 over
    1. 需求做完,但是没亮点
  2. 文件是 2 个G
    1. 断点+续传
    2. 文件切分小块,分片上传,下次续传
  3. 拖拽,粘贴,交互上的优化
  4. 断点续传,需要给文件加一个唯一标识,常见的就是计算文件内容的 md5
    1. 计算 2G 文件的 md5, 可能需要 20s 左右,卡顿怎么解决
    2. webworker,影分身
    3. 抽样(损失一丢丢的正确率,换取了效率的巨大提升)
      • 没抽到的数据如果修改了,这个是分辨不出来的
      • 《布隆过滤器》的思想
      • 可以预判,这个算法判断 hash 正确,可能误判,判断 hash 不正确,一定是准的
    4. 巨大的计算量导致的卡顿,如 react15 时代的 dom diff 如果计算量大,会导致卡顿
      • 空闲时间计算
      • 源码中学到的很多思想,并不是单纯的为了面试 or 看代码,新思路,解决问题
  5. 有亮点的图片格式限定
    1. 头像上传,只允许 .png 格式
    2. 最简单就是文件 .type, name.splite('.')[1]==='png',根据文件名判断,都有小隐患
    3. 以上都有小隐患,可以通过修改后缀名来骗过
    4. 最好是通过二进制头信息读取格式要求
    5. 图片宽高,都可以在二进制里读出来,不用加载就能限定
  6. 切片切好了,一共 100 个切片,md5 算好了
    1. 如果直接 promise.all, 同时发起 100 个 tcp 的请求,也会卡顿
    2. 怎么解决
      • 并发数控制+错误重试
  7. 一个切片到底多大,怎么定
    1. 可以借鉴 tcp 的慢启动逻辑,先发小包,根据响应时间动态调整(很快,包大小翻倍,很慢 包变小一些)
    2. ... 继续根据这些原则(网络慢,交互等)去扩展

列表渲染

1.数据量变大
2.虚拟滚动 antd 4.0 自带的功能

还有更多需求

宏观角度,项目的亮点是什么

从开发,到上线,所有的过程都是工程化负责,都可以又一丢丢亮点 可以 show

  1. 规范

    1. eslint
    2. 命名规范
    3. git 规范,分支,log 规范...
    4. 组件规范
    5. ....
    6. 使用 git hook 去校验规范
  2. 技术选型

    1. vue or react, 看团队的人
    2. 语言扩展库(loadsh 还是自己写)
    3. 是不是 ssr, 日期,组件库,数据,路由...
    4. ssr (首屏性能,seo)
      1. 从 0 开始, next or nuxt 等 ssr 框架
      2. 已经成型的 可以重构,也可以静态化,puppeteer 等方式 hack 一下,次优解,工作量比较低
  3. 通用逻辑分装

    1. axios 拦截器
    2. 权限拦截
    3. ...
  1. webpack 的优化
    1. 性能优化,bundle-analysis
    2. gzip, dll, 懒加载
    3. preload, prefetch
    4. 性能优化...
    5. 自定义插件,loader,plugin...
  2. 通用组件
    1. 组件库的基本设计,参考 element-ui, ant-design
    2. 私有 npm ...
  3. 基于这些系统的进阶提效
    1. lowcode
    2. codereview 流程
      • 代码审核,写代码代码不能直接 merge master,要给一个同事审核
      • code review 是可以用来监督自己学习的
        • 不一定非得审核,举个例子,你觉得我的代码写的不错,你就找我要求我每次 commit,都默认给 review 一份
    3. 自动化部署 git+gitlab+钉钉推送
    4. 性能统计
    5. 报错统计 sentry
    6. ...

体验层面,都去用 ant.design

自身亮点修炼

亮点,追热点,不建议盲目追热点,学习成熟的技术,再考虑个人特色

不能和年轻人拼精力,有一些年轻人没有的能力,比如
硬:技术持续提升,从现在开始,LeetCode,每天刷一题,刷到 200 道题
软:多读书

项目做成亮点的训练方式