2020 年前端精选文章年度汇总

我又双叒分类整理了一批高质量的前端文章，当作是新年礼物送给大家。

怎么有一种拿着《5年高考3年模拟》去拜年的感觉...

如果觉得不够没关系，去年的也不过时，可以继续看：2020 年前端面试复习必读文章【超三百篇】

工程化

• 前端工程化基础只是 - CLI 篇：如何实现 Vue CLI：一篇文章搞定 Vue CLi
• 前端工程化基础只是 - CLI 篇：如何实现 Create React APP：一篇文章搞定 Create React App
• 如何用 Babel 为代码自动引入依赖：Babel 插件实战
• 简单实现 babel-plugin-import 插件：Babel 插件实战
• 自动生成组件代码—— Vue CLI 插件开发实战：实战一下 Vue CLI 插件的写法
• 2021 年前端新变化，使用 vite 替代 webpack 构建 React !：尤大就是这么自信！
• VSCode 配置 ESLint + Prettier：手把手教你配置
• 实现一个简易的模块打包器：从零开始一步一步地去实现一个简单的 webpack 模块打包器。
• 一篇十分详尽的前端工程化的文章：推荐
• 了解 JavaScript 模块基础知识，搭建自己的库：如果你不了解，看了应该就了解了
• 【纯干货】前端 CLI 脚手架思路解析：看完你就掌握前端 cli 开发了。
• 如何从 0 到 1 打造团队 PC/H5 构建工具：为什么要做？怎么去做？
• 前端小微团队的 Gitlab 实践
• 如何快速开发一个自己的脚手架？：前端工程化中必须掌握的技能
• 持续集成利器，GitHub Actions：GitHub Actions 是啥？
• 如何制定企业级代码规范与静态检查：针对定制代码规范和检查如何做出亮点？
• 12 个提高 JavaScript 开发效率的 NPM 技巧：更高效地使用 NPM。
• 4W 字长文带你深度解锁 Webpack 系列(上)：三篇长文，4W 余字，带你解锁 Webpack ，希望读完这三篇文章，你能够对 webpack 的各项配置有一
• 万字长文带你深度解锁 Webpack（进阶篇）：三篇长文带你深度解锁 Webpack ，希望读完这三篇文章，你能够对 webpack 的各项配置有一个更为清晰的认识。
• 前端工程化 - 剖析 npm 的包管理机制（完整版）：前端开发的同学已经离不开 npm 这个包管理工具

面试

