摘自 https://github.com/lgwebdream/FE-Interview/issues/12
對於正常的項目優化，一般都涉及到幾個方面，開發過程中、上線之后的首屏、運行過程的狀態
-
來聊聊上線之后的首屏及運行狀態：
-
首屏優化一般涉及到幾個指標FP、FCP、FMP；要有一個良好的體驗是盡可能的把FCP提前，需要做一些工程化的處理，去優化資源的加載
-
方式及分包策略，資源的減少是最有效的加快首屏打開的方式；
-
對於CSR的應用，FCP的過程一般是首先加載js與css資源，js在本地執行完成，然后加載數據回來，做內容初始化渲染，這中間就有幾次的網絡反復請求的過程；所以CSR可以考慮使用骨架屏及預渲染（部分結構預渲染）、suspence與lazy做懶加載動態組件的方式
-
當然還有另外一種方式就是SSR的方式，SSR對於首屏的優化有一定的優勢，但是這種瓶頸一般在Node服務端的處理，建議使用stream流的方式來處理，對於體驗與node端的內存管理等，都有優勢；
-
不管對於CSR或者SSR，都建議配合使用Service worker，來控制資源的調配及骨架屏秒開的體驗
-
react項目上線之后，首先需要保障的是可用性，所以可以通過React.Profiler分析組件的渲染次數及耗時的一些任務，但是Profile記錄的是commit階段的數據，所以對於react的調和階段就需要結合performance API一起分析；
-
由於React是父級props改變之后，所有與props不相關子組件在沒有添加條件控制的情況之下，也會觸發render渲染，這是沒有必要的，可以結合React的PureComponent以及React.memo等做淺比較處理，這中間有涉及到不可變數據的處理，當然也可以結合使用ShouldComponentUpdate做深比較處理；
-
所有的運行狀態優化，都是減少不必要的render，React.useMemo與React.useCallback也是可以做很多優化的地方；
-
在很多應用中，都會涉及到使用redux以及使用context，這兩個都可能造成許多不必要的render，所以在使用的時候，也需要謹慎的處理一些數據；
-
最后就是保證整個應用的可用性，為組件創建錯誤邊界，可以使用componentDidCatch來處理；
-
-
實際項目中開發過程中還有很多其他的優化點：
- 1.保證數據的不可變性
- 2.使用唯一的鍵值迭代
- 3.使用web worker做密集型的任務處理
- 4.不在render中處理數據
- 5.不必要的標簽，使用React.Fragments