1024 鉅獻！！一文看盡過去一年前端領域的那些好文（700 篇大彙總）

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

由於字數限制，想要查看全部 700 篇好文，請戳這裏：1024 鉅獻！！一文看盡過去一年前端領域的那些好文（700 篇大彙總）

表現

• BFC 究竟是個什麼東東？ https://juejin.im/post/5d633ea151882537930bbd8e
• 前端進階之什麼是 BFC？BFC 的原理是什麼？如何創建BFC？ https://juejin.im/post/5cee1b38e51d4556be5b39e1
• position:sticky 的用法 https://www.zhangxinxu.com/wordpress/2018/12/css-position-sticky/
• CSS-position:static/relative/absolute/fixed 定位 https://juejin.im/entry/59c253806fb9a00a4455fa0a
• 26 個常用易忘 CSS 小技巧 https://juejin.im/post/5da3a357f265da5b6723ee1e
• CSS3 box-shadow 效果大全（內陰影，外陰影，三邊陰影，雙邊陰影，單邊陰影，細線描邊…）https://www.html.cn/archives/9360
• 溫故而知 CSS 世界 https://mp.weixin.qq.com/s/u-nshXoFGKOGUKp0YcwEyQ
• 【譯】這 44 個 CSS 精選知識點你能在 30 秒內給出答案嗎？https://juejin.im/post/5d40120f6fb9a06b0471d956
• CSS 層疊上下文（Stacking Context）https://mp.weixin.qq.com/s/THhLxXrGJOPLCVrA0xnlDw
• CSS Painting API https://mp.weixin.qq.com/s/IaBKYKfQgDOoIwNeHybmQg
• ... ...

行爲

• 精讀《async/await 是把雙刃劍》https://segmentfault.com/a/1190000014753495
• ES6 核心特性 https://segmentfault.com/a/1190000017139065
• Promise &
• ES6 完全使用手冊 https://juejin.im/post/5bfe05505188252098022400
• 現代 JS 中的流控制：Callbacks to Promises to Async/Await https://www.zcfy.cc/article/flow-control-in-modern-js-callbacks-to-promises-to-async-await
• Async Clipboard API 來了 https://mp.weixin.qq.com/s/2SFPhRVbbtMz3PatKTPF8w
• JavaScript 箭頭函數：適用與不適用場景 https://mp.weixin.qq.com/s/vVTMawWDQv2kv8f4IyjWbw
• 探尋 ECMAScript 中的裝飾器 Decorator https://github.com/rccoder/blog/issues/23
• 站住，你這個Promise！ https://mp.weixin.qq.com/s/aj45Rfpv5X0CxCpYRCLcmQ
• 看看這些被同事噴的JS代碼風格你寫過多少 https://mp.weixin.qq.com/s/f6DHgoTGcCIaN3Orlq45LA
• ... ...

服務端

• 淺談 Node.js 在攜程的應用 https://www.infoq.cn/article/LwLAaADiaY1twBsC*tCi
• Node 12 值得關注的新特性 https://mp.weixin.qq.com/s/qUbSfVsrvFVjbcPZQRjSvQ
• NodeJS 與模塊系統 https://mp.weixin.qq.com/s/uDp0v_1hN0Uzg-EGr1yfgA
• NodeJS 和命令行程序 https://mp.weixin.qq.com/s/-jxYbmcbdt5IvpJC0BYOjg
• 用 Now 輕鬆部署無服務器 Node 應用程序 https://mp.weixin.qq.com/s/mRIvHBWMf95KsbRVS6u2lA
• Node.js 環境性能監控 https://mp.weixin.qq.com/s/bWP1AtARhHkDhamGTAuTPg
• 初涉全棧：Node+MySQL 實現登錄的簡單功能 https://juejin.im/post/5d6694496fb9a06adb7ff441
• 作爲一個前端工程師也要掌握的幾種文件路徑知識 https://juejin.im/post/5d1a3328e51d4510727c80e4
• 基於 NodeJS 從 0 到1 實現一個 CMS 全棧項目 https://juejin.im/post/5d8af4cd6fb9a04e0925f3d8
• 寫給前端的 Docker 實戰教程 https://juejin.im/post/5d8440ebe51d4561eb0b2751
• ... ...

性能體驗

