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
• ... ...