在百度怎么建立自己的網(wǎng)站嗎網(wǎng)站快速排名服務(wù)商
文章目錄
- 項目地址
- 一、前端
- 1.1 大文件上傳，預(yù)覽
- 1.2 首頁性能優(yōu)化
- 1.2 流量染色，灰度發(fā)布
- 1.3 Websock心跳機(jī)制，大數(shù)據(jù)實時數(shù)據(jù)優(yōu)化
- 1.4 Gpu 加速 fps優(yōu)化
- 1.5 echarts包大小優(yōu)化和組件封裝
- 1.6 前端監(jiān)控系統(tǒng)
- 1.7 超大虛擬列表卡頓
- 1. 實現(xiàn)
- 2. 相關(guān)問題
- (1) 什么是虛擬化列表，為什么要使用它？
- (2) 如何計算每一行的高度和可見行數(shù)的？
- (3) 如何保證滾動事件的性能的？當(dāng)用戶快速滾動時
- (4) 如何處理邊界情況，比如滾動到頂部或底部？
- 1.8 圖片懶加載，懶加載占位符，canvas對上傳圖片壓縮
- 1.9 監(jiān)控工具
- 1.10 代碼體積
- 1.11 拖拽式報表，動態(tài)報表
- 1.12 團(tuán)隊基建
- 1.13 首屏性能優(yōu)化
- 二、后端
- 2.1 大數(shù)據(jù)導(dǎo)出
- 2.2 分布式事務(wù)，事務(wù)
- 2.3 數(shù)據(jù)庫主從 一致
- 2.4 間隙鎖，分布式鎖，樂觀鎖
項目地址
- 教程作者：
- 教程地址：
- 代碼倉庫地址：
- 所用到的框架和插件：
dbt
airflow
一、前端
1.1 大文件上傳，預(yù)覽
- 前端：①切文件；②判定切片是否完成上傳完成；③斷點、錯誤續(xù)傳，記錄已上傳的切片位置，
- 后端：①收切片、存切片；②合并切片；③文件是否存在校驗，服務(wù)端根據(jù)文件Hash值、文件名，校驗該文件是否已經(jīng)上傳
前端：
- 常量設(shè)置切片大小
- 獲取文件的hash值
- 進(jìn)行切片，切片保存，含有：切片內(nèi)容，切片索引，filehash，以及上傳狀態(tài)，并存儲為一個數(shù)據(jù)
- 批量上傳切片，并且限制并發(fā)數(shù)為6，并且使用遞歸上傳，返回一個promise，并且更改切片的上傳狀態(tài)
- 當(dāng)前成功上傳的index/總長度 就可以獲得文件上傳進(jìn)度
- 當(dāng)所有文件上傳完成，使用promise 調(diào)用后端開始合并，使用useState顯示百分比
后端： - 創(chuàng)建文件同名的md5的臨時文件夾，用來存放所有的切片
- 根據(jù)文件hash值和文件名，以及chunkindex進(jìn)行合并，使用.net 的FileStream
1.2 首頁性能優(yōu)化
react性能優(yōu)化的核心：減少rerender(重新渲染)
UI = render(state)
1.
1.2 流量染色，灰度發(fā)布
1.3 Websock心跳機(jī)制，大數(shù)據(jù)實時數(shù)據(jù)優(yōu)化
1.4 Gpu 加速 fps優(yōu)化
1.5 echarts包大小優(yōu)化和組件封裝
1.6 前端監(jiān)控系統(tǒng)
- 異常：JS異常，接口異常，白屏異常，資源異常
- 性能數(shù)據(jù)：FC, FCP, DOM READY, DNS等&#x