• Vue - Table表格渲染上千數據優化 https://zhuanlan.zhihu.com/p/53455289
• Chrome 運行時性能瓶頸分析 https://mp.weixin.qq.com/s/P_hOjdEG9YTt-kqYGyNb9g
• 配置Tree Shaking來減少JavaScript的打包體積 https://www.cnblogs.com/fundebug/archive/2018/08/15/reduce_js_payload_with_tree_shaking.html
• HTTP/2 與 WEB 性能優化（三） https://imququ.com/post/http2-and-wpo-3.html
• 提升90%加載速度——vuecli下的首屏性能優化 https://mp.weixin.qq.com/s/ED-B_eeR2tewRxJmdZdyeQ
• 如何在瀏覽器不崩潰的情況下過濾200萬行數據？ https://mp.weixin.qq.com/s/k6XUFlx7npuu1sxy73qZzg
• 前端性能優化之重排和重繪 https://segmentfault.com/a/1190000016990089
• 螞蟻金服如何把前端性能監控做到極致? https://mp.weixin.qq.com/s/pqFhhb5u6w7gmUutilH5xQ
• 網站性能指標這麼多，你到底選對了嗎？ https://juejin.im/post/5d78d7546fb9a06af13d9548
• JavaScript 性能優化之搖樹 https://mp.weixin.qq.com/s/3maI-GFD4Cilt6GSSzRgwQ
• ... ...

React 相關

• 函數式編程與 React 高階組件 https://www.cnblogs.com/isLiu/p/8081393.html
• 關於 this.setState 的那些事 https://www.jianshu.com/p/a883552c67de
• 如何從零開源一個 React 組件 https://zhuanlan.zhihu.com/p/73605806
• 21 個 React 開發神器 https://zhuanlan.zhihu.com/p/78051039
• Context - React 跨組件訪問數據的利器 https://juejin.im/post/5be10e436fb9a04a053f21f5
• 掘金最污的 React16.x 圖文視頻教程 https://juejin.im/post/5d085be0f265da1bac401937
• 譯 React 的今天和明天（圖文版） https://juejin.im/post/5bfccbf8f265da61407e97b5
• 在 React 中跨組件分發狀態的三種方法 https://www.zcfy.cc/article/three-approaches-to-distribute-the-state-across-components-in-react
• React 中同構（SSR）原理脈絡梳理 https://mp.weixin.qq.com/s/BXC6tZyY6fsi8l8dJ40nug
• react-router v4 孫節點無法使用 history 的解決方案 http://qqweb.top/Blog/Detail/81
• ... ...

Vue 相關

• Vue 技能進階：使用設計模式寫出優雅的前端代碼 https://mp.weixin.qq.com/s?__biz=MzUxMzcxMzE5Ng==&mid=2247492133&idx=1&sn=3d8eb0bd3427c426bd54b5fa361220ba&chksm=f9525766ce25de7005381b7563503e81cdb8933908ed1e8232da1398668a338efe7004aab94e&mpshare=1&scene=1&srcid=&sharer_sharetime=15656205
• Vue 組件數據通信方案總結 https://juejin.im/post/5d650723f265da03951a0369
• 細談 vue 核心 - 抽象組件實戰篇 https://mp.weixin.qq.com/s/nXWbDEbseenaAvX_UkK4tQ
• 帶你五步學會 Vue SSR https://juejin.im/post/5bbda9ed5188255c8f06c0dc
• vue.ant.design 低調上線 https://mp.weixin.qq.com/s/BPs7gorjEe7wmjBka9n0Bg
• Vue 探索與實踐 https://aotu.io/notes/2017/07/17/The-Exploration-and-Practice-of-Vue/
• vue組件間通信六種方式（完整版） https://mp.weixin.qq.com/s/vtcb5D7ncntbwHMCDRi3mw
• 2019 年 Vue 生態圈調查：92% 的開發者將繼續用 Vue https://mp.weixin.qq.com/s/MC6n4RjgOUI1Ggm_r5WlQw
• 前端理解依賴注入 控制反轉 https://segmentfault.com/a/1190000020320255
• 如何優雅的在 vue 中添加權限控制 https://mp.weixin.qq.com/s/B-XbG_qvzqj4jt3jDEBLQA
• ... ...

工具相關

• 關於 Babel 你必須知道的 https://mp.weixin.qq.com/s/1OyBkl5NnFO1q86L7GjQwg
• VSCode 原理解析 - 斷點調試 https://fed.taobao.org/blog/2019/08/15/vscode-debug-source-analyse/
• Chrome 的調試技巧 https://juejin.im/post/5c0e0fa0e51d452afa65d626
• 多圖預警，Chrome 瀏覽器前端調試技巧大揭祕 https://mp.weixin.qq.com/s/0d53JUQ0Qqkm8RKbvSxtfg
• weekly/101.精讀《持續集成 vs 持續交付 vs 持續部署》 https://github.com/dt-fe/weekly/blob/v2/101.%E7%B2%BE%E8%AF%BB%E3%80%8A%E6%8C%81%E7%BB%AD%E9%9B%86%E6%88%90%20vs%20%E6%8C%81%E7%BB%AD%E4%BA%A4%E4%BB%98%20vs%20%E6%8C%81%E7%BB%AD%E9%83%A8%E7%BD%B2%E3%80%8B.md
• GitHub 免費支持 CI/CD 了，開發測試部署高度自動化，支持各種語言 https://mp.weixin.qq.com/s/CxblbkhfP82CzRQ_0ttlFw?spm=a2c4e.10696291.0.0.251619a4pqMYJi
• 構建工具篇 - react 的 yarn eject 構建命令都做了什麼 https://juejin.im/post/5cf52a56f265da1b7e1022dd
• Webpack 系列（二）手寫模塊打包代碼 | yhlben的前端日誌 https://yhlben.github.io/blog/project-webpack-flow.html#%E6%89%8B%E5%86%99%E4%B8%80%E4%B8%AA%E6%A8%A1%E5%9D%97%E6%89%93%E5%8C%85%E4%BB%A3%E7%A0%81
• parcel極速打包快速開始 https://parceljs.org/getting_started.html
• npm 已落伍，下一代包管理器 Tink 正在孵化 https://mp.weixin.qq.com/s/wDMcKSYUsZDtx9sSzSDyBg
• ... ...

