1024 鉅獻！！一文看盡前端過去一年的精華沉澱（700 篇好文大彙總）

原創不易，但願能關注下咱們，再順手點個贊~~

1024，在這個「程序猿」 和 「程序媛」 特有的節日，咱們爲您送出一份節日大禮包 —— 過去一年政採雲 ZooTeam 前端小報推薦過的 700 篇好文，篇篇人肉篩選推薦，一文看盡一年的精華沉澱，強烈建議收藏~!。

表現

• BFC 到底是個什麼東東？
• 前端進階之什麼是 BFC？BFC 的原理是什麼？如何建立BFC？
• position:sticky 的用法
• CSS-position:static/relative/absolute/fixed 定位
• 26 個經常使用易忘 CSS 小技巧
• CSS3 box-shadow 效果大全（內陰影，外陰影，三邊陰影，雙邊陰影，單邊陰影，細線描邊…）
• 溫故而知 CSS 世界
• 【譯】這 44 個 CSS 精選知識點你能在 30 秒內給出答案嗎？
• CSS 層疊上下文（Stacking Context）
• CSS Painting API
• CSS 是如何影響瀏覽器元素在文檔中的排列
• 禁止用戶選擇的另外一種思路（兼容 IE8）
• 完全搞定 vertical-align 垂直居中不起做用疑難雜症
• 原來 CSS 這樣寫是會讓 app 崩潰的
• 編寫靈活、穩定、高質量的CSS代碼的規範（推薦收藏）
• 細數 CSS 僞元素及其用法
• CSS 文本換行總結
• CSS 文字顏色漸變的3種實現
• 【Hello CSS】序章-起源
• 【Hello CSS】第一章-CSS的語法與工做流
• 【Hello CSS】第三章-瀏覽器的視圖與座標
• CSS 自定義屬性及其用法
• 解析 CSS 格式化上下文
• 「譯」有限狀態機在 CSS 動畫中的應用
• 【移動端適配】用 vw、vh＋媒體查詢打造最完美的移動端適配方案 - 掘金
• 你可能不知道的 CSS 隱藏頁面元素的方法
• CSS 文本兩行顯示，超出省略號表示
• 老生常談之 CSS 的垂直居中
• 寫給本身看的 display: grid 佈局教程
• 提升幸福感的 9 個 CSS 技巧
• 經常使用 CSS 命名總結
• 精讀《使用 CSS 屬性選擇器》
• CSS 與網絡性能
• 你也許不知道，CSS 也有編程能力？
• 不怕你用不上！CSS 列表項佈局技巧
• 原來 CSS 與 JS 是這樣阻塞 DOM 解析和渲染的
• 關於響應式佈局，你必需要知道的
• 學習如何用 CSS 變量建立網頁響應佈局 — css var()
• 怎樣才能寫出更好的 CSS？
• 前端項目共有的 CSS 問題
• text-fill-color
• Filter Effects in Web (1)：CSS filter
• 深刻理解 CSS linear-gradient
• 前端佈局神器 display:flex
• 總結經常使用僞類與僞元素
• Flexbox 佈局徹底指南（圖解 Flexbox 佈局詳細教程）

行爲

