2022前端精选文章/书籍/博客列表

所选内容仅参照我个人所见所闻所学，欢迎推荐新的条目给我:smile:，本列表将持续更新~

牛人博客 :paperclips:

• Kent C. Dodds
• fi3ework
• 木易杨 的博客
• DDFE/DDFE-blog: welcome to DDFE’s blog

JavaScript

• JavaScript 深入系列、JavaScript 专题系列、ES6 系列

• 完全熟练掌握 eventLoop

• javascript - 深入理解JavaScript执行上下文和执行栈_个人文章 - SegmentFault 思否

• 一篇彻底理解Proxy - 掘金

• javascript - 理解Object.defineProperty的作用_个人文章 - SegmentFault 思否

• history对象详解及单页面路由实现

• JavaScript 核心进阶：导读 - 简书

Promise

• Promise A+ 英文文档
• 剖析Promise内部结构，一步一步实现一个完整的、能通过所有Test case的Promise类
• 最简实现Promise，支持异步链式调用（20行）

async await

• Async、Await和Generator的关系
• 手写 async await 的最简实现（20 行搞定）
• ES6 系列之 Babel 将 Generator 编译成了什么样子

异常处理

• Callback Promise Generator Async-Await 和异常处理的演进
• JavaScript错误处理和堆栈追踪 - 小如如 - 博客园
• 前端异常的捕获与处理_个人文章 - SegmentFault 思否

插件机制

• Koa 的洋葱中间件，Redux 的中间件，Axios 的拦截器让你迷惑吗？实现一个精简版的就彻底搞懂了。

CSS

布局

• Oh My God，CSS flex-basis原来有这么多细节 « 张鑫旭-鑫空间-鑫生活

动画

Less/Sass

框架

Vue

• 复杂的音乐表格需求

• Vue 源码详解之 nextTick：MutationObserver 只是浮云，microtask 才是核心！

• 探索 Vue 高阶组件 | HcySunYang

• Vue 进阶必学之高阶组件 HOC

• vue-router-advanced

• 网上都说操作真实 DOM 慢，但测试结果却比 React 更快，为什么？

源码

• Vue.js 源码全方位深入解析 （含 Vue3.0 源码分析）
• Vue 逐行级别的源码分析
• 组件的本质

Vue3

• Vue3 究竟好在哪里？（和 React Hook 的详细对比）

源码

• 带你彻底搞懂 Vue3 的 Proxy 响应式原理！TypeScript 从零实现基于 Proxy 的响应式库。
• 带你彻底搞懂 Vue3 的 Proxy 响应式原理！基于函数劫持实现 Map 和 Set 的响应式
• 深度解析：Vue3 如何巧妙的实现强大的 computed
• 40 行代码把 Vue3 的响应式集成进 React 做状态管理

React

• React 组合式开发实践：打造企业管理系统五大核心模块
• React Hooks 与 Immutable 数据流实战
• understanding-reacts-key-prop
• react 中为何推荐设置 key
• you-probably-dont-need-derived-state 派生状态
• 理解 Next.js 中的 CSR、SSR、SSG、ISR 以及 Streaming
• React技术揭秘

React Hook

• useEffect 完整指南
• dan 的博客主页
• 函数式组件与类组件有何不同？
• 精读《Hooks 取数 - swr 源码》
• Umi Hooks - 助力拥抱 React Hooks
• React Hooks 的体系设计之一 - 分层

React 性能优化

• optimize-react-re-renders
• 如何对 React 函数式组件进行优化

React 单元测试

• how-to-test-custom-react-hooks
• Introducing The React Testing Library
• Testing Implementation Details

React 和 TypeScript 结合使用

• [2.7w字]我是这样搭建 React+Typescript项目环境的(上) - 掘金

TypeScript

• 深入理解 TypeScript | 深入理解 TypeScript

泛型

• 前端 - 你不知道的 TypeScript 泛型（万字长文，建议收藏）_个人文章 - SegmentFault 思否

Node.js

• 深入Node.js的模块加载机制，手写require函数 - 掘金
• 轻松理解浏览器缓存（Koa缓存源码解析） - 掘金

构建工具

• 深入浅出 Webpack · 深入浅出 Webpack

• webpack系列之一总览 · Issue #36 · DDFE/DDFE-blog

• [万字总结] 一文吃透 Webpack 核心原理 - 知乎

性能优化

• user-centric-performance-metrics

• 详谈层合成（composite）

• 让你的网页更丝滑

• Why remove time slicing from vue3?

• 前端性能优化之浏览器渲染优化 —— 打造60FPS页面

场景应用

• 前端主题切换方案

DevOps

• CI/CD是什么？如何理解持续集成、持续交付和持续部署
• 前端测试之Jest深入浅出 - 掘金
• GitHub Actions自动化部署前端项目指南 - 知乎

计网

• 小林coding

HTTP

• 前端基础篇之HTTP协议 - 掘金

书籍 :book:

• JavaScript权威指南（原书第7版）
• JavaScript高级程序设计（第4版）
• 你不知道的JavaScript（上卷）
• Vue.js技术内幕
• CSS权威指南（第三版）
• CSS选择器世界
• 高性能JavaScript

逐步完善ing…