前端精读

前端界的好文精读，每周更新！

最新精读：296.手动算根号

素材来源：周刊参考池

现已涵盖：

• 结合大厂工作经验解读的 前沿技术，源码解读。
• 逐渐加入一些后端技术解读。
• 一些 商业思考。
• 已完成 编译原理、设计模式 两大基础模块。

前沿技术

• 1.精读《js 模块化发展》
• 2.精读《模态框的最佳实践》
• 3.精读《前后端渲染之争》
• 4.精读《AsyncAwait 优越之处》
• 5.精读《民工叔单页数据流方案》
• 6.精读《JavaScript 错误堆栈处理》
• 7.精读《请停止 css-in-js 的行为》
• 8.精读《入坑 React 前没有人会告诉你的事》
• 9.精读《Immutable 结构共享》
• 10.精读《Web Components 的困境》
• 11.精读《前端调试技巧》
• 12.精读《React 高阶组件》
• 13.精读《This 带来的困惑》
• 14.精读《架构设计之 DCI》
• 15.精读《TC39 与 ECMAScript 提案》
• 16.精读《CSS Animations vs Web Animations API》
• 17.精读《如何安全地使用 React context》
• 18.精读《设计完美的日期选择器》
• 19.精读《最佳前端面试题》及面试官技巧
• 20.精读《Nestjs》文档
• 21.精读《Web fonts: when you need them, when you don’t》
• 22.精读《V8 引擎特性带来的的 JS 性能变化》
• 23.精读《API 设计原则》
• 24.精读《现代 JavaScript 概览》
• 25.精读《null >= 0?》
• 26.精读《加密媒体扩展》
• 27.精读《css-in-js 杀鸡用牛刀》
• 28.精读《2017 前端性能优化备忘录》
• 29.精读《JS 中的内存管理》
• 30.精读《Javascript 事件循环与异步》
• 31.精读《我不再使用高阶组件》
• 32.精读《React Router4.0 进阶概念》
• 33.精读《30 行 js 代码创建神经网络》
• 34.精读《React 代码整洁之道》
• 35.精读《dob - 框架实现》
• 36.精读《When You “Git” in Trouble- a Version Control Story》
• 37.精读《how we position and what we compare》
• 38.精读《dob - 框架使用》
• 39.精读《全链路体验浏览器挖矿》
• 40.精读《初探 Reason 与 GraphQL》
• 41.精读《Ant Design 3.0 背后的故事》
• 42.精读《前端数据流哲学》
• 43.精读《增强现实与可视化》
• 44.精读《Rekit Studio》
• 45.精读《React's new Context API》
• 46.精读《react-rxjs》
• 47.精读《webpack4.0 升级指南》
• 49.精读《Compilers are the New Frameworks》
• 50.精读《快速上手构建 ARKit 应用》
• 51.精读《Elements of Web Dev》
• 52.精读《图解 ES 模块》
• 53.精读《插件化思维》
• 54.精读《在浏览器运行 serverRender》
• 55.精读《async await 是把双刃剑》
• 56.精读《重新思考 Redux》
• 57.精读《现代 js 框架存在的根本原因》
• 58.精读《Typescript2.0 - 2.9》
• 59.精读《如何利用 Nodejs 监听文件夹》
• 60.精读《如何在 nodejs 使用环境变量》
• 61.精读《React 八种条件渲染》
• 62.精读《JS 引擎基础之 Shapes and Inline Caches》
• 63.精读《React 的多态性》
• 68.精读《衡量用户体验》
• 69.精读《SQL vs Flux》
• 72.精读《REST, GraphQL, Webhooks, & gRPC 如何选型》
• 74.精读《12 个评估 JS 库你需要关心的事》
• 76.精读《谈谈 Web Workers》
• 77.精读《用 Reduce 实现 Promise 串行执行》
• 79.精读《React Hooks》
• 80.精读《怎么用 React Hooks 造轮子》
• 81.精读《使用 CSS 属性选择器》
• 83.精读《React16 新特性》
• 84.精读《Typescript 3.2 新特性》
• 86.精读《国际化布局 - Logical Properties》
• 87.精读《setState 做了什么》
• 88.精读《Caches API》
• 89.精读《如何编译前端项目与组件》
• 91.精读《正则 ES2018》
• 94.精读《Serverless 给前端带来了什么》
• 95.精读《Function VS Class 组件》
• 96.精读《useEffect 完全指南》
• 97.精读《编写有弹性的组件》
• 99.精读《Scheduling in React》
• 100.精读《V8 引擎 Lazy Parsing》
• 101.精读《持续集成 vs 持续交付 vs 持续部署》
• 102.精读《Monorepo 的优势》
• 104.精读《Function Component 入门》
• 105.精读《What's new in javascript》
• 107.精读《Optional chaining》
• 109.精读《Vue3.0 Function API》
• 111.精读《前端未来展望》
• 112.精读《源码学习》
• 113.精读《Nodejs V12》
• 117.精读《Tableau 探索式模型》
• 118.精读《使用 css 变量生成颜色主题》
• 119.精读《前端深水区》
• 120.精读《React Hooks 最佳实践》
• 121.精读《前端与 BI》
• 123.精读《用 Babel 创造自定义 JS 语法》
• 124.精读《用 css grid 重新思考布局》
• 125.精读《深度学习 - 函数式之美》
• 126.精读《Nuxtjs》
• 127.精读《React Conf 2019 - Day1》
• 129.精读《React Conf 2019 - Day2》
• 132.精读《正交的 React 组件》
• 133.精读《寻找框架设计的平衡点》
• 134.精读《我在阿里数据中台大前端》
• 138.精读《精通 console.log》
• 139.精读《手写 JSON Parser》
• 140.精读《结合 React 使用原生 Drag Drop API》
• 141.精读《useRef 与 createRef 的区别》
• 142.精读《如何做好 CodeReview》
• 143.精读《Suspense 改变开发方式》
• 144.精读《Webpack5 新特性 - 模块联邦》
• 145.精读《React Router v6》
• 146.精读《React Hooks 数据流》
• 147. 精读《@types react 值得注意的 TS 技巧》
• 148. 精读《React Error Boundaries》
• 149. 精读《React 性能调试》
• 150. 精读《Deno 1.0 你需要了解的》
• 152. 精读《recoil》
• 153. 精读《snowpack》
• 154. 精读《用 React 做按需渲染》
• 157. 精读《如何比较 Object 对象》
• 158. 精读《Typescript 4》
• 159. 精读《对低代码搭建的理解》
• 160. 精读《函数缓存》
• 161.精读《可视化搭建思考 - 富文本搭建》
• 162.精读《Tasks, microtasks, queues and schedules》
• 163.精读《Spring 概念》
• 164.精读《数据搭建引擎 bi-designer API-设计器》
• 165.精读《数据搭建引擎 bi-designer API-组件》
• 166.精读《BI 搭建 - 筛选条件》
• 190.精读《DOM diff 原理详解》
• 191.精读《高性能表格》
• 192.精读《DOM diff 最长上升子序列》
• 193.精读《React Server Component》
• 194.精读《算法基础数据结构》
• 195.精读《新一代前端构建工具对比》
• 196.精读《前端职业规划 - 2021 年》
• 197.精读《低代码逻辑编排》
• 202.精读《React 18》
• 204.精读《默认、命名导出的区别》
• 205.精读《JS with 语法》
• 206.精读《一种 Hooks 数据流管理方案》
• 207.精读《Typescript infer 关键字》
• 208.精读《Typescript 4.4》
• 209.精读《捕获所有异步 error》
• 210.精读《class static block》
• 211.精读《Microsoft Power Fx》
• 212.精读《可维护性思考》
• 213.精读《Prisma 的使用》
• 214.精读《web streams》
• 215.精读《什么是 LOD 表达式》
• 216.精读《15 大 LOD 表达式 - 上》
• 217.精读《15 大 LOD 表达式 - 下》
• 218.精读《Rust 是 JS 基建的未来》
• 219.精读《深入了解现代浏览器一》
• 220.精读《深入了解现代浏览器二》
• 221.精读《深入了解现代浏览器三》
• 222.精读《深入了解现代浏览器四》
• 223.精读《Records & Tuples 提案》
• 224.精读《Records & Tuples for React》
• 225.精读《Excel JS API》
• 226.精读《2021 前端新秀回顾》
• 228.精读《pipe operator for JavaScript》
• 230.精读《对 Markdown 的思考》
• 237.精读《Typescript 4.5-4.6 新特性》
• 238.精读《不再需要 JS 做的 5 件事》
• 239.精读《JS 数组的内部实现》
• 240.精读《React useEvent RFC》
• 242.精读《web reflow》
• 253.精读《pnpm》
• 254.精读《对前端架构的理解 - 分层与抽象》
• 255.精读《SolidJS》
• 256.精读《依赖注入简介》
• 257.精读《State of CSS 2022》
• 258.精读《proposal-extractors》
• 259.精读《Headless 组件用法与原理》
• 260.精读《如何为 TS 类型写单测》
• 261.精读《Rest vs Spread 语法》
• 262.精读《迭代器 Iterable》
• 263.精读《我们为何弃用 css-in-js》
• 264.精读《维护好一个复杂项目》
• 265.精读《磁贴布局 - 功能分析》
• 266.精读《磁贴布局 - 功能实现》
• 267.精读《磁贴布局 - 性能优化》
• 277.精读《利用 GPT 解读 PDF》
• 281.精读《自由 + 磁贴混合布局》
• 282.精读《自由布局吸附线的实现》
• 287.精读《VisActor 数据可视化工具》