• 精讀《async/await 是把雙刃劍》
• ES6 核心特性
• Promise & Generator——幸福地用同步方法寫異步 JavaScript
• ES6 徹底使用手冊
• 現代 JS 中的流控制：Callbacks to Promises to Async/Await
• Async Clipboard API 來了
• JavaScript 箭頭函數：適用與不適用場景
• 探尋 ECMAScript 中的裝飾器 Decorator
• 站住，你這個Promise！
• 看看這些被同事噴的JS代碼風格你寫過多少
• JavaScript: ECMAScript 2018（ES2018）有哪些新功能？
• 深刻淺出防抖函數 debounce
• Array.from() 五個超好用的用途 - 掘金
• JavaScript 的簡潔之道
• Vue 3 源碼公佈
• 理解:before僞類搭配vertical-align:middle實現垂直居中的原理
• 你瞭解 Vue 3.0 響應式數據怎麼實現嗎？
• JS 系列五：深刻 call、apply、bind
• JS基礎-完美掌握繼承知識點 - 掘金
• 一個合格的中級前端工程師必需要掌握的 28 個 JavaScript 技巧
• JS 開發經常使用工具函數
• 常見的三個 JS 面試題 - 掘金
• 搞不懂JS中賦值·淺拷貝·深拷貝的請看這裏
• 你知道 +0 與 -0 的區別嗎？
• 前端 100 問：能搞懂 80% 的請把簡歷給我
• JavaScript 深刻之閉包
• TTML—讓 W3C 得到艾美獎的字幕規範
• 給 JavaScript 開發者的代碼緩存指南 · V8
• 開發作了這麼多年，你真的瞭解JS工做機制嗎？
• 更快的異步函數和 Promise · V8
• 每個Javascript開發人員都應該關注的博客
• 練完這篇就會寫正則 - 掘金
• 息息相關的 JS 同步，異步和事件輪詢
• 換個角度就很好深刻理解的js繼承
• 經過實現25個數組方法來理解及高效使用數組方法
• 滑動拼圖驗證碼實現
• 5 個 JS 不良編碼習慣，你佔幾個呢
• 如何讓你的 JS 寫得更漂亮
• 瀏覽器的一些「滾動」行爲鑑賞
• GMTC 大前端時代前端監控的最佳實踐
• 2019谷歌I/O大會上提出的JavaScript新特性，你錯過了嗎？
• 重學 this 關鍵字(進階必備知識）
• 【譯】Proxy及其優點
• 這一次，完全弄懂 Promise 原理
• JS 異常函數之-箭頭函數
• Web 頁面錄屏實現
• ES2019新特性你知道哪些？
• 「數據模型」是如何助力前端開發的
• 如何判斷一個對象的某個屬性是可寫的？
• JS 中 this 在各個場景下的指向
• 如何利用 JavaScript 的 Map 提高性能
• Javascript 垃圾回收機制
• 22 道高頻 JavaScript 手寫面試題及答案
• 1 小時搞定卡片拖拽、自動排列交換位置、拖拽數據存取
• 在 JavaScript 中，如何判斷數組是數組？
• 【譯】JS 解構的五種有趣用法
• Rollup.js 入門指南
• Web 組件即將取代前端框架？！
• 前端進階：深刻理解 Web Workers
• JavaScript 單線程和瀏覽器事件循環簡述
• 精讀《Caches API》
• 每一個 JavaScript 開發者都該瞭解的 ES2018 新特性
• 如何用 es6+ 寫出優雅的 js 代碼
• 分析 JavaScript 的數據類型與變量
• JavaScript 之你不知道的 this
• 掌握 JavaScript：類和原型繼承之間有什麼區別？
• 爲何要避免寫 for 循環 - 掘金
• 關於 JavaScript function(函數) 你應該知道這些知識
• 一次弄懂 Event Loop
• JavaScript 循環：如何處理 async/await
• JavaScript ES2019 中的 8 個新功能
• 三個值得期待的 JavaScript 新特性！
• 都 9102 年了，還問 GET 和 POST 的區別
• Page Visibility API 教程
• 秒懂 this
• 作一個好前端必需要知道的事——JS語言
• JavaScript 經常使用七種繼承方案
• JavaScript 算法之複雜度分析
• 認識 Fetch API
• 靜態類型在 JavaScript 中是一種負擔嗎？
• 屏幕方向讀取與鎖定：Screen Orientation API
• 大白話解釋做用域和閉包是個啥
• 深度解析 new 原理及模擬實現
• JS 面試之數組的幾個不 low 操做
• [譯] 究竟什麼是 DOM？!
• 基於"發佈-訂閱"的原生 JS 插件封裝
• 我歷來不理解 JavaScript 閉包，直到有人這樣向我解釋它
• 你真的會用 Promise 嗎？
• 如何在 JS 循環中正確使用 async 與 await
• DOM 操做成本到底高在哪兒？
• 異步 JavaScript 的演化史：從回調到 Promise 再到 Async/Await
• JavaScript 是如何工做的：深刻 V8 引擎&編寫優化代碼的5個技巧
• JavaScript 中的 Object.freeze 與 const 之間的區別(譯)
• 深刻高階函數應用之柯里化
• 一些使 JavaScript 更加簡潔的小技巧
• 在什麼狀況下 a === a - 1 ？
• Tasks, microtasks, queues and schedules
• 幾分鐘內提高技能的 8 個 JavaScript 方法
• 這一次，完全弄懂 JavaScript 執行機制
• JS數組中那些你知道或不知道的
• JavaScript 淺拷貝與深拷貝
• 一篇文章完全說清 JS 的深拷貝/淺拷貝
• 理解 JavaScript 中的 macrotask 和 microtask
• JS 中的 number 爲什麼很怪異
• JavaScript 徹底手冊（2018版）
• JS中如何理解浮點數？
• 回到基礎：理解 JavaScript DOM
• JavaScript 複雜判斷的更優雅寫法
• ES六、ES七、ES八、ES九、ES10 新特性一覽
• 普通函數與箭頭函數的區別與注意事項
• 微任務、宏任務與 Event-Loop
• 如何更好的使用 JavaScript 數組
• 深拷貝的終極探索
• 現代 JS 框架存在的根本緣由
• JS 數組詳細操做方法及解析合集
• Web Worker 初探
• TypeScript 2.8下的終極React組件模式
• 咱們是如何將3萬代碼從Flow移植到TypeScript的？
• 深刻理解 TypeScript | 深刻理解 TypeScript
• 如何提高不一樣場景的框架複用性？TypeScript來了
• 原有 Vue 項目接入 TypeScript
• 逃離JavaScript，TypeScript成新寵
• 獨家解讀：淘寶 TypeScript 多場景開發和實踐
• 試讀《Mastering Modular JavaScript》
• 函數式編程，真香
• 前端 Web Workers 究竟是什麼？
• JS 是語言界的平頭哥
• JavaScript 數組方法集合及示例
• 2018，JavaScript 的生態圈盤點
• 深刻理解 JS 內存機制
• 這些被同事噴的 JS 代碼風格你寫過多少？
• JavaScript - Awesomes
• JavaScript 對象：咱們真的須要模擬類嗎？
• 一文帶你看懂 Cookie
• JavaScript 的將來是模塊化？
• JavaScript 經常使用工具方法封裝
• 這些不爲人知的 JavaScript 特性，你知道多少？
• 理解 JavaScript 中的高階函數
• JavaScript sort() 排序的坑詳解
• 深刻淺出節流函數 throttle
• setTimeout 小尷尬的啓示
• JavaScript 中實現 sleep
• [譯] Will it finally: 關於 try/catch 的一些細節
• 大部分教程不會告訴你的 12 個 JS 技巧
• 12 個提升 JavaScript 技能的概念！
• 如何編寫高質量的函數 -- 函數底層篇
• JS 函數節流和防抖的區分和實現詳解
• WebAssembly 到底處於編譯階段的哪一個環節？
• WebAssembly 現狀與實戰
• 看完這幾道 Promise 面試題，還被面試官問倒就活該
• 你可能不熟悉的 JS 總結

服務端

• 淺談 Node.js 在攜程的應用
• Node 12 值得關注的新特性
• NodeJS 與模塊系統
• NodeJS 和命令行程序
• 用 Now 輕鬆部署無服務器 Node 應用程序
• Node.js 環境性能監控
• 初涉全棧：Node+MySQL 實現登陸的簡單功能
• 做爲一個前端工程師也要掌握的幾種文件路徑知識
• 基於 NodeJS 從 0 到1 實現一個 CMS 全棧項目
• 寫給前端的 Docker 實戰教程
• V8 中更快的異步函數和 Promises
• Node.js 項目拆包工程化
• 2019 年 Node 趨勢解讀：大前端如何與 Node 結合？
• 蘇寧的 Node.js 實踐：不低於 Java 的渲染性能、安全穩定迭代快
• Node.js 指南（阻塞與非阻塞概述）
• Node.js 發展史
• Node.js 軟肋之 CPU 密集型任務
• 商業化場景下，百度如何實踐 Node.js 架構？
• 如何加快 Node.js 應用的啓動速度
• 給前端工程插上 Docker 的翅膀
• Koa 系列 — 如何編寫屬於本身的 Koa 中間件
• Egg.js 基本使用
• 最全 nginx 技術分析
• 面試加分項之 Nginx 反向代理與負載均衡
• 爲何須要 Docker？
• 爲何說 GraphQL能夠取代 REST API？
• 2019 年 13 大 GraphQL 工具和庫
• GraphQL-BFF：微服務背景下的先後端數據交互方案
• GraphQL 入門看這篇就夠了
• 同窗，GraphQL瞭解一下：基礎篇
• 多是你見過最完善的微前端解決方案
• 阿里蔣航：Serverless將使先後端從分離再度走向融合
• Serverless For Frontend 前世此生
• serverless 架構特性
• 精讀《Serverless 給前端帶來了什麼》
• 微前端入門
• 服務端渲染（SSR)
• 爲何 Node 是小菜前端團隊的核心技術棧
• Serverless 與 BFF 與前端
• GraphQL - 前端開發的利劍與橋樑
• Web 前端開發的後端指南
• 完全理解 cookie、session、token
• Netflix：咱們爲何要將 GraphQL 引入前端架構？
• Node.js 十年：十年以前，我不認識你
• 微服務架構 BFF 和網關是如何演化出來的

