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