2020 秋风的笔记前端文章精选汇总（10大方向）

2020 已经过去，在这里感谢所有关注《秋风的笔记》的读者，在未来的日子里，《秋风的笔记》会继续加油，持续写出好的文章以及分享优秀的文章来供大家一起学习与进步。在这里特别整理了公众号这一年的所有文章，进行了分类归档，欢迎大家直接查看。主要分为了以下10个方向:

• 工程化
• 面试
• 前端新方向
• 前端基础知识
• 效率提升
• 性能优化
• React
• Vue
• 前端安全
• 个人成长

​2020前端报告​

????​​2020全球JS现状报告​​

????​​2020全球CSS现状报告​​

工程化

​​腾讯前端团队是如何做web性能监控的？​​

Google DoubleClick 研究表明：如果一个移动端页面加载时长超过 3 秒，用户就会放弃而离开。BBC 发现网页加载时长每增加 1 秒，用户就会流失 10%。

​​捕获用户在该页面停留的时长，我是这样做的（前端监测）​​

为什么要做这个监测用户停留的呢？原因很简单，如果我们要分析这个页面对我们的产品有没有价格，本文很好地对此进行了阐述。

​​前端项目自动化部署——超详细教程​​

本教程主要讲解了怎么使用 Jenkins 和 Github Actions 部署前端项目。

​​前端工程化-AST实现函数错误自动上报​​

通过AST自动添加埋点，解放你的双手

​​前端工程实践之数据埋点分析系统​​

为更精准的触达用户痛点，定位转化低点，提升业务赋能，基于数据分析的优化策略势在必行。

​​工程化之webpack极致优化至2.8 s​​

通过分析无用依赖、Tree-shaking、DLLPlugin 对项目进行了优化。

​​搭建前端监控平台之数据上报​​

更快的发现问题并解决;为产品提需求提供可靠的依据，为业务拓展提供更多的可能性，通过搭建前端监控系统来满足我们的需求。

​​手把手带你入门前端工程化​​

说了这么多的工程化，到底什么属于工程化呢？本地一一带你来进行实践。

​​浏览器、ESM规范、模块化、webpack和vite之间联系？​​

2015年，TC39（一群浏览器厂商代表组成的委员会）发布了ES6规范，ES Modules才被世人所知，也就是ESM，那么从模块化标准诞生的过程中，各种名词你知道关系吗。

​​替代 webpack？带你了解 snowpack 原理​​

bundless的解决方案，秒级开发，本文基于 snowpack 2.x 以及源码层面进行了剖析。

​​webpack 拍了拍你，给了你一份图解指南（模块化部分）​​

本文以有趣的图文方式，来讲解webpack模块化实现的过程。

​​工程化实战 - 用 webpack 搭建一个大型项目​​

对于一个大项目而言，webpack是必须的，那么其中各种插件的繁琐配置，可以看看这篇。

​​专为程序员定制的垃圾清理工具(Node Cli实现)​​

害怕被 node_modules 支配的恐怖吗，赶紧试试吧。

​​《模块化系列》snowpack，提高10倍打包速度​​

基于1.x对snowpack的使用方式进行了介绍

​​《模块化系列》彻底理清 AMD,CommonJS,CDM,UMD,ES6​​

理清楚模块化发展过程中的几个名词以及实现原理。

​​【漫游Github】无编译/无服务器，实现浏览器的 CommonJS 模块化​​

从0到1实现一个浏览器能够执行的的模块化系统

面试

​​带你看看从输入URL到页面显示背后的故事​​

从输入URL到现实背后的故事面试必备题

​​前端基础面试题 + 答案【分类整理、良心制作】​​

​​阿里、腾讯、美团以及网易等一线互联网公司面试总结​​

​​专科毕业五年，曲线救国进腾讯​​

专科也能进大厂，作者的5年卧薪尝胆。

​​从0到10000小时，从外包到字节跳动​​

10000小时定律，做任何事只要坚持，总有回报。

​​从源码解读 - Vue常考面试题​​

​​2020年双非二本前端找工作感受总结(8-9月)​​

​​三年前端寒冬入大厂，收获蚂蚁、字节 offer 面经分享​​

​​两年工作经验成功面试阿里P6总结​​

​​2020年中大厂前端面试总结​​

​​15位前端专家(阿里、力扣、政采云)分享面试与招聘视角|1.5w字​​

第八届前端早早聊前端大会的心得与体验

​​送你一道字节前端原题(Add sumOf)​​

一道出自学弟的字节原题