性能體驗

• Vue - Table表格渲染上千數據優化
• Chrome 運行時性能瓶頸分析
• 配置Tree Shaking來減小JavaScript的打包體積
• HTTP/2 與 WEB 性能優化（三）
• 提高90%加載速度——vuecli下的首屏性能優化
• 如何在瀏覽器不崩潰的狀況下過濾200萬行數據？
• 前端性能優化之重排和重繪
• 螞蟻金服如何把前端性能監控作到極致?
• 網站性能指標這麼多，你到底選對了嗎？
• JavaScript 性能優化之搖樹
• 一文帶你解鎖Web應用中的圖片優化技巧！
• HTTP/2 與 WEB 性能優化（一）
• HTTP/2 與 WEB 性能優化（二）
• 報告老闆，個人頁面真的比競品快
• JavaScript 多線程編程
• 深刻理解前端性能監控
• CSS 與 JS 動畫的底層機制 & 如何優化它們的性能
• 前端性能優化之HTTP緩存策略
• 前端圖片優化機制
• 京東 Plus 會員項目前端性能優化實踐
• 深刻理解瀏覽器的緩存機制
• 十分鐘學會防抖和節流
• 移動H5前端性能優化指南
• 驗證碼前端性能分析及優化實踐
• 深刻 Web 緩存策略
• CSS 和網絡性能
• 網站性能優化實戰——從12.67s到1.06s的故事
• 【譯】使用"BinaryAST"加快JavaScript腳本的解析速度？
• 別再說虛擬 DOM 快了，要被打臉的
• Web 性能優化： 使用 Webpack 分離數據的正確方法
• 歷時1年，上百萬行代碼！首次揭祕手淘全鏈路性能優化（上）
• 記一次網頁內存溢出分析及解決實踐
• 【第1518期】2019 前端性能優化年度總結 — 第一部分
• Web 性能優化： 圖片優化讓網站大小減小 62%
• [譯] Throttle 和 Debounce 在 React 中的應用
• 優化關鍵渲染路徑
• 瀏覽器緩存機制
• 關鍵渲染路徑
• Web 性能優化：緩存 React 事件來提升性能
• 瀏覽器緩存機制全攻略
• Web 性能優化：21種優化CSS和加快網站速度的方法
• 你必須懂的前端性能優化
• 網站性能優化實戰（二）
• 前端感官性能的衡量和優化實踐
• 前端緩存最佳實踐 - 掘金
• 性能分析介紹
• 企鵝輔導課程詳情頁毫秒開的祕密 - PWA 直出
• 網頁中默認圖片的幾種解決方式
• Not Design，Just Find.
• 讓你的網頁更絲滑（一）
• 前端黑科技：美團網頁首幀優化實踐
• 不是你的錯，是設計的錯
• React、Vue 在 IE 的兼容問題
• 【譯】緩存的最佳實踐以及 max-age 的陷阱
• 沒有 JS 的前端：體積更小、速度更快！
• 如何將 Web 主頁性能提高十倍以上？
• 讓你的網頁更絲滑（全）
• 如何作一個聽話的 「輸入框」
• 項目中能夠怎麼優化圖片
• 自動化 Web 性能優化分析方案
• 構建時預渲染：網頁首幀優化實踐
• 你真的瞭解迴流和重繪嗎？
• 如何測試網站的可訪問性
• 頁面性能評測