• 教你如何写初/高级技术岗位简历【赠简历导图】：结合自己写简历的经验，写一篇文章聊一聊。
• 【从青铜到钻石】3 年创业公司成长经历 && 面试总结：厚积薄发
• 写在校招季：应该如何做好校招的前期工作：而是回过头来看校招，多少有些感想，可以分享给大家。
• 前端基础面试题 + 答案【分类整理、良心制作】：震惊！不造火箭，真的基础！
• 2020 抖音架构组前端实习生面经(offer)：太强了！
• 关于 Vue 最好搞清楚原理的几题面试题：不搞清楚你都不好意思说精通 Vue ~
• 75 道 JavaScript 面试题， 2.5 万字刷个够：题目 + 参考答案，看了 === 会了。
• 阿里、腾讯、美团、网易等一线互联网公司面试总结：一波大厂面试真题送上
• 上海莉莉丝、米哈游、B 站、小红书、得物等互联网公司面试总结：上海的几家互联网公司，面试的基本都是中高级前端岗位。
• 从前端性能优化引申出来的 5 道经典面试题：值得收藏
• 【面试说】一年半前端 Bigo 一二三 面：工作经验一年半多
• 2 年前端 7 ～ 9 月面试经历：10 + 公司的经历
• Vue 进阶面试必问，异步更新机制和 nextTick 原理：源码级分析，满分回答
• 20+ Vue 面试题整理：前端开发必备，搞定 Vue 面试！
• 「查缺补漏」高频考点浏览器面试题：前言想要成为一名合格的前端工程师，掌握相关浏览器的工作原理是必备的。
• 「源码级回答」大厂高频 Vue 面试题（中）：必须会的题，没得商量。
• 【源码级回答】大厂高频 Vue 面试题（上）：通过源码角度去回答一些 Vue 面试题，让面试官刮目相看。
• 21 道高频 JavaScript 手写面试题（一）：基本上面试的时候，经常会遇到手撕 XXX 之类的问题，这次准备梳理总结一遍。
• 21 道高频 JavaScript 手写面试题（二）：基本上面试的时候，经常会遇到手撕 XXX 之类的问题，这次准备梳理总结一遍。
• 面试官问你关于 node 的那些事（基础篇）：碎片化知识的梳理。
• 恐怖如斯的 4W 字 JavaScript 面试知识点：真的全
• 「面试」你不知道的 React 和 Vue 的 20 个区别：面试常见问题：从多个层面说一下 React 和 Vue 有什么区别？
• 「面试」45 道牛客网 JavaScript 经典题总结（8500 字）：牛客网的 45 道 JS 能力评测题，基本就是对自己的 JavaScript 基础做一个比较全面的评估。
• 前端面试手撕代码技巧总结：前言我们在面试的时候，经常会被面试官问到几个手写代码的问题。
• 【面试】JavaScript 面向对象面试题（上）：这一章节主要是想向大家介绍一下 JS 面向对象的第一大特性-封装，也是为了给后面最重要的继承打好基础。
• 【面试】40 道题搞定 JavaScript 的 this：这篇文章是我整理和自编的 40 道 this 面试题，17000 字长文，建议收藏。
• 【面试】图解 TCP 常见面试题！：整理了关于 TCP 三次握手和四次挥手的面试题型，跟大家一起探讨探讨。
• 图解 HTTP 常见面试题！亲手绘制！：HTTP 相关知识在面试中也是必须考察的，不用太深入，但是这些点你都必须知道。
• 【面试】为什么 Vue 不要用 index 作 key：Vue 中的 key 是用来做什么的？为什么不推荐使用 index 作为 key？常常听说这样的问题，本篇文章带你从原理来一探究竟。
• 我是如何在春招中收割大厂 offer：春招拿到阿里，腾讯，美的前端实习 offer 的大佬，分享自己为什么学前端、怎么学前端以及如何收割大厂 offer 的成长之路。
• 2 万字 | 前端基础拾遗 90 问：本文是笔者一年多来对前端基础知识的总结和思考，这些题目对自己是总结，希望能给大家带来一些帮助和启发。
• 1.5 年经验如何准备阿里巴巴 P6 前端面试：本文想分享的是如何准备阿里面试的以及面试过程的所想所得，希望能帮到你。

个人成长

• 2020 年前端分类推荐书单【结合思维导图】：整理了一些前端推荐书单，其中有一些看过的，也有一些网评不错的。
• 初级前端突破瓶颈期的一些理解与思考：见过不少五年工作三年经验情况的同学，他们在遇到瓶颈期时候的迷茫与无措，分享一下自己的经验
• 如何成为公司独当一面的工程师：从技术能力和业务能力 2 个方面去阐述。
• 一个小小前端的 2020 年年终总结
• 初中级工程师如何快速成长和寻求突破：希望这篇文章能够给这些初中级工程师一些启发，不再迷茫
• 「干货」如何成为一名优秀的初级开发者：如果你正在阅读这篇文章，你可能刚刚开始做第一份工作。
• 淘系前端大佬：如何从青铜前端进阶王者：如何突破前端开发技术瓶颈
• 谈谈工程师的成长密码：每一个人的成长轨迹都不一样，一路上遇到的机遇也各不相同。
• 前端职业发展路上需要的必要特质
• 我的前端知识体系构建（上）：构建自己的知识体系是非常重要的
• 如何从前端小白到带团队的技术小牛：一个前端小姐姐的自我成长历程。
• 程序员的成长焦虑：构建长期职业生涯：是时候，制定一个更长的职业生涯计划了。技术在进步，人也得成长。
• 我在阿里是怎么工作的（软技能）：来阿里工作一年多，在这个过程中，总结了 5 条高效工作的经验，在这里分享给大家，希望能对大家有所帮助。
• Scott 大佬解答 5 位两年经验前端的困惑：最近对自己的前端职业生涯比较困惑的同学可以看看，在五一期间好好思考一下 ~
• 如何在人单力薄时推动前端基建 - Scott：关于如何推动前端基建的深度分享，值得仔细阅读之后深度思考。
• 2 年前端经验，感觉项目没技术含量怎么办？：工作两年了，日常工作感觉没什么技术含量，我该怎么办？
• 【职业规划】我要如何提升前端水平：我们每个人每天都会有一些关于前端和职业规划上的一些困惑，我们该如何走出困境。

