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

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

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

表現

• BFC 到底是個什麼東東？ http://www.javashuo.com/article/p-ofuryter-u.html
• 前端進階之什麼是 BFC？BFC 的原理是什麼？如何建立BFC？ http://www.javashuo.com/article/p-yhehtrqd-g.html
• 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 小技巧 http://www.javashuo.com/article/p-tmhlpdyd-g.html
• CSS3 box-shadow 效果大全（內陰影，外陰影，三邊陰影，雙邊陰影，單邊陰影，細線描邊…）https://www.html.cn/archives/9360
• 溫故而知 CSS 世界 https://mp.weixin.qq.com/s/u-nshXoFGKOGUKp0YcwEyQ
• 【譯】這 44 個 CSS 精選知識點你能在 30 秒內給出答案嗎？http://www.javashuo.com/article/p-zongqrlv-h.html
• CSS 層疊上下文（Stacking Context）https://mp.weixin.qq.com/s/THhLxXrGJOPLCVrA0xnlDw
• CSS Painting API https://mp.weixin.qq.com/s/IaBKYKfQgDOoIwNeHybmQg
• ... ...

行爲

• 精讀《async/await 是把雙刃劍》http://www.javashuo.com/article/p-agithhca-gu.html
• ES6 核心特性 http://www.javashuo.com/article/p-nnrnnhjt-ex.html
• Promise &
• ES6 徹底使用手冊 http://www.javashuo.com/article/p-gkktueml-cd.html
• 現代 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 實現登陸的簡單功能 http://www.javashuo.com/article/p-udveljhg-ce.html
• 做爲一個前端工程師也要掌握的幾種文件路徑知識 http://www.javashuo.com/article/p-coswychm-u.html
• 基於 NodeJS 從 0 到1 實現一個 CMS 全棧項目 http://www.javashuo.com/article/p-kcqjfnbd-g.html
• 寫給前端的 Docker 實戰教程 http://www.javashuo.com/article/p-rbavkrqa-bc.html
• ... ...

性能體驗

• 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
• 前端性能優化之重排和重繪 http://www.javashuo.com/article/p-brpaqfde-eq.html
• 螞蟻金服如何把前端性能監控作到極致? https://mp.weixin.qq.com/s/pqFhhb5u6w7gmUutilH5xQ
• 網站性能指標這麼多，你到底選對了嗎？ http://www.javashuo.com/article/p-bvzcrjgw-bh.html
• JavaScript 性能優化之搖樹 https://mp.weixin.qq.com/s/3maI-GFD4Cilt6GSSzRgwQ
• ... ...

React 相關

• 函數式編程與 React 高階組件 http://www.javashuo.com/article/p-yzyfzgvo-nc.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 跨組件訪問數據的利器 http://www.javashuo.com/article/p-mcjpmtfy-bv.html
• 掘金最污的 React16.x 圖文視頻教程 http://www.javashuo.com/article/p-dgqybdoj-dx.html
• 譯 React 的今天和明天（圖文版） http://www.javashuo.com/article/p-qbkgeekx-bo.html
• 在 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 組件數據通訊方案總結 http://www.javashuo.com/article/p-xzfxydwi-bs.html
• 細談 vue 核心 - 抽象組件實戰篇 https://mp.weixin.qq.com/s/nXWbDEbseenaAvX_UkK4tQ
• 帶你五步學會 Vue SSR http://www.javashuo.com/article/p-yubakybw-be.html
• 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
• 前端理解依賴注入 控制反轉 http://www.javashuo.com/article/p-plslaaei-cb.html
• 如何優雅的在 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 的調試技巧 http://www.javashuo.com/article/p-sgavfmqv-ea.html
• 多圖預警，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 構建命令都作了什麼 http://www.javashuo.com/article/p-yxvbjsvf-cz.html
• 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
• ... ...

方案彙總

• 技術驅動：先後端的協同效率從哪些方面發力推動 http://www.javashuo.com/article/p-ogzwesfs-bd.html
• 一文讀懂單頁應用和多頁應用的區別 http://www.javashuo.com/article/p-zaqzqpaj-bw.html
• 2019 前端工程師自檢清單與思考 http://www.javashuo.com/article/p-zwrxgqxo-g.html
• if 我是前端團隊 Leader，怎麼制定前端協做規範? http://www.javashuo.com/article/p-utdbsiyb-dy.html
• 深度 | API 設計最佳實踐的思考 https://mp.weixin.qq.com/s/qWrSyzJ54YEw8sLCxAEKlA
• GitHub 60000+ Star：命令行的藝術 http://www.javashuo.com/article/p-xqgnbjmb-m.html
• 小菜前端的技術棧是如何規劃和演進的 http://www.javashuo.com/article/p-nxpcmbrl-cy.html
• 漫談前端體系建設 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
• 瀏覽器相關原理 面試題詳細總結 http://www.javashuo.com/article/p-rfremiei-ec.html
• 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佈局修改，你的網站可能會發生布局錯亂 http://www.javashuo.com/article/p-mjwirxbu-bw.html
• 圖解瀏覽器的工做原理（史上最全） 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 的進階之路之經常使用組件 http://www.javashuo.com/article/p-nhwxbkvd-be.html
• 爲何 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支付 （包含後臺） http://www.javashuo.com/article/p-mbnrcbga-w.html
• 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 知識 http://www.javashuo.com/article/p-tpwfvkfg-eu.html
• 爲何 Facebook 的 API 以一個循環做爲開頭？ https://mp.weixin.qq.com/s/WHh9v3icCc90PwiLyv0Hng
• 常見六大 Web 安全攻防解析 http://www.javashuo.com/article/p-afrgoizs-bw.html
• 談 target="
• Web 安全漏洞之 XSS 攻擊 http://www.javashuo.com/article/p-tdjkxsri-bk.html
• 反擊爬蟲，前端工程師的腦洞能夠有多大？ http://imweb.io/topic/595b7161d6ca6b4f0ac71f05

HTTP 相關

• HTTP 的前世此生：一次性搞懂 HTTP、HTTPS、SPDY、HTTP2 http://www.javashuo.com/article/p-kisjjbne-cq.html
• 解讀HTTP/2與HTTP/3 的新特 https://mp.weixin.qq.com/s/2LJrvum4solO38bwL9tSDQ
• 圖解HTTPS基本原理 http://www.javashuo.com/article/p-wpgbeyrp-gn.html
• 快速搭建基於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
• 面試官角度看應聘：問題到底出在哪？（上） http://www.javashuo.com/article/p-puoblvrg-gv.html
• 面試官角度看應聘：問題到底出在哪？（下） http://www.javashuo.com/article/p-hrstcdjy-gz.html
• 阿里前端技術委員會主席在「前端路上的思考」 https://mp.weixin.qq.com/s/_R2yjClaRuU0dZyFafAMMA
• 優秀工程師必備的一項技能，你解鎖了嗎？ https://mp.weixin.qq.com/s/q05Df_TKWUSlhK6V6KTrfw
• 解密初、中、高級程序員的進化之路（前端） http://www.javashuo.com/article/p-qzrdexlm-hc.html
• 如何成爲一位失敗的程序員 https://mp.weixin.qq.com/s/mq009j-X0LJ7iBhUEOLbow
• 玉伯：從前端到體驗，如何把格局作大 https://mp.weixin.qq.com/s/JXifreRbTQcFiLqSLTNtag
• ... ...