React 相關

• 函數式編程與 React 高階組件
• 關於 this.setState() 的那些事
• 如何從零開源一個 React 組件
• 21 個 React 開發神器
• Context - React 跨組件訪問數據的利器
• 掘金最污的 React16.x 圖文視頻教程
• [譯] React 的今天和明天（圖文版）
• 在 React 中跨組件分發狀態的三種方法
• React 中同構（SSR）原理脈絡梳理
• react-router v4 孫節點沒法使用 history 的解決方案
• 編寫有彈性的組件
• React 16.8發佈：hooks終於來了！
• 從 Mixin 到 HOC 再到 Hook
• 再一次深刻了解 React 的生命週期
• React Hook 介紹
• React 小技巧彙總
• Batch Update 淺析
• React 項目結構和組件命名之道
• [譯] React 16.6 懶加載(與預加載)組件
• 在 React 組件中使用 Refs 指南
• 記憶化技術介紹——使用閉包提高你的 React 性能
• Redux 源碼解讀 —— 從源碼開始學 Redux
• 網上都說操做真實 DOM 慢，但測試結果卻比 React 更快，爲何？
• React 中的各類組件
• React Native 組件的生命週期
• 在 React 中處理數據流問題的一些思考
• 源碼解析 React Hook 構建過程：沒有設計就是最好的設計
• React 組件生命週期函數裏 setState 調用分析
• React 優雅處理表單聯動
• React.js 發展史
• React 測試指南 - 橘子小睿的前端雜記
• 完全理解 React 之React SSR、React服務端渲染，教你從零搭建配置
• 解讀Ant Design Form中的onChange
• 剖析 React 源碼：先熱個身
• React PureComponent 使用指南
• 緩存 React 事件監聽器來提升性能
• 「React Hooks」120行代碼實現一個交互完整的拖拽上傳組件
• Redux入門教程（快速上手）
• 實戰項目後對 React Hooks 總結
• 對 React Hooks 的一些思考
• 可靠 React 組件設計的 7 個準則之 SRP
• 淺析 React/Vue 跨端渲染原理與實現
• React + Koa 實現服務端渲染(SSR)
• 如何通俗易懂地解釋 React 生命週期方法？
• 發佈一個 React 組件——react-read-pdf，用於在移動端展現 PDF 文件
• React 源碼分析
• React 無狀態組件你真的知道嗎？
• React組件設計實踐總結 - 組件的組織
• 21 個讓 React 開發更高效更有趣的工具
• [譯] 2019 年你應該要知道的 11 個 React UI 組件庫