​​面试官: 如何在浏览器中控制最大请求并发数？​​

​​1.1w字 初中级前端 JavaScript 自测清单-2​​

​​1.2w字初中级前端 JavaScript 自测清单-1​​

​​「面试题」20+Vue面试题整理​​

​​『1W7字中高级前端面试必知必会』终极版​​

​​一道面试题来看伪元素、包含块和高度坍塌​​

你知道CSS规范吗，本文从规范角度解释了面试题。

​​面试官: 浏览器缓存你了解吗？​​

​​1.5年经验如何拿到阿里巴巴 P6 前端offer​​

前端新方向

​​2020年前端技术浪潮与未来展望​​

前端可视化、前端跨端跨栈、微前端等等热议的话题的最新进展资讯

​​基于 Web Components 跨框架组件开发实践，告别重复轮子​​

也许跨框架的 Web Components 会成为未来的趋势。

​​20+个可视化搭建工具，一次玩个够​​

low-code，no-code 是2020年比较火的词语，来看看各个大厂是如何实现

​​从0到1，带你彻底搞懂 vite 中的 HMR 原理​​

vite 也是 2020 兴起之秀，来看看他的原理吧

​​low-code？与 20 年前的 Dreamweaver 有什么区别？​​

前端基础知识

​​Cook Cookie, 我把 SameSite 给你炖烂了​​

SameSite 虽然出来一段时间了，但是这次炖烂了给品尝。

​​淦了这篇，前端也能轻松玩转物理（惯性滚动篇）​​

惯性滚动，虽然是一个简单的原理，但是增加了无数的体验感。

​​从王者荣耀里我学会的前端新手指引​​

曾经你以为我是在打游戏，其实我是在学习

​​前端隐秘角落 - 当事件循环遇到更新渲染​​

​​SSR 它到底香不香？细数 SSR 的利与弊​​

上 SSR 也许你会有顾虑，来看看这篇文章是如何分析的

​​掘金上摸鱼的新发现，无限滚动(infinite-scroll)​​

摸鱼摸鱼，摸到了无限滚动

​​几个你不知道的Git小命令,却收获快乐​​

几个你不常用，但是非常有用的快捷技巧

​​一文带你层层解锁「文件下载」的奥秘​​

从浏览器下载到后端推流，从json到excel，各个方面讲解了文件下载。

​​【通俗易懂】前端需要掌握的设计模式​​

​​前端多线程大文件下载实践，提速10倍(拿捏百度云盘)​​

原以为前端是弱小的，但是还能通过浏览器直接多线程下载大文件。

​​前端登录，这一篇就够了​​

从Cookie + Session 、Token 、SSO 单点登录、OAuth 第三方登录分别讲解了前端登录。

​​Javascript实现8种经典数据结构​​

​​听说你还不知道Promise的allSettled()和all()的区别？​​

​​响应式布局新方案​​

利用 JavaScript 和 CSS 来进行媒体查询，是响应式设计与自适应设计结合的方案，俗称融合响应式设计。

​​如何优雅地处理Async/Await的异常？​​

​​ES2017 异步函数的最佳实践（async /await）​​

​​2020年，该如何选择小程序框架​​

讲述了原生语法、渐进增强型框架、转化型框架如何选择

​​前端最佳实践之可维护性​​

​​「 Map最佳实践」什么时候适合使用 Map 而不是 Object​​

​​ES6 Promise 的最佳实践​​

​​深入探究immutable.js的实现机制（二）​​

​​深入探究Immutable.js的实现机制（一）​​

​​在前端如何玩转 Word 文档​​

看阿宝哥如何利用 web 玩转 word

​​你不知道的 Web Workers​​

​​一文读懂 JS 装饰器，这是一个会打扮的装饰器​​

俗话说，人靠衣装，佛靠金装，JS也是会装饰的

​​Nginx 从入门到实践，万字详解！​​

​​10 种跨域解决方案（附终极方案）​​

这一次真的放大招了，10种方式，涵盖所以场景。

​​一文了解文件上传全过程（1.8w字深度解析，进阶必备）​​

也许你对文件上传很害怕，淦了这一篇，理解从前端到后端。

​​前端工程师必知的javascript设计模式​​

​​那些年你需要知道的浏览器事件循环​​

效率提升

​​如何写好规范的Git提交说明​​

在多人协作的项目中，如果Git的 ​「提交说明」​ 精准，在后期协作以及Bug处理时会变得有据可查

​​Chrome DevTools中的这些骚操作，你都知道吗？​​

性能优化

​​React Hooks中这样写HTTP请求可以避免内存泄漏​​