JavaScript

• 2020 年 JavaScript 现状调查报告出炉：分析几个比较有意思的数据。
• 设计模式之单例模式：如何成为你的“唯一”：真相只有一个。
• 11 个小技巧提升你的 JavaScript 代码质量：比较简单的一些小技巧，学会就能提升代码质量 ~
• 详解 HTML 页面原生的生命周期事件：原生的能力还是必须要了解的~
• 如何创建，更新和遍历 JavaScript 对象数组：形象生动表示 Array 的 10 个 常用 API
• JavaScript 数组和对象相互转换方法：总结了一些平时开发中对象与数组常用的方法与它们之间相互转换的方法。
• 75 道 JavaScript 面试题， 2.5 万字刷个够：题目 + 参考答案，看了 === 会了。
• 新语法：可选链 "?." 有啥作用？：它是一种访问嵌套对象属性的安全的方式。
• 初学者应该收藏的 50 个 JavaScript 工具函数：你只要花 30 秒，就可以掌握开发中需要的函数
• 7 个技巧，让你的同事爱上你的代码：写出人见人爱，花见花开，老板见老板夸的代码
• 惊艳！可视化的 js：动态图演示 Promises & Async/Await 的过程！：方便理解
• (ES5 版)深入理解 JavaScript 执行上下文和执行栈：译者序最近在研究 JavaScript 基础性的东西，但是看到对于执行上下文的解释我发现有两种，一种是执行上
• 初学 TypeScript 你一定遇到过这些问题：学习 TypeScript 过程中，曾被困扰过的一些问题，帮助大家。
• 不知道怎么封装代码？看看这几种设计模式吧！：高内聚，低耦合，优雅。
• JavaScript 中 this 的错误认识和常见问题讲解：this 会使很多同学在工作学习中产生困惑，梳理一下。
• 初中级前端 JavaScript 自测清单（1.2w 字，建议收藏）：希望作为一份自测清单，帮助大家巩固知识，温故知新。
• 初中级前端 JavaScript 自测清单 - 2（建议收藏）：很好的一个 checklist，检查自己 JavaScript 的掌握水平。
• 编写高质量代码之优化 if else：if else 是日常开发中最常见的代码，如何优化呢？
• JavaScript 设计模式学习总结与感悟：开发&面试必备，必须收藏。
• 21 道高频 JavaScript 手写面试题（一）：基本上面试的时候，经常会遇到手撕 XXX 之类的问题，这次准备梳理总结一遍。
• 21 道高频 JavaScript 手写面试题（二）：基本上面试的时候，经常会遇到手撕 XXX 之类的问题，这次准备梳理总结一遍。
• 面试官问你关于 node 的那些事（基础篇）：碎片化知识的梳理。
• 恐怖如斯的 4W 字 JavaScript 面试知识点：真的全
• JavaScript 数组必须掌握的常用方法和奇巧淫技
• 128 道含超详细答案的前端面试题【2.1W 字】：这篇文章是呆呆自己近期的一些面试汇总，算了一下有 128 道，基本都写了比较完善的答案。
• 了不起的 TypeScript 入门教程（1.2W 字）：本文带你一步步学习 TypeScript 入门相关的十四个知识点。
• 使用四十行代码实现一个精简版 Koa：深入学习一个框架或者库时，为了了解它的思想及设计思路，可以试试实现一个简易版本。
• 【原理】JavaScript 中 0.1 + 0.2 为什么不等于 0.3？：0.1 + 0.2 === 0.3 是 true 么？
• 【面试】JavaScript 面向对象面试题（上）：这一章节主要是想向大家介绍一下 JS 面向对象的第一大特性-封装，也是为了给后面最重要的继承打好基础。
• 【面试】40 道题搞定 JavaScript 的 this：这篇文章是我整理和自编的 40 道 this 面试题，17000 字长文，建议收藏。
• 你真的懂 Promise 吗：本文带大家深入理解这个熟悉的陌生人—— Promise。
• 【THE LAST TIME】彻底吃透 JavaScript 执行机制：一文吃透 JavaScript 执行机制。
• TypeScript 进阶 之 重难点梳理：在 TypeScript 开发中，tsconfig.json 是个不可或缺的配置文件，它的各个属性是什么意思呢？
• Node.js 是什么？我该如何入门？：文章最后有 Node.js 技术栈学习指南路线图。