Vue 相關

• Vue 技能進階：使用設計模式寫出優雅的前端代碼
• Vue 組件數據通訊方案總結
• 細談 vue 核心 - 抽象組件實戰篇
• 帶你五步學會 Vue SSR
• vue.ant.design 低調上線
• Vue 探索與實踐
• vue組件間通訊六種方式（完整版）
• 2019 年 Vue 生態圈調查：92% 的開發者將繼續用 Vue
• 前端理解依賴注入(控制反轉)
• 如何優雅的在 vue 中添加權限控制
• 如何在vue項目中優雅地使用 SVG
• Vue 2.6 發佈了
• 2018 年最好的 45 個 Vue 開源項目彙總
• Vue 數據通訊詳解 - 全棧工程師自我修養
• Vue 3.0 Updates
• Vue 服務端渲染實踐 — Web應用首屏耗時最優化方案
• 詳解 Vue 異步更新和 nextTick
• 你或許不知道 Vue 的這些小技巧
• vue 組件之間 8 種組件通訊方式總結
• 人人都會 Vue，你的優點在哪裏？
• Vue 單頁項目 SEO 徹底指南 - 掘金
• Vue 調試神器之 Vue.js devTools
• 編寫支持 SSR 的通用組件指南
• 加快 Vue 項目的開發速度
• 如何搭建一個高可用的服務端渲染工程
• Vue.js 的動態組件模板
• Vue.js 模板解析器原理
• Vue.js 中學習使用 Vuex 詳解
• 尤大多倫多演講：Vue 3.0 預覽
• 尤雨溪迴應：Vue 與 TypeScript爲 什麼相性特別差？
• Vue 開發必須知道的 36 個技巧
• Electron-vue 開發實戰之插件系統（CLI）

工具相關

• 關於 Babel 你必須知道的
• VSCode 原理解析 - 斷點調試
• Chrome 的調試技巧
• 多圖預警，Chrome 瀏覽器前端調試技巧大揭祕
• weekly/101.精讀《持續集成 vs 持續交付 vs 持續部署》
• GitHub 免費支持 CI/CD 了，開發測試部署高度自動化，支持各類語言
• 構建工具篇 - react 的 yarn eject 構建命令都作了什麼
• Webpack 系列（二）手寫模塊打包代碼 | yhlben的前端日誌
• parcel極速打包快速開始
• npm 已落伍，下一代包管理器 Tink 正在孵化
• 一個被忽視的 webpack 插件
• 13 個 npm 快速開發技巧 - 掘金
• npm進階——如何擁有本身的包和流程自動化
• [譯]635000 個 npm 包中我應該用哪一個
• npm包的發佈和管理 - 用戶與產品
• 你所不知道的模塊調試技巧 - npm link
• Yarn vs npm：你須要知道的一切
• npm scripts 使用指南 - 阮一峯的網絡日誌
• NPM生態報告，React和Vue的差距竟然這麼大？
• 優雅的提交你的 Git Commit Message
• eslint + husky + prettier + lint-staged 提高前端應用質量
• Webpack 的 Bundle Split 和 Code Split 區別和應用
• JS/CSS體積減小了67%，咱們是如何作到的？
• 你配置 Webpack 4 的方式多是錯的！
• Webpack5.0 新特性嚐鮮實戰
• Webpack 是怎樣運行的?
• 我經歷過 Webpack 一、二、三、4 變遷後，深度拆解了Webpack
• Webapck4 + Babel7 優化 70% 速度
• webpack模塊化原理-commonjs
• webpack4.x 最詳細入門講解
• 深刻理解 ESLint
• React 單元測試策略及落地
• 基於 Jenkins、Gitlab、Harbor、Helm 和 Kubernetes 的 CI/CD
• 善用工具之 postman 高級用法概述
• 前端構建：3 類 13 種熱門工具的選型參考
• 如何改善既有 JS 代碼：修復常見的 ESLint 報警（一）
• 如何改善既有 JS 代碼：修復常見的 ESLint 報警（二）
• 如何改善既有 JS 代碼：修復常見的 ESLint 報警（三）
• 如何改善既有 JS 代碼：修復常見的 ESLint 報警（四）
• Webpack 優化——將你的構建效率提速翻倍
• Chrome 專家調試法 - 介紹 Chrome 開發者工具的最佳用法
• 靈活使用 console 讓 js 調試更簡單
• Webpack 最小化 lodash
• 由 Underscore 與 Lodash 的差別引起的思考
• 絕對驚豔到你的 DevTools 小技巧 —— 控制檯 $
• 使用 JSON-Server 和 Faker.js 模擬 REST API
• WebPack 原理

