前端老應用優化中我使用的基礎知識

原文地址：

www.yuque.com/xiezhongfu/…

本文總結的是，今年上半年經前端項目優化中涉及到的一些基礎知識。點到即止

文中有些連接雖有導流嫌疑，仍是建議看一看

！！！開篇文章，倉促而成，留言指教！！！

工具鏈優化

• 引入 typescript
• eslint
• css-module
• styleint
• prettier
• 增長 git 鉤子
• webpack node api 自定義編譯
• webpack 自定義插件
• rollup 編譯項目 lib
• 項目自定義CI/CD
• docker

應用優化

瀏覽器的基礎是一個 HTML 解析引擎。它遍歷 HTML 文檔，按照順序解析成 DOM。加載解析完樣式表後再渲染出頁面。文檔中會加載 js，默認加載 js 的方式會阻塞瀏覽器解析 HTML，在瀏覽器渲染完body以前，頁面都是空白，應該儘量快地加載。

具體介紹參見：www.yuque.com/xiezhongfu/…

具體工做原理參見：www.html5rocks.com/zh/tutorial…

瀏覽器控制加載頁面的不一樣資源的順序，以 chrome 瀏覽器爲例子，HTTP 1.1 限制了瀏覽器一個 TCP 最多6個請求。所以須要嚴格控制瀏覽器的請求，具體參見：www.yuque.com/xiezhongfu/…

使用 HTTP 2，瀏覽器能夠只用一個 TCP 請求全部資源。

具體參見：www.yuque.com/xiezhongfu/…

HTTP 0.9/1.x/2 下層是TCP 參見：www.yuque.com/xiezhongfu/…

WebRTC 和 http3 的下層是 UDP，UDP 具體參見：www.yuque.com/xiezhongfu/…

咱們應該儘快加載頁面的可見部分(儘快加載自定義字體，圖片；設置骨架圖/轉場動畫；服務端渲染；HTTP 緩存/PWA/各層的緩存；CDN......)，併力爭作到秒開。

後來在看 react 源碼的時候注意到，其實用戶對約 500ms 之內的延遲是看不見的，因此你打開把 500ms 做爲你優化的標準。看 react 源碼確實幫助了我不少，對源碼註釋的版本也即將開源，目前正在找人校對。到時候地址及時更新到這裏

圖像的渲染儘可能不要用「背景圖」，picture 標籤瞭解下：developer.mozilla.org/zh-CN/docs/…

chrome 自定義字體加載的 API：developers.google.com/web/fundame…

瞭解下網絡負載均衡：www.yuque.com/xiezhongfu/…

在 HTTP 2 下，瀏覽器怎麼控制請求的優先級：calendar.perfplanet.com/2018/http2-…

結合 www.yuque.com/xiezhongfu/… 介紹的 singe-spa 元框架，把前端大應用拆分紅小應用或者在大應用內部共存前端 react/vue/angular。是一個很好的優化策略。node 層接口聚合，採用 BFF 的方式，正在調研 serverless。計劃基於 serverless 改造下前端開發模式。

最後貼上最近工做內容：www.yuque.com/xiezhongfu/…，求拍磚，學習，推薦工做。