方案彙總

• 技術驅動：前後端的協同效率從哪些方面發力推進 https://segmentfault.com/a/1190000018997619
• 一文讀懂單頁應用和多頁應用的區別 https://juejin.im/post/5cffa35a6fb9a07ec63b0bb0
• 2019 前端工程師自檢清單與思考 https://segmentfault.com/a/1190000018873042
• if 我是前端團隊 Leader，怎麼制定前端協作規範? https://juejin.im/post/5d3a7134f265da1b5d57f1ed
• 深度 | API 設計最佳實踐的思考 https://mp.weixin.qq.com/s/qWrSyzJ54YEw8sLCxAEKlA
• GitHub 60000+ Star：命令行的藝術 https://juejin.im/post/5d8b1899f265da5b9d1edee2
• 小菜前端的技術棧是如何規劃和演進的 https://segmentfault.com/a/1190000018997167
• 漫談前端體系建設 https://zhuanlan.zhihu.com/p/28299873
• Why review code? https://mp.weixin.qq.com/s/5m3bBzFTN82ttEFN5EpBew
• Code Review 最佳實踐 https://mp.weixin.qq.com/s/n-QwVxZEFB-rpf7YX-mV4Q
• ... ...

瀏覽器

• Firefox Preview發佈，下一代移動瀏覽器 https://mp.weixin.qq.com/s/CXoMv6AkUWGOqIzDQFkPwQ
• 瀏覽器相關原理 面試題詳細總結 https://juejin.im/post/5da18b1af265da5bb318ed07
• Chrome 76 Beta版功能嚐鮮：dark模式、輕鬆安裝PWA、隱身模式難檢測 https://mp.weixin.qq.com/s/N3FwgB67Rg-1jumSRJEDZQ
• 打造前端離線日誌 一: IndexedDB https://mp.weixin.qq.com/s/5XgvU3Coiz6S-RCcBJ4S7g
• 使用 Chrome 原生 lazyload 屬性進行圖片懶加載 https://segmentfault.com/p/1210000017019844
• 如何監控網頁崩潰？ https://mp.weixin.qq.com/s/HnMZLI7hZ5sXU7bOXh615A
• Chrome72嵌套flex佈局修改，你的網站可能會發生布局錯亂 https://juejin.im/post/5c642f2ff265da2de660ecfc
• 圖解瀏覽器的工作原理（史上最全） https://mp.weixin.qq.com/s/X4yAFZBNLwaDUFYaR0Cn5g
• 喜大普奔！Chrome 75 將原生支持圖片懶加載 https://mp.weixin.qq.com/s/wOZLB_yP2d2BgbiVWqSKTA?utm_medium=hao.caibaojian.com&utm_source=hao.caibaojian.com
• 你的瀏覽器爲什麼卡 https://mp.weixin.qq.com/s/NUrqeJ6UjWe7CxTGofdtNw
• ... ...

多終端

• 用 JS 開發跨平臺桌面應用，從原理到實踐 https://mp.weixin.qq.com/s/4WaUM8iJoEYgrI_HpC5MOQ
• 使用 Flutter 一年後，這是我得到的經驗 https://mp.weixin.qq.com/s/FmK0RMCNNJe68Aq7tOUROA
• flutter 的進階之路之常用組件 https://juejin.im/post/5d67abfd51882569eb571be9
• 爲什麼 Flutter 是跨平臺開發的終極之選 https://mp.weixin.qq.com/s/R0sk9CGPbBksSnWV9xtGSg
• 重磅系列文章！UI2CODE 智能生成 Flutter 代碼 https://mp.weixin.qq.com/s/4s6MaiuW4VoHr_7f0S_vuQ
• 爲 JavaScript 開發人員準備的 Dart 參考教程 https://mp.weixin.qq.com/s/q-iObT6RTMx5FDMv7l4Ipw
• flutter 支付寶APP支付 （包含後臺） https://juejin.im/post/5d9750925188250911143d70
• Flutter 入坑分享 http://blog.myweb.kim/flutter/Flutter%E5%85%A5%E5%9D%91%E5%88%86%E4%BA%AB/
• Flutter 原理與閒魚深度實踐 https://mp.weixin.qq.com/s/sggBSYcH9_Mjt_zGjqStRw
• 我想學Flutter，但是我不知道應該如何開始？ https://mp.weixin.qq.com/s/KD8LfT6qDeMsiz0YGDsJVw
• ... ...