Vue

• 自动生成组件代码—— Vue CLI 插件开发实战：实战一下 Vue CLI 插件的写法
• 为什么 Vue3 选择了 CSS 变量：实验性的功能
• 关于 Vue 最好搞清楚原理的几题面试题：不搞清楚你都不好意思说精通 Vue ~
• Vue 组件通信方式及其应用场景总结（1.5W 字）：真的太全了
• 使用 Vue 实现一个简单的鼠标拖拽滚动效果：新思路，可以学习一下
• 理解 Vue 3.0 diff 新特性 - 静态节点提升：静态节点提升 是「Vue3」的一个性能优化点
• Vue 进阶面试必问，异步更新机制和 nextTick 原理：源码级分析，满分回答
• 【2W 字】学习 Vue 应用测试，让你的项目更加健壮和稳定：认真写测试的人真的很棒，人见人爱，花见花开
• 20+ Vue 面试题整理：前端开发必备，搞定 Vue 面试！
• 基于 Vue 实现一个简易 MVVM：从理论到实践一文搞定 Vue MVVM。
• 如何搭建和发布一个 Vue 组件库：如今，许多组件库风靡一时
• 「源码级回答」大厂高频 Vue 面试题（中）：必须会的题，没得商量。
• 【源码级回答】大厂高频 Vue 面试题（上）：通过源码角度去回答一些 Vue 面试题，让面试官刮目相看。
• 拥抱 Vue 3 系列之 JSX 语法：真的香。
• Vue2.0 + JSX 真的香，还没用的看完这篇文章快试试：JSX 真的香，谁用谁知道。
• 「面试」你不知道的 React 和 Vue 的 20 个区别：面试常见问题：从多个层面说一下 React 和 Vue 有什么区别？
• 【面试】为什么 Vue 不要用 index 作 key：Vue 中的 key 是用来做什么的？为什么不推荐使用 index 作为 key？常常听说这样的问题，本篇文章带你从原理来一探究竟。
• 手把手一起从 0 实现 Vue3 响应式原理（上）：看了一下，还真是挺不错的~
• 手把手一起从 0 实现 Vue3 响应式原理（下）：在本系列的上一篇文章带你彻底搞懂 Vue3 的响应式原理！今天来看看函数劫持。
• 浅析 vue-lit 的实现以及 Web Components

React

• 2021 年前端新变化，使用 vite 替代 webpack 构建 React !：尤大就是这么自信！
• 送给 React 开发者的八条优化建议：优化一波 ~
• 如何看待 React Server Components？（网易云音乐前端团队）：期待 ~
• 推荐一个纵享丝滑的 React 动效库：简单易懂，同时支持更多动画类型
• 跟着 React 官方文档能学懂 Hooks 就怪了：Hooks 为什么这么难？
• 7 种关于 React 条件渲染的最佳实践：在 React 中，条件渲染可以通过多种方式，不同的使用方式场景取决于不同的上下文。
• 关于 useState 的一切：作为 React 开发者，你能答上如下两个问题么
• 初学 React 必须知道的 8 个问题：初学 React 的时候容易迷惑的点。
• React 中请求远程数据的四种方法：如果要通过 HTTP 请求数据并将其发送到 Web API，可以考虑下面四种方法。
• 「面试」你不知道的 React 和 Vue 的 20 个区别：面试常见问题：从多个层面说一下 React 和 Vue 有什么区别？
• 用 TypeScript 编写 React 的最佳实践：本文我们来总结一下 React 和 TypeScript 结合使用的最佳实践。
• 了不起的 tsconfig.json 指南

CSS

• 使用纯 CSS 实现滚动阴影效果：高端操作~
• 2020 年你不应该错过的 CSS 新特性：有些新东西还是蛮有意思的。
• 重学 CSS 的选择器：我们先了解一下选择器的语法，然后深入了解背后相关的特性。
• 你需要知道良好的 CSS 编码习惯：所以作为一名好前端，很有必要养成一个良好的 css 编码习惯。