方案彙總

• 技術驅動：先後端的協同效率從哪些方面發力推動
• 一文讀懂單頁應用和多頁應用的區別
• 2019 前端工程師自檢清單與思考
• if 我是前端團隊 Leader，怎麼制定前端協做規範?
• 深度 | API 設計最佳實踐的思考
• GitHub 60000+ Star：命令行的藝術
• 小菜前端的技術棧是如何規劃和演進的
• 漫談前端體系建設
• Why review code?
• Code Review 最佳實踐
• [譯] 你可能不須要單頁面應用
• 列一份前端知識架構圖 | 極客時間
• 從薛定諤的貓聊到 Event loop
• 正則表達式不要背
• 中臺微服務了，那前端呢？
• 精讀《前端與 BI》
• Data URL 簡介與使用
• 瀏覽器輸入 url 到發起 http 請求所經歷的過程
• 咱們評測了 5 個主流跨端框架，這是它們的區別
• 語義解析在 UI2CODE 中的應用
• UI2CODE 中的深度學習 + 傳統算法應用
• UI2CODE 閒魚基於圖片生成跨端代碼
• 場景中臺化助力提高上下游協做效率
• 從淘寶前端工程化演進，看工程化之路如何「私人訂製」？
• 前端中臺系統常見問題剖析與解決方案
• 一篇文章搞明白 CORS 跨域
• 正則極簡教程，不再會學了忘
• 爲什麼現代 Web 開發如此複雜？
• 打造 10000 Star 的前端開源項目
• 2020 年你應該知道的 8 種前端 JavaScript 趨勢和工具
• 前端微服務在字節跳動的落地之路
• MNN - 端側推理引擎面臨的挑戰與應對
• 數據埋點方案和規範肯定
• 數據產品的前端技術選型的思考
• 商業化場景中，如何以大前端視角提高流量變現效率？
• 深度解讀當代前端架構進化史，下一個趨勢在哪？
• 大前端時代下的微前端架構：實現增量升級、代碼解耦、獨立部署
• 深度解讀當代前端架構演進與趨勢
• RGB、HSL、Hex 網頁色彩，看完這篇全懂了
• 十年磨一劍 | 淘寶如何打造承載億級流量的首頁？
• Base64 原理淺析
• 爲何說 Web 開發的將來在於組件？
• 拋開 Vue、React、JQuery 這類第三方 JS，咱們該怎麼寫代碼？
• 如何優雅地生成結構化的初始數據
• 這應該是你見過的最全前端下載總結
• 你真的會拆分代碼嗎？
• 寫給新手前端的各類文件上傳攻略，從小圖片到大文件斷點續傳
• 前端工程師完全征服樹結構組件的祕籍
• 你所不知道的 localStorage
• 我是如何將業務代碼寫優雅的
• 詳解前端異步編程的六種方案
• 如何對前端圖片主題色進行提取？
• 前端工程實踐之可視化搭建系統
• 由一個 emoji 引起的思考
• 如何和後端小哥哥導出 word 圖表
• [譯] 揭開 ARIA 的神祕面紗
• 從前端角度理解緩存
• Handtrack.js 開源：3 行 JS 代碼搞定手部動做跟蹤
• Jest + Enzyme 前端自動化測試
• 先後端常見的幾種鑑權方式
• 九種跨域方式實現原理（完整版）
• Service Worker 的生命週期及使用場景
• 每日優鮮供應鏈前端團隊微前端改造
• 看完這篇，你也能夠實現一個 360 度全景插件
• 關於前端組件化、狀態管理規範化的思考
• 被稱爲「三大框架」替代方案，Svelte 如何簡化 Web 開發工做
• 不一樣瀏覽器下 autoplay 的限制策略和方案的整理
• 給 2019 年前端的五個建議
• Mvvm 前端數據流框架精講
• 前端文件下載兼容方案（兼容主流瀏覽器，包括IE與Safari）
• 註釋那些事兒 - 前端代碼質量系列文章（一）
• 如何使用 Postman 來 Mock API？
• Element-UI 技術揭祕 — Container佈局容器組件的設計與實現
• 前端 JS 實現字符串/圖片/excel文件下載
• 從圖形到像素：前端圖形編程技術概覽
• 圈複雜度那些事兒-前端代碼質量系列文章（二）
• 關於漸進式Web應用，你須要瞭解的全部事
• 如何保障前端項目代碼質量
• 前端監控實踐——FMP的智能獲取算法
• 單點登陸原理與簡單實現
• 爲你的網頁添加深色模式 - 瘋狂的技術宅
• 精讀《如何編譯前端項目與組件》
• 寫過『通用前端組件』嗎?
• 純前端 JS zip 打包文件並下載
• How To Design Better JavaScript APIs
• 前端埋點統計方案思考
• 談談 StorageEvent
• 一文搞定前端 Jenkins 自動化部署
• 前端路由跳轉基本原理
• 開工第一天，阿里工程師如何解鎖晨會新姿式？
• 如何處理好先後端分離的 API 問題
• 簡單聊聊前端開發中的熱更新原理
• 一塊兒來燃燒 Bundle 的「卡路里」
• 簡單策略讓前端資源實現高可用
• 從零到一：實現通用一鏡到底 H5
• php，vue，vue-ssr 作出來的頁面有什麼區別？
• 理解跨域及經常使用解決方案
• 自定義錯誤及擴展錯誤
• 前端如何高效的與後端協做開發
• 數據可視化：淺談熱力圖如何在前端實現
• 選擇 JavaScript 開源庫時，你須要考慮這些問題
• 從先後端分離看阿里 Web 應用架構演變
• 每一個前端工程師都應該瞭解的圖片知識
• 工程師如何「神還原」用戶問題？閒魚回放技術揭祕
• 從 IIFE 聊到 Babel 帶你深刻了解前端模塊化發展體系
• 前端中的 IoC 理念
• 大型項目前端架構淺談
• 從表單抽象到表單中臺
• 前端模塊化詳解（完整版）
• 前端跨頁面通訊，你知道哪些方法
• 再談使用開源軟件搭建數據分析平臺
• Kubernetes 在有讚的實踐
• 2018 年值得關注的 10 大 JavaScript 動畫庫
• 解決 "Script Error" 的另類思路
• 前端組件庫開發展現平臺對比 bisheng-vs-storybook
• 複雜表單應用解耦，淘寶機票訂單實踐
• Web 實時推送技術的總結
• 議 Function Component 與 Hooks
• 聊一聊前端換膚
• 5 種滾動吸頂效果實現方式的比較
• 完美實現一個「回到頂部」
• 百度 Web 前端開發實戰案例解析
• 前端項目容器化之旅
• 40 篇+阿里技術經典案例，看完必收藏
• 觸發瀏覽器迴流的屬性方法一覽表
• 從項目的 star 數看 2018 年 JavaScript 生態圈
• 前端經常使用插件、工具類庫彙總
• 前端團隊代碼評審 CheckList 清單
• 企業IT架構轉型之道：阿里巴巴中臺戰略思想與架構實戰