安全相關

• 常見六大 Web 安全攻防解析 https://mp.weixin.qq.com/s/JttR5idAeAWLHUVu-_7CHA
• 周下載量過 200 萬的 npm 包被注入惡意代碼 https://mp.weixin.qq.com/s/j_U6vQRu360iXwieG33DBA
• Web 安全漏洞之文件上傳 https://mp.weixin.qq.com/s/MNdstO9ahpcXp5JTHErBxg
• web 應用常見安全漏洞一覽 https://mp.weixin.qq.com/s/iXJOTFJV2CprUI2uwDBBBQ
• 最新：Lodash 嚴重安全漏洞背後你不得不知道的 JavaScript 知識 https://juejin.im/post/5d271332f265da1b934e2d48
• 爲什麼 Facebook 的 API 以一個循環作爲開頭？ https://mp.weixin.qq.com/s/WHh9v3icCc90PwiLyv0Hng
• 常見六大 Web 安全攻防解析 https://segmentfault.com/a/1190000018073845
• 談 target="
• Web 安全漏洞之 XSS 攻擊 https://segmentfault.com/a/1190000017057646
• 反擊爬蟲，前端工程師的腦洞可以有多大？ http://imweb.io/topic/595b7161d6ca6b4f0ac71f05

HTTP 相關

• HTTP 的前世今生：一次性搞懂 HTTP、HTTPS、SPDY、HTTP2 https://segmentfault.com/a/1190000016996541
• 解讀HTTP/2與HTTP/3 的新特 https://mp.weixin.qq.com/s/2LJrvum4solO38bwL9tSDQ
• 圖解HTTPS基本原理 https://juejin.im/post/5d53aa04f265da03934bd70c
• 快速搭建基於HTTPS的本地開發環境 https://mp.weixin.qq.com/s/j7WmuruPmvrnPK8kk3L7dw
• 爲什麼我們應該儘快升級到 HTTPS？ https://imququ.com/post/moving-to-https-asap.html
• 最全HTTP安全響應頭設置指南 https://mp.weixin.qq.com/s/LxUUKuQa7XrOCrtyc3g91w
• HTTPS 到底加密了什麼？ https://zhuanlan.zhihu.com/p/38278311
• 正確處理下載文件時HTTP頭的編碼問題（Content-Disposition） https://mp.weixin.qq.com/s/w3P_qRQvsxrnmtBH1V04KQ
• WebSocket 協議介紹及 WebSocket API 應用 https://mp.weixin.qq.com/s/PqM26pHgr9QJYifQuFmASA
• HTTP狀態碼詳解 https://tool.oschina.net/commons?type=5
• ... ...

職業感悟

• 支付寶玉伯：從前端到體驗，如何把格局做大？ https://mp.weixin.qq.com/s/TIzXvAEi1cFCDVgCaQXYXw
• 左耳朵耗子：軟件開發這些年，我學會的道理和教訓 https://mp.weixin.qq.com/s/-Gus3fGHXcRBvuKjrwQStA
• 互聯網時代，你還在討論如何做好軟件測試，我們已經在討論如何“幹掉”測試了 https://mp.weixin.qq.com/s/Pkhxa8v9e40Sd_91CONWpw
• 面試官角度看應聘：問題到底出在哪？（上） https://juejin.im/post/5d6baf43e51d453bb13b6674
• 面試官角度看應聘：問題到底出在哪？（下） https://juejin.im/post/5d7062adf265da03ee6a776b
• 阿里前端技術委員會主席在“前端路上的思考” https://mp.weixin.qq.com/s/_R2yjClaRuU0dZyFafAMMA
• 優秀工程師必備的一項技能，你解鎖了嗎？ https://mp.weixin.qq.com/s/q05Df_TKWUSlhK6V6KTrfw
• 解密初、中、高級程序員的進化之路（前端） https://juejin.im/post/5d3a6d9e51882570d50f5566
• 如何成爲一位失敗的程序員 https://mp.weixin.qq.com/s/mq009j-X0LJ7iBhUEOLbow
• 玉伯：從前端到體驗，如何把格局做大 https://mp.weixin.qq.com/s/JXifreRbTQcFiLqSLTNtag
• ... ...