前端十大类知识点

不管做什么事情，最重要的就是要学会归类，通过归类能够起到事半功倍的效果，下面是对秋风大佬对前端内容进行的总结，共十类，一起共勉。

• 工程化

• 面试

• 前端新方向

• 前端基础知识

• 效率提升

• 性能优化

• 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 证书伪造。

个人成长

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

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

1.如果觉得这篇文章还不错，来个分享、点赞、在看三连吧，让更多的人也看到～

2.关注公众号执鸢者，领取学习资料，定期为你推送原创深度好文

3.扫描下方添加进群，里面大佬多多，一起向他们学习

1. 图解JavaScript——代码实现（Object.create()、flat()等十四种代码原理实现不香吗？）

2. 图解JavaScript——代码实现【2】（重点是Promise、Async、发布/订阅原理实现）

3. 图解javascript——基础篇

4. 图解JavaScript——进阶篇

5. 十五张图带你彻底搞懂从URL到页面展示发生的故事

6. 图解浏览器安全（同源策略、XSS、CSRF、跨域、HTTPS、安全沙箱等串成糖葫芦）

7. 六张图带你从HTTP/0.9进化到HTTP3.0

8. （2.6w字）网络知识点灵魂拷问（上）——前端面试必问

9. （2.6w字）网络知识点灵魂拷问（下）——前端面试必问

10. 理论与API相结合理解Node中的网络通信

11. 硬核知识点——浏览器中的三类五种请求

12. 理论与实践相结合彻底理解CORS

13. 三步法解析Express源码

14. 一篇搞定前端高频手撕算法题（36道）

15. 十七张图玩转Node进程——榨干它

16. 理论与API相结合理解Node中的网络通信

17. 一文彻底搞懂前端监控

18. 前端的葵花宝典——架构

19. canvas从入门到猪头

20. 前端工程师的一大神器——puppeteer

21. 2021 年前端宝典【超三百篇】

22. 前端也要懂机器学习（上）

23. 前端也要懂机器学习（下）

24. 学架构助力前端起飞