非同步編程
-
- 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
項目管理
項目管理
- 前端項目如何管理
- 前端項目的管理分為兩個維度：項目內的管理與多項目之間的管理
