文章目录
- 项目地址
- 一、前端
- 1.1 大文件上传，预览
- 1.2 首页性能优化
- 1.2 流量染色，灰度发布
- 1.3 Websock心跳机制，大数据实时数据优化
- 1.4 Gpu 加速 fps优化
- 1.5 echarts包大小优化和组件封装
- 1.6 前端监控系统
- 1.7 超大虚拟列表卡顿
- 1. 实现
- 2. 相关问题
- (1) 什么是虚拟化列表，为什么要使用它？
- (2) 如何计算每一行的高度和可见行数的？
- (3) 如何保证滚动事件的性能的？当用户快速滚动时
- (4) 如何处理边界情况，比如滚动到顶部或底部？
- 1.8 图片懒加载，懒加载占位符，canvas对上传图片压缩
- 1.9 监控工具
- 1.10 代码体积
- 1.11 拖拽式报表，动态报表
- 1.12 团队基建
- 1.13 首屏性能优化
- 二、后端
- 2.1 大数据导出
- 2.2 分布式事务，事务
- 2.3 数据库主从 一致
- 2.4 间隙锁，分布式锁，乐观锁
项目地址
- 教程作者：
- 教程地址：
- 代码仓库地址：
- 所用到的框架和插件：
dbt
airflow
一、前端
1.1 大文件上传，预览
- 前端：①切文件；②判定切片是否完成上传完成；③断点、错误续传，记录已上传的切片位置，
- 后端：①收切片、存切片；②合并切片；③文件是否存在校验，服务端根据文件Hash值、文件名，校验该文件是否已经上传
前端：
- 常量设置切片大小
- 获取文件的hash值
- 进行切片，切片保存，含有：切片内容，切片索引，filehash，以及上传状态，并存储为一个数据
- 批量上传切片，并且限制并发数为6，并且使用递归上传，返回一个promise，并且更改切片的上传状态
- 当前成功上传的index/总长度 就可以获得文件上传进度
- 当所有文件上传完成，使用promise 调用后端开始合并，使用useState显示百分比
后端： - 创建文件同名的md5的临时文件夹，用来存放所有的切片
- 根据文件hash值和文件名，以及chunkindex进行合并，使用.net 的FileStream
1.2 首页性能优化
react性能优化的核心：减少rerender(重新渲染)
UI = render(state)
1.
1.2 流量染色，灰度发布
1.3 Websock心跳机制，大数据实时数据优化
1.4 Gpu 加速 fps优化
1.5 echarts包大小优化和组件封装
1.6 前端监控系统
- 异常：JS异常，接口异常，白屏异常，资源异常
- 性能数据：FC, FCP, DOM READY, DNS等&#x