让我们看一下在 React Hooks 中使用 ​​fetch​​​ 和​​Abort Controller​​取消Web请求从而来避免内存泄露！????

​​高性能渲染十万条数据(虚拟列表)​​

本文会介绍使用 ​​虚拟列表​​的方式，来同时加载大量数据。

​​当后端一次性丢给你10万条数据, 作为前端工程师的你,要怎么处理?​​

​​immutablejs 是如何优化我们的代码的？​​

​​一种高性能的Tree组件实现方案​​

React

​​玩转 React 高阶组件这一篇就够​​

同事写的 React 高阶组件详解

​​如何在 React 中实现 keep alive​​

​​谈谈 React 5种最流行的状态管理库​​

Recoil、MobX、XState、Redux (with hooks)、Context 5种流行的状态管理比较

​​你也可以理解的React Fiber，学废了吗​​

​​React源码揭秘(三)：Diff算法详解​​

​​从0实现React 系列(二)：组件更新​​

​​从0实现React 系列(一)：React的架构设计​​

如果你想读React源码，但又被React庞大的代码量劝退，我相信这个项目适合你起步。

​​虚拟DOM到底是什么？​​

虚拟 DOM （Virtual DOM ）这个概念相信大家都不陌生，从 React 到 Vue ，虚拟 DOM 为这两个框架都带来了跨平台的能力（React-Native 和 Weex）

​​这就是你日思夜想的 React 原生动态加载​​

使用 React.lazy 来实现React 原生动态加载

​​简化React Hook的5种方法​​

在编写自定义Hook时，很容易产生过于复杂的解决方案，5种帮助简化定制Hook的方法。

​​【React】深入理解虚拟dom和diff算法​​

​​【redux】从入门到手写实现redux​​

​​React+TypeScript搭建全栈 Todo App​​

在本教程中，我们将在服务器和客户端使用 TypeScript、React、NodeJS、Express 和 MongoDB 从头开始构建一个 Todo 应用程序。

​​React 条件渲染最佳实践(7 种方法)​​

​​React Hooks中这样写HTTP请求可以避免内存泄漏​​

​​仿照React源码流程打造90行代码的Hooks​​

利用 90 行代码来实现 React Hooks

​​React Hooks 原理与最佳实践​​

​​React 中请求远程数据的四种方法​​

Vue

​​我从 17w star 的 Vuejs 中学到了什么？​​

提升用户开发体验、API设计、特性开关。错误处理、来看看 17w star 的 Vue.js 思路。

​​将 Vue 渲染到嵌入式液晶屏​​

原来vue和液晶屏也有爱。

​​Vue 3 的组合 API 如何请求数据？​​

Vue 3 已经发布一段时间了，其组合 API 多少有点 React Hooks 的影子在里面，通过这种方式来学习下组合 API。

​​面试加分-企业级Vue瀑布流​​

​​Typescript 在 Vue 中的实践(包含2.x、3.x)​​

Vue3.0 使用 Typescript 如丝般顺滑。

​​vue3.0新特性盘点​​

​​快速体验Vue2和Vue3组件开发的区别​​

​​这9种Vue技术你掌握了吗？​​

前端安全

​​前端安全—你必须要注意的依赖安全漏洞​​

即使是lodash这样的库也曾经出现了安全漏洞。

​​一切的前端安全都是纸老虎​​

前端能否限制用户截图？这个问题，真的说明一切的前端安全，其实都是纸老虎。

​​学习前端安全知识防止被偷袭​​

​​从破解某设计网站谈前端水印(详细教程)​​

从明暗水印详细谈了前端安全，还附带破解示例。

​​面试官：你了解数据安全传输吗？​​

讲解了HTTPS 底层是如何对数据进行安全保障

​​HTTPS 证书被伪造了怎么办？​​

​​HTTPS​​​ 协议的安全依赖于它的证书机制，本文讲解如何预防 ​​HTTPS​​ 证书伪造。

个人成长

​​初级前端如何渡过迷茫，突破瓶颈​​

​​前端职业规划-写给年轻的前端韭菜们​​

​​
​​❤️ 交流讨论​​欢迎关注公众号 ​「​秋风的笔记​」​，主要记录日常中觉得有意思的工具以及分享开发实践，保持深度和专注度。​最近整理了一些大厂的相关内推信息，基本上都是部门直招，包含​美团、字节、阿里飞猪、腾讯、快手、58集团、哈喽出行等多个公司 ​

​​「点赞、 分享​​」​是对作者最大的支持❤️​