TS 类型体操

• 243.精读《Pick, Awaited, If...》
• 244.精读《Get return type, Omit, ReadOnly...》
• 245.精读《Promise.all, Replace, Type Lookup...》
• 246.精读《Permutation, Flatten, Absolute...》
• 247.精读《Diff, AnyOf, IsUnion...》
• 248.精读《MinusOne, PickByType, StartsWith...》
• 249.精读《ObjectEntries, Shift, Reverse...》
• 250.精读《Flip, Fibonacci, AllCombinations...》
• 251.精读《Trim Right, Without, Trunc...》
• 252.精读《Unique, MapTypes, Construct Tuple...》

设计模式

• 167.精读《设计模式 - Abstract Factory 抽象工厂》
• 168.精读《设计模式 - Builder 生成器》
• 169.精读《设计模式 - Factory Method 工厂方法》
• 170.精读《设计模式 - Prototype 原型模式》
• 171.精读《设计模式 - Singleton 单例模式》
• 172.精读《设计模式 - Adapter 适配器模式》
• 173.精读《设计模式 - Bridge 桥接模式》
• 174.精读《设计模式 - Composite 组合模式》
• 175.精读《设计模式 - Decorator 装饰器模式》
• 176.精读《设计模式 - Facade 外观模式》
• 177.精读《设计模式 - Flyweight 享元模式》
• 178.精读《设计模式 - Proxy 代理模式》
• 179.精读《设计模式 - Chain of Responsibility 职责链模式》
• 180.精读《设计模式 - Command 命令模式》
• 181.精读《设计模式 - Interpreter 解释器模式》
• 182.精读《设计模式 - Iterator 迭代器模式》
• 183.精读《设计模式 - Mediator 中介者模式》
• 184.精读《设计模式 - Memoto 备忘录模式》
• 185.精读《设计模式 - Observer 观察者模式》
• 186.精读《设计模式 - State 状态模式》
• 187.精读《设计模式 - Strategy 策略模式》
• 188.精读《设计模式 - Template Method 模版模式》
• 189.精读《设计模式 - Visitor 访问者模式》

