最近這段時間梳理了高階前端知識架構，釋出在GitHub上，歡迎star
https://github.com/liuyongliang/Advanced-Frontend
非同步
非同步程式設計
-
- JS 是單執行緒的語言。執行的js ，可能會有大量的網路請求，而一個網路資源啥時候返回，這個時間是不可預估的。這種情況會出現等待卡頓。JS 對於這種場景就設計了非同步 ———— 即，發起一個網路請求，就先不管這邊了，先幹其他事兒，網路請求啥時候返回結果，到時候再說。這樣就能保證一個網頁的流程執行
async/await
-
- promise的出現對於非同步程式設計是一個跨越式的提高，但是往往在實際業務中存在很多更加複雜的流程，promise還是無法滿足我們的需要，這時候在ES7中提出了async函式
Promise
伺服器端渲染SSR
SSR指南
-
- 簡單理解是將元件或頁面通過伺服器生成html字串，再傳送到瀏覽器，最後將靜態標記”混合”為客戶端上完全互動的應用程式
SSR框架
-
- Next.js 為您提供生產環境所需的所有功能以及最佳的開發體驗：包括靜態及伺服器端融合渲染、 支援 TypeScript、智慧化打包、 路由預取等功能 無需任何配置
函數語言程式設計
函數語言程式設計
-
- 函數語言程式設計就像第三次工業革命，前兩次分別為指令式程式設計（Imperative programming）和麵向物件程式設計（Object Oriented Programming）
程式碼質量
程式碼規範
-
- 程式碼本身的質量: 包括複雜度, 重複率, 程式碼風格等。
- 複雜度: 專案程式碼量，模組大小，耦合度等
- 重複率: 重複出現的程式碼區塊佔比，通常要求在5%以下(藉助平臺化工具如Sonar)
- 程式碼風格: 程式碼風格是否統一(動態語言程式碼如JS, Python風格不受約束)
- 程式碼本身的質量: 包括複雜度, 重複率, 程式碼風格等。
JavaScript
TypeScript
效能優化
除錯工具
H5優化
快取
壓縮
記憶體
-
- 在JS中具有自動垃圾回收機制，對於前端開發來說，記憶體空間並不是被常常提起的概念，容易被大家忽視。很多東西的原理與記憶體息息相關，如：閉包、深籤拷貝、執行上下文等，要弄清楚這些，必須對記憶體空間有清晰的認知才行。
渲染
資源載入
-
《使用 Preload&Prefetch 優化前端頁面的資源載入》
- 對於前端頁面來說，靜態資源的載入對頁面效能起著至關重要的作用。本文將介紹瀏覽器提供的兩個資源指令-preload/prefetch，它們能夠輔助瀏覽器優化資源載入的順序和時機，提升頁面效能
監控
異常捕獲
-
- JavaScript 中的一個錯誤是一個物件，錯誤會被丟擲以暫停程式
-
- 在開發過程中，我們的目標是 0error，0warning。但有很多因素並不是我們可控的，為了避免某塊程式碼的錯誤，影響到其他模組或者整體程式碼的執行，我們經常會使用try-catch模組來主動捕獲一些異常或者錯誤
頁面效能監控
-
- FrontJS 提供準確、實時、完整的程式錯誤、資源載入、網路請求資訊及網站效能監測報告，幫助開發者快速追蹤網站故障，及時修復問題，維護網站質量，指導改善使用者體驗。
埋點
-
- 關於埋點，作為使用者行為過程資料採集的一種方式，被廣泛用於各公司的站點中。它不僅可以收集頁面瀏覽量，還能對訪問使用者的時間、地點、操作路徑等使用者行為進行多維度記錄
使用者行為
設計模式
概念
-
- 在軟體工程中，設計模式是軟體設計中常見問題的可重用解決方案。設計模式代表了經驗豐富的軟體開發人員所使用的最佳實踐。設計模式可以看作是程式設計模板
單體模式
- 《JavaScript設計模式——單體模式》
- 單體模式(Singleton Pattern)的思想在於保證一個特定類僅有一個例項，即不管使用這個類建立多少個新物件，都會得到與第一次建立的物件完全相同。
工廠模式
工程化
構建工具
webpack
-
- webpack是一個打包模組化 JavaScript 的工具，在 webpack裡一切檔案皆模組，通過 Loader 轉換檔案，通過 Plugin 注入鉤子，最後輸出由多個模組組合成的檔案。webpack專注於構建模組化專案
腳手架
前端標準/實踐
前端標準
-
- 通過分析github程式碼庫總結出來的工程師程式碼書寫習慣
-
《【譯】Google 官方文章——如何去做coder review》
- CR(Code review)主要目的在於確保Google 的程式碼庫程式碼質量越來越好。而所有相關的工具與流程皆是因應這個目的而生。為達到此目的，勢必需要做出一連串的權衡與取捨
-
- Git 提供了豐富的分支策略和工作流方式，我們在深入學習業界 Git 工作流時，每種工作流都設計的非常好，似乎都能運用到團隊實踐
骨架屏
前端演算法
遞迴
冒泡
動態規劃
二分查詢
連結串列和陣列
瀏覽器
自動化
網路
OSI七層協議
- 《OSI七層模型各層知識解析》
- 簡單理解其實就是為計算機與計算機連結所制定的通訊框架。這個模型分為七層。
DNS解析
協議
TCP
- 《TCP詳解》
- 概念
- 面向連線、可靠的基於位元組流的傳輸協議。
- 將應用層的的資料分割成報文段併傳送給目標節點的 TCP 層
- 每個資料包都有相對應的序號，對方收到後就傳送 ACK 確認，未收到就重傳
- 使用校驗和來檢測傳輸過程中是否出現錯誤
- 概念
- 《你管這破玩意兒叫TCP？》
UDP
測試
單元測試
自動化測試
-
- 測試是完善的研發體系中不可或缺的一環。前端同樣需要測試，你的css改動可能導致頁面錯位、js改動可能導致功能不正常。由於前端偏向GUI軟體的特殊性，儘管測試領域工具層出不窮，在前端的自動化測試上面卻實施並不廣泛，很多人依舊以手工測試為主
視覺化
d3
- 《D3 原始碼解構》
- D3是一個資料視覺化的javascript庫，相對於highchart和echarts專注圖表視覺化的庫，D3更適合做大資料處理的視覺化，它只提供基礎的視覺化功能，靈活而豐富的介面讓我們能開發出各式各樣的圖表。
three.js
NodeJS
原理
V8引擎
移動web開發
Hybrid
Flutter
安全
抓包/代理
監控技術
機器學習
TensorFlow
客戶端開發
electron
nw.js
chrome外掛
- 《Chrome外掛開發指南》
- Chrome外掛是一個用Web技術開發、用來增強瀏覽器功能的軟體。它其實就是一個由HTML、CSS、JS、圖片等資源組成的一個.crx字尾的壓縮包
原始碼分析
vue原始碼
-
- 簡單來說路由就是用來跟後端伺服器進行互動的一種方式，通過不同的路徑，來請求不同的資源，請求不同的頁面是路由的其中一種功能。
react原始碼
TypeScript
JavaScript
專案管理
專案管理
- 前端專案如何管理
- 前端專案的管理分為兩個維度：專案內的管理與多專案之間的管理