瀏覽器

• Firefox Preview發佈，下一代移動瀏覽器
• 瀏覽器相關原理(面試題)詳細總結
• Chrome 76 Beta版功能嚐鮮：dark模式、輕鬆安裝PWA、隱身模式難檢測
• 打造前端離線日誌(一): IndexedDB
• 使用 Chrome 原生 lazyload 屬性進行圖片懶加載
• 如何監控網頁崩潰？
• Chrome72嵌套flex佈局修改，你的網站可能會發生布局錯亂
• 圖解瀏覽器的工做原理（史上最全）
• 喜大普奔！Chrome 75 將原生支持圖片懶加載
• 你的瀏覽器爲何卡
• 瀏覽器重繪(repaint)重排(reflow)與優化[瀏覽器機制]
• 瀏覽器攔截打開新窗口狀況總結
• [譯] 調試的藝術
• 瀏覽器的進程與線程詳解
• 谷歌在Chrome 74中試驗內置模塊KV Storage
• Web 關閉頁面時發送 Ajax 請求 —— sendBeacon
• 從輸入 URL 到展示涉及哪些緩存環節(很是詳細)
• 瀏覽器渲染基本原理解析

多終端

• 用 JS 開發跨平臺桌面應用，從原理到實踐
• 使用 Flutter 一年後，這是我獲得的經驗
• flutter 的進階之路之經常使用組件
• 爲何 Flutter 是跨平臺開發的終極之選
• 重磅系列文章！UI2CODE 智能生成 Flutter 代碼
• 爲 JavaScript 開發人員準備的 Dart 參考教程
• flutter 支付寶APP支付 （包含後臺）
• Flutter 入坑分享
• Flutter 原理與閒魚深度實踐
• 我想學Flutter，可是我不知道應該如何開始？
• 10 分鐘讀懂阿里巴巴高級專家在 Flutter Live2018 的分享
• 平庸前端碼農之蛻變 — AST
• 懂編譯真的能夠隨心所欲，不一樣前端框架下的代碼轉換
• 一文帶你瞭解全部小程序平臺
• H5 必知必會之像素級還原設計稿
• 移動端適配方案-讓分辨率來的更猛烈些吧！
• 打通先後端邏輯，客戶端 Flutter 代碼一天上線
• 原生 JS 實現移動端 Touch 滑動反彈
• H5拍照上傳填坑彙總
• 關於移動端適配，你必需要知道的
• 站在一個前端的角度瞭解 app 裏使用的 webview
• 從 SPA 到 PWA：Web App的下一站在哪？
• H5 必知必會之與 App 交互

