阿里云优惠活动，点击链接进行购买: 一年仅需96.9元即可以购买服务器~
腾讯云优惠活动, 点击链接进行购买一年仅需99元
腾讯云限时开团活动, 点击链接进行购买一年仅需95元
# 2020 公众号前端文章精选汇总（10大方向）
2020 已经过去，在这里感谢所有关注《秋风的笔记》的读者，在未来的日子里，《秋风的笔记》会继续加油，持续写出好的文章以及分享优秀的文章来供大家一起学习与进步。在这里特别整理了公众号这一年的所有文章，进行了分类归档，欢迎大家直接查看。主要分为了以下10个方向:
- 工程化
- 面试
- 前端新方向
- 前端基础知识
- 效率提升
- 性能优化
- React
- Vue
- 前端安全
- 个人成长
2020前端报告
👉2020全球JS现状报告 (opens new window)
👉2020全球CSS现状报告 (opens new window)
# 工程化
腾讯前端团队是如何做web性能监控的？ (opens new window)
Google DoubleClick 研究表明：如果一个移动端页面加载时长超过 3 秒，用户就会放弃而离开。BBC 发现网页加载时长每增加 1 秒，用户就会流失 10%。
捕获用户在该页面停留的时长，我是这样做的（前端监测） (opens new window)
为什么要做这个监测用户停留的呢？原因很简单，如果我们要分析这个页面对我们的产品有没有价格，本文很好地对此进行了阐述。
前端项目自动化部署——超详细教程 (opens new window)
本教程主要讲解了怎么使用 Jenkins 和 Github Actions 部署前端项目。
前端工程化-AST实现函数错误自动上报 (opens new window)
通过AST自动添加埋点，解放你的双手
前端工程实践之数据埋点分析系统 (opens new window)
为更精准的触达用户痛点，定位转化低点，提升业务赋能，基于数据分析的优化策略势在必行。
工程化之webpack极致优化至2.8 s (opens new window)
通过分析无用依赖、Tree-shaking、DLLPlugin 对项目进行了优化。
搭建前端监控平台之数据上报 (opens new window)
更快的发现问题并解决;为产品提需求提供可靠的依据，为业务拓展提供更多的可能性，通过搭建前端监控系统来满足我们的需求。
手把手带你入门前端工程化 (opens new window)
说了这么多的工程化，到底什么属于工程化呢？本地一一带你来进行实践。
浏览器、ESM规范、模块化、webpack和vite之间联系？ (opens new window)
2015年，TC39（一群浏览器厂商代表组成的委员会）发布了ES6规范，ES Modules才被世人所知，也就是ESM，那么从模块化标准诞生的过程中，各种名词你知道关系吗。
替代 webpack？带你了解 snowpack 原理 (opens new window)
bundless的解决方案，秒级开发，本文基于 snowpack 2.x 以及源码层面进行了剖析。
webpack 拍了拍你，给了你一份图解指南（模块化部分） (opens new window)
本文以有趣的图文方式，来讲解webpack模块化实现的过程。
工程化实战 - 用 webpack 搭建一个大型项目 (opens new window)
对于一个大项目而言，webpack是必须的，那么其中各种插件的繁琐配置，可以看看这篇。
专为程序员定制的垃圾清理工具(Node Cli实现) (opens new window)
害怕被 node_modules 支配的恐怖吗，赶紧试试吧。
《模块化系列》snowpack，提高10倍打包速度 (opens new window)
基于1.x对snowpack的使用方式进行了介绍
《模块化系列》彻底理清 AMD,CommonJS,CDM,UMD,ES6 (opens new window)
理清楚模块化发展过程中的几个名词以及实现原理。
【漫游Github】无编译/无服务器，实现浏览器的 CommonJS 模块化 (opens new window)
从0到1实现一个浏览器能够执行的的模块化系统
# 面试
带你看看从输入URL到页面显示背后的故事 (opens new window)
从输入URL到现实背后的故事面试必备题
前端基础面试题 + 答案【分类整理、良心制作】 (opens new window)
阿里、腾讯、美团以及网易等一线互联网公司面试总结 (opens new window)
专科毕业五年，曲线救国进腾讯 (opens new window)
专科也能进大厂，作者的5年卧薪尝胆。
从0到10000小时，从外包到字节跳动 (opens new window)
10000小时定律，做任何事只要坚持，总有回报。
从源码解读 - Vue常考面试题 (opens new window)
2020年双非二本前端找工作感受总结(8-9月) (opens new window)
三年前端寒冬入大厂，收获蚂蚁、字节 offer 面经分享 (opens new window)
两年工作经验成功面试阿里P6总结 (opens new window)
2020年中大厂前端面试总结 (opens new window)
15位前端专家(阿里、力扣、政采云)分享面试与招聘视角|1.5w字 (opens new window)
第八届前端早早聊前端大会的心得与体验
送你一道字节前端原题(Add sumOf) (opens new window)
一道出自学弟的字节原题
面试官: 如何在浏览器中控制最大请求并发数？ (opens new window)
1.1w字 初中级前端 JavaScript 自测清单-2 (opens new window)
1.2w字初中级前端 JavaScript 自测清单-1 (opens new window)
「面试题」20+Vue面试题整理 (opens new window)
『1W7字中高级前端面试必知必会』终极版 (opens new window)
一道面试题来看伪元素、包含块和高度坍塌 (opens new window)
你知道CSS规范吗，本文从规范角度解释了面试题。
面试官: 浏览器缓存你了解吗？ (opens new window)
1.5年经验如何拿到阿里巴巴 P6 前端offer (opens new window)
# 前端新方向
2020年前端技术浪潮与未来展望 (opens new window)
前端可视化、前端跨端跨栈、微前端等等热议的话题的最新进展资讯
基于 Web Components 跨框架组件开发实践，告别重复轮子 (opens new window)
也许跨框架的 Web Components 会成为未来的趋势。
20+个可视化搭建工具，一次玩个够 (opens new window)
low-code，no-code 是2020年比较火的词语，来看看各个大厂是如何实现
从0到1，带你彻底搞懂 vite 中的 HMR 原理 (opens new window)
vite 也是 2020 兴起之秀，来看看他的原理吧
low-code？与 20 年前的 Dreamweaver 有什么区别？ (opens new window)
# 前端基础知识
Cook Cookie, 我把 SameSite 给你炖烂了 (opens new window)
SameSite 虽然出来一段时间了，但是这次炖烂了给品尝。
淦了这篇，前端也能轻松玩转物理（惯性滚动篇） (opens new window)
惯性滚动，虽然是一个简单的原理，但是增加了无数的体验感。
从王者荣耀里我学会的前端新手指引 (opens new window)
曾经你以为我是在打游戏，其实我是在学习
前端隐秘角落 - 当事件循环遇到更新渲染 (opens new window)
SSR 它到底香不香？细数 SSR 的利与弊 (opens new window)
上 SSR 也许你会有顾虑，来看看这篇文章是如何分析的
掘金上摸鱼的新发现，无限滚动(infinite-scroll) (opens new window)
摸鱼摸鱼，摸到了无限滚动
几个你不知道的Git小命令,却收获快乐 (opens new window)
几个你不常用，但是非常有用的快捷技巧
一文带你层层解锁「文件下载」的奥秘 (opens new window)
从浏览器下载到后端推流，从json到excel，各个方面讲解了文件下载。
【通俗易懂】前端需要掌握的设计模式 (opens new window)
前端多线程大文件下载实践，提速10倍(拿捏百度云盘) (opens new window)
原以为前端是弱小的，但是还能通过浏览器直接多线程下载大文件。
前端登录，这一篇就够了 (opens new window)
从Cookie + Session 、Token 、SSO 单点登录、OAuth 第三方登录分别讲解了前端登录。
Javascript实现8种经典数据结构 (opens new window)
听说你还不知道Promise的allSettled()和all()的区别？ (opens new window)
利用 JavaScript 和 CSS 来进行媒体查询，是响应式设计与自适应设计结合的方案，俗称融合响应式设计。
如何优雅地处理Async/Await的异常？ (opens new window)
ES2017 异步函数的最佳实践（async /await） (opens new window)
2020年，该如何选择小程序框架 (opens new window)
讲述了原生语法、渐进增强型框架、转化型框架如何选择
前端最佳实践之可维护性 (opens new window)
「 Map最佳实践」什么时候适合使用 Map 而不是 Object (opens new window)
ES6 Promise 的最佳实践 (opens new window)
深入探究immutable.js的实现机制（二） (opens new window)
深入探究Immutable.js的实现机制（一） (opens new window)
在前端如何玩转 Word 文档 (opens new window)
看阿宝哥如何利用 web 玩转 word
你不知道的 Web Workers (opens new window)
一文读懂 JS 装饰器，这是一个会打扮的装饰器 (opens new window)
俗话说，人靠衣装，佛靠金装，JS也是会装饰的
Nginx 从入门到实践，万字详解！ (opens new window)
10 种跨域解决方案（附终极方案） (opens new window)
这一次真的放大招了，10种方式，涵盖所以场景。
一文了解文件上传全过程（1.8w字深度解析，进阶必备） (opens new window)
也许你对文件上传很害怕，淦了这一篇，理解从前端到后端。
前端工程师必知的javascript设计模式 (opens new window)
那些年你需要知道的浏览器事件循环 (opens new window)
# 效率提升
如何写好规范的Git提交说明 (opens new window)
在多人协作的项目中，如果Git的**「提交说明」**精准，在后期协作以及Bug处理时会变得有据可查
Chrome DevTools中的这些骚操作，你都知道吗？ (opens new window)
# 性能优化
React Hooks中这样写HTTP请求可以避免内存泄漏 (opens new window)
让我们看一下在 React Hooks 中使用 fetch 和Abort Controller取消Web请求从而来避免内存泄露！🤗
高性能渲染十万条数据(虚拟列表) (opens new window)
本文会介绍使用 虚拟列表的方式，来同时加载大量数据。
当后端一次性丢给你10万条数据, 作为前端工程师的你,要怎么处理? (opens new window)
immutablejs 是如何优化我们的代码的？ (opens new window)
一种高性能的Tree组件实现方案 (opens new window)
# React
玩转 React 高阶组件这一篇就够 (opens new window)
同事写的 React 高阶组件详解
如何在 React 中实现 keep alive (opens new window)
谈谈 React 5种最流行的状态管理库 (opens new window)
Recoil、MobX、XState、Redux (with hooks)、Context 5种流行的状态管理比较
你也可以理解的React Fiber，学废了吗 (opens new window)
React源码揭秘(三)：Diff算法详解 (opens new window)
从0实现React 系列(二)：组件更新 (opens new window)
从0实现React 系列(一)：React的架构设计 (opens new window)
如果你想读React源码，但又被React庞大的代码量劝退，我相信这个项目适合你起步。
虚拟DOM到底是什么？ (opens new window)
虚拟 DOM （Virtual DOM ）这个概念相信大家都不陌生，从 React 到 Vue ，虚拟 DOM 为这两个框架都带来了跨平台的能力（React-Native 和 Weex）
这就是你日思夜想的 React 原生动态加载 (opens new window)
使用 React.lazy 来实现React 原生动态加载
简化React Hook的5种方法 (opens new window)
在编写自定义Hook时，很容易产生过于复杂的解决方案，5种帮助简化定制Hook的方法。
【React】深入理解虚拟dom和diff算法 (opens new window)
【redux】从入门到手写实现redux (opens new window)
React+TypeScript搭建全栈 Todo App (opens new window)
在本教程中，我们将在服务器和客户端使用 TypeScript、React、NodeJS、Express 和 MongoDB 从头开始构建一个 Todo 应用程序。
React 条件渲染最佳实践(7 种方法) (opens new window)
React Hooks中这样写HTTP请求可以避免内存泄漏 (opens new window)
仿照React源码流程打造90行代码的Hooks (opens new window)
利用 90 行代码来实现 React Hooks
React Hooks 原理与最佳实践 (opens new window)
React 中请求远程数据的四种方法 (opens new window)
# Vue
我从 17w star 的 Vuejs 中学到了什么？ (opens new window)
提升用户开发体验、API设计、特性开关。错误处理、来看看 17w star 的 Vue.js 思路。
将 Vue 渲染到嵌入式液晶屏 (opens new window)
原来vue和液晶屏也有爱。
Vue 3 的组合 API 如何请求数据？ (opens new window)
Vue 3 已经发布一段时间了，其组合 API 多少有点 React Hooks 的影子在里面，通过这种方式来学习下组合 API。
面试加分-企业级Vue瀑布流 (opens new window)
Typescript 在 Vue 中的实践(包含2.x、3.x) (opens new window)
Vue3.0 使用 Typescript 如丝般顺滑。
vue3.0新特性盘点 (opens new window)
快速体验Vue2和Vue3组件开发的区别 (opens new window)
这9种Vue技术你掌握了吗？ (opens new window)
# 前端安全
前端安全—你必须要注意的依赖安全漏洞 (opens new window)
即使是lodash这样的库也曾经出现了安全漏洞。
一切的前端安全都是纸老虎 (opens new window)
前端能否限制用户截图？这个问题，真的说明一切的前端安全，其实都是纸老虎。
学习前端安全知识防止被偷袭 (opens new window)
从破解某设计网站谈前端水印(详细教程) (opens new window)
从明暗水印详细谈了前端安全，还附带破解示例。
面试官：你了解数据安全传输吗？ (opens new window)
讲解了HTTPS 底层是如何对数据进行安全保障
HTTPS 证书被伪造了怎么办？ (opens new window)
HTTPS 协议的安全依赖于它的证书机制，本文讲解如何预防 HTTPS 证书伪造。