编译原理

• 64.精读《手写 SQL 编译器 - 词法分析》
• 65.精读《手写 SQL 编译器 - 文法介绍》
• 66.精读《手写 SQL 编译器 - 语法分析》
• 67.精读《手写 SQL 编译器 - 回溯》
• 70.精读《手写 SQL 编译器 - 语法树》
• 71.精读《手写 SQL 编译器 - 错误提示》
• 78.精读《手写 SQL 编译器 - 性能优化之缓存》
• 85.精读《手写 SQL 编译器 - 智能提示》

源码解读

• 48.精读《Immer.js》源码
• 73.精读《sqorn 源码》
• 75.精读《Epitath 源码 - renderProps 新用法》
• 82.精读《Htm - Hyperscript 源码》
• 92.精读《React PowerPlug 源码》
• 93.精读《syntax-parser 源码》
• 98.精读《react-easy-state 源码》
• 110.精读《Inject Instance 源码》
• 122.精读《robot 源码 - 有限状态机》
• 128.精读《Hooks 取数 - swr 源码》
• 130.精读《unstated 与 unstated-next 源码》
• 151. 精读《@umijs use-request》源码
• 155. 精读《use-what-changed 源码》
• 156. 精读《react-intersection-observer 源码》
• 227. 精读《zustand 源码》
• 229.精读《vue-lit 源码》
• 241.精读《react-snippets - Router 源码》

商业思考

• 90.精读《极客公园 2019》
• 103.精读《为什么专家不再关心技术细节》
• 106.精读《数据之上·智慧之光 - 2018》
• 108.精读《智能商业》
• 114.精读《谁在世界中心》
• 115.精读《Tableau 入门》
• 116.精读《刷新》
• 131.精读《从 0 到 1》
• 135.精读《极客公园 IFX - 上》
• 136.精读《极客公园 IFX - 下》
• 137.精读《当我在分享的时候，我在做什么？》

算法

• 198.精读《算法 - 动态规划》
• 199.精读《算法 - 滑动窗口》
• 200.精读《算法 - 回溯》
• 201.精读《算法 - 二叉树》
• 203.精读《算法 - 二叉搜索树》
• 283.精读《算法题 - 通配符匹配》
• 284.精读《算法题 - 统计可以被 K 整除的下标对数目》
• 285.精读《算法题 - 最小覆盖子串》
• 286.精读《算法题 - 地下城游戏》
• 288.精读《算法题 - 编辑距离》
• 289.精读《算法题 - 二叉树中的最大路径和》

可视化搭建

• 268.如何抽象可视化搭建
• 269.组件注册与画布渲染
• 270.画布与组件元信息数据流
• 271.可视化搭建内置 API
• 272.容器组件设计
• 273.组件值与联动
• 274.定义联动协议
• 275.组件值校验
• 276.keepAlive 模式
• 278.ComponentLoader 与动态组件
• 279.自动批处理与冻结
• 280.场景实战

SQL

• 231.SQL 入门
• 232.SQL 聚合查询
• 233.SQL 复杂查询
• 234.SQL CASE 表达式
• 235.SQL 窗口函数
• 236.SQL grouping

机器学习

• 291.机器学习简介: 寻找函数的艺术
• 292.万能近似定理: 逼近任何函数的理论
• 293.实现万能近似函数: 神经网络的架构设计
• 294.反向传播: 揭秘神经网络的学习机制
• 295.完整实现神经网络: 实战演练

数学之美

• 296.手动算根号

生活

• 290.个人养老金利与弊

关注前端精读微信公众号