安全相關

• 常見六大 Web 安全攻防解析
• 周下載量過 200 萬的 npm 包被注入惡意代碼
• Web 安全漏洞之文件上傳
• web 應用常見安全漏洞一覽
• 最新：Lodash 嚴重安全漏洞背後你不得不知道的 JavaScript 知識
• 爲何 Facebook 的 API 以一個循環做爲開頭？
• 常見六大 Web 安全攻防解析
• 談 target="_blank" 的安全問題
• Web 安全漏洞之 XSS 攻擊
• 反擊爬蟲，前端工程師的腦洞能夠有多大？

HTTP 相關

• HTTP 的前世此生：一次性搞懂 HTTP、HTTPS、SPDY、HTTP2
• 解讀HTTP/2與HTTP/3 的新特
• 圖解HTTPS基本原理
• 快速搭建基於HTTPS的本地開發環境
• 爲何咱們應該儘快升級到 HTTPS？
• 最全HTTP安全響應頭設置指南
• HTTPS 到底加密了什麼？
• 正確處理下載文件時HTTP頭的編碼問題（Content-Disposition）
• WebSocket 協議介紹及 WebSocket API 應用
• HTTP狀態碼詳解
• 深刻淺出HTTPS工做原理
• 深刻理解 https 工做原理
• 關於Http協議，你必需要知道的
• 淺談HTTP Keep-Alive

職業感悟

• 支付寶玉伯：從前端到體驗，如何把格局作大？
• 左耳朵耗子：軟件開發這些年，我學會的道理和教訓
• 互聯網時代，你還在討論如何作好軟件測試，咱們已經在討論如何「幹掉」測試了
• 面試官角度看應聘：問題到底出在哪？（上）
• 面試官角度看應聘：問題到底出在哪？（下）
• 阿里前端技術委員會主席在「前端路上的思考」
• 優秀工程師必備的一項技能，你解鎖了嗎？
• 解密初、中、高級程序員的進化之路（前端）
• 如何成爲一位失敗的程序員
• 玉伯：從前端到體驗，如何把格局作大
• 前端開發 20 年變遷史
• 如何避免成爲大公司的「螺絲釘」？| 獨立判斷三板斧
• 技術三板斧：關於技術規劃、管理、架構的思考
• 談談我對 code-review 的理解| 掘金年度徵文
• 我在淘寶作前端的這三年 — 第一年
• 我在淘寶作前端的這三年 — 第二年
• 我在淘寶作前端的這三年 — 第三年
• 張鑫旭：前端專業方向的盡頭
• 那些你羨慕的生活背後，都有你熬不了的苦
• 給 2019 前端的 5 個建議
• 產品經理必需要知道的 25 個簡約設計理念
• 2018 年的前端是否有『架構』可言?
• 阿里五年晉升三次，這個程序員要聊聊他的選擇
• 要作軟件工程師，而不是前端工程師
• 知乎高贊：比勤奮更能決定人生的，是系統思惟
• 世界是平的嗎？——從不一樣角度看前端
• 做爲 IT 行業的過來人，你有什麼話想對後輩說的？
• 寫技術博客那點事
• 爲何前端開發這麼不穩定？
• 想寫好前端，先練好內功
• 從前端角度看企業軟件的研發過程
• 在阿里雲作前端，是種怎樣的體驗？
• 優秀開發者應該具有的思惟習慣
• 360 高級前端架構師 Hax(賀師俊)：前端開發編程語言的過去、如今和將來
• 若是我是一線技術主管……
• 乾貨 | 10x程序員是如何思考的？

招賢納士

招人，前端，隸屬政採雲前端大團隊（ZooTeam），50 餘個小夥伴正等你加入一塊兒浪～ 若是你想改變一直被事折騰，但願開始能折騰事；若是你想改變一直被告誡須要多些想法，卻無從破局；若是你想改變你有能力去作成那個結果，卻不須要你；若是你想改變你想作成的事須要一個團隊去支撐，但沒你帶人的位置；若是你想改變「5年工做時間3年工做經驗」；若是你想改變原本悟性不錯，但老是有那一層窗戶紙的模糊… 若是你相信相信的力量，相信平凡人能成就非凡事，相信能遇到更好的本身。若是你但願參與到隨着業務騰飛的過程，親手參與一個有着深刻的業務理解、完善的技術體系、技術創造價值、影響力外溢的前端團隊的成長曆程，我以爲咱們該聊聊。任什麼時候間，等着你寫點什麼，發給ZooTeam@cai-inc.com

推薦閱讀

前端工程實踐之可視化搭建系統（一）

寫給前端工程師的 Serverless 入門

自動化 Web 性能優化分析方案