性能优化

• 真的超级全的一篇前端性能优化清单：两万字！九大专题！
• 我是如何将 webpack 编译速度从 50S 优化到 7S：记录 webpack 的一次性能优化现状。
• 编写高质量可维护的代码：组件的抽象与粒度：如何拆解页面更优雅？如何划分组件才合理？
• 五种可视化方案分析 webpack 打包性能瓶颈：如何快速定位 webpack 哪些地方需要优化？
• 移动端开发的兼容适配与性能优化：前端基础知识，必须了解。
• 通过代码分割的方式提升性能，效果棒棒的：经常有同学感叹不知道怎么优化项目，那不妨尝试下在项目中引入代码分割的方式提升性能。
• 我是如何在公司后台管理系统中做性能优化：一些性能优化实践，看看是否能用得上。
• 高性能渲染十万条数据（虚拟列表）：虚拟列表，更优雅的大量数据高性能渲染方案。

最佳实践

• 前端组件化基础知识：组件化在前端架构里面是最重要的一个部分。
• 前端组件化埋点的实践：埋点代码与业务逻辑解耦 ~
• 大型解密现场，前端如何玩水印？：专业
• 基于 WebIDE 的下一代 CodeReview：高级！
• 前端业务安全综述（防爬、防薅、人机校验等）：项目中遇到了哪些安全问题么，一般都是怎么解决的?
• 你会用到的 15 个前端小知识：了解一下的，都是常见的，实际开发中会用到的。
• 【最佳实践】如何设计一个文章 TOC 目录导航：博客必备
• 从「微信公众号」的场景来理解和实现观察者模式：最近把之前学习过的这些设计模式又再次温习了一下，觉得还是有很多收获的。
• 在错误的 git 分支开发了新功能，该怎么处理呢？：复习一下 git 操作吧
• 使用 Scriptable 为自己开发一个 iPhone 小组件吧：任何可以使用 JavaScript 来编写的应用，最终会由 JavaScript 编写
• 牛逼！自己动手实现一个 TicTacToe（三子棋） 游戏：玩起来 ~
• 高端玩家！树莓派 + Node.js 实现语音机器人 ：有意思~
• 这篇 iTerm2 + Oh My Zsh 教程手把手让你成为这条街最靓的仔：看着这背景，写代码都更有动力了。
• 你需要知道的前端调试利器 —— whistle：前端提效同居，可以安利给同事使用哦 ~
• Chrome 上开发调试的九个技巧：提高开发效率必备。
• 一篇文章搞定你想要知道的「文件下载」：文件下载全过程
• 你知道 Pull Request 与 Merge Request 的区别吗？：Pull Request 是什么意思？
• 入门支撑了淘宝上亿日活的跨端框架 Rax：得益于淘系强大的技术实力，Rax 的相关生态相对比较完善。
• 几个微信小程序开发小技巧，简单又实用：总结了一些觉得对我有用的微信小程序开发小技巧
• 10 个你可能还不知道 VS Code 使用技巧：一些有用的技巧能够提高我们的日常工作效率。
• 【文末福利】Web 体验优化中和图有关的那些事（万字长文）：性能优化千万条，看看关于和 “图” 相关的优化吧。
• 你不知道的前端异常处理（万字长文，建议收藏）：我们天天和 Bug 打交道一样。因此需要正确认识异常。
• 纯干货！深度解析老生常谈的瀑布流布局：在此整理一下和瀑布流相关的使用场景以及多种实现方案。
• 在 VSCode 里一键添加骚注释，公司最靓的仔就是你：很早之前就见过各种 佛祖保佑永无 BUG、 神兽护体等形式的注释，感觉很有趣，蛮骚的 ，想要吗？
• 8000 字深度好文讲解 10 种跨域解决方案：8000 字长文，从理论到实践一次性搞定跨域问题。
• 探寻前端开发必知必会的浏览器渲染知识：快速地了解一下前端开发必知必会的浏览器渲染知识。

数据结构和算法

• 通过数据结构来优化电商 sku 的设计和实现：打工人搬砖必看~
• 10 问 10 答，带你快速入门前端算法：入门前端算法就是这么简单。

关注公众号「前端试炼」，回复关键词获取更多精选文章。