文章
自 2015 年起，一共 41 篇。按时间倒序排列，也可以按分类或标签翻。
Timeline全部笔记
41 篇 · 最新 2025.03.07React v17 源码系列：一文搞懂 useReducer
从 ReactCurrentDispatcher 到 mountReducer / updateReducer：拆解 React 17 中 useReducer 的 hook 链表、环形 update 队列与 lanes。
MacOS 借助 FileZilla 快速部署 FTP Server
系统：MacOS 15.2 Sequoia 工具：FileZilla Server 19.4(Apple Silicon) 下载系统所适配的FileZilla Server 自行安装 FileZill…
How React Developer Learn Vue？
本文写于 25 年 1 月，杭州云谷，这两天气候干冷转暖，宜学习，我已断更大半年，恰逢手头无事，就借这个机会写点学习笔记吧。我将尝试以 React 开发者视角，去学习 Vue，找出二者的共性，形成框架…
React 各版本特性一览
React 是一个用于构建用户界面的 JavaScript 库，自发布以来经历了多个主要版本的更新，每个版本都引入了新的特性和改进。以下是各主要版本的一些关键特性： 初始版本 : React 0.3 …
覆盖式发布VS非覆盖式发布
覆盖式：新版本会覆盖上一个版本； 非覆盖式：每个版本共存； 覆盖式：节省存储空间，但不容易做版本回退； 非覆盖式：占用大量存储空间，无缝切换版本； 覆盖式：强调系统一致性，不接受特定版本的定制、维护；…
字节跳动直播线面试（二面）复盘
1. Webpack 本地构建优化 2. Webpack 联邦模块 3. 除了 redux、mobx，还了解哪些前端状态管理类库 4. 了解哪些基于 redux 二次开发的类库 5. 了解 react…
字节跳动直播线面试（一面）复盘
1. 自我介绍 2. 两列布局，左定宽，右适应 3. 重排和重绘是什么，如何降低重排重绘的性能开销？ 4. 如何判断一个变量是 Array？ 5. 宏任务和微任务是什么？说出给定异步代码的输出结果（s…
Webpack 常识
1. Loader vs Plugin Loader 用于加载并解析各类文件，如 css / sass / ts / markdown / png 等； Plugin 用于扩展 Webpack 的能力…
数算再回顾（三）二叉树常见算法
数（据结构）算（法）再回顾，加深记忆抗遗忘。 100. 相同的树 101. 对称二叉树 226. 翻转二叉树 对称二叉树解法一：修改 isSameTree 逻辑，将同侧分支判断改为对称侧分支判断。 对…
数算再回顾（二）二叉树常见算法
数（据结构）算（法）再回顾，加深记忆抗遗忘。 144. 二叉树的前序遍历 基本规律：二叉树前序遍历结果一定是 [root, left, right] 94. 二叉树的中序遍历 基本规律：二叉树中序遍历…
数算再回顾（一）二叉树性质
数（据结构）算（法）再回顾，加深记忆抗遗忘。 1. 非空二叉树的叶子节点数，等于度为 2 的节点数加 1； 2. 第 k 层至多有 2^(k − 1) 个节点（每层节点数可构成公比为 2 的等比数列）…
基于cheerio实现的github contributions crawler
github contribution NPM github contribution Github 起因是想在博客上加一个类似 github contribution heatmap 的小组件，用来…
上海奇普乐面试复盘
1. 输入数字（单位byte），转为B、KB、MB、GB或TB，单位动态变化。 2. 输入数组，找峰值（大于相邻元素的元素），输出峰值下标，时间复杂度能否优化到对数级。 3. 两颗二叉树是否相同（le…
LeetCode Easy 124. 二叉树中的最大路径和
124. 二叉树中的最大路径和 粗略思路：从叶子节点开始，以贪心策略求得局部最大路径和，叶子节点计算完之后，回到父节点，再以同样的贪心策略求得局部最大路径和，重复该过程， 显然这是二叉树的后序遍历 。…
LeetCode Easy 121. 买卖股票的最佳时机
121. 买卖股票的最佳时机 题目要求只能在某一天买，之后的某天卖，利润 = 卖的价格 买的价格，让卖的价格最高，买的价格最低，则利润最大，且附加限制条件：先买后卖； 以这样的顺序迭代： 1. 第一天…
北京建设银行面试复盘
一面： 1. 自我介绍 2. js闭包，优缺点 3. es6新特性 4. for...in与for...of 5. 0.1 + 0.2 === 0.3？ 6. http缓存机制 7. 跨域及跨域处理 …
网络安全
漏洞：当用户输入的内容发送到服务器，服务器动态生成的页面中会将输入内容拼接进去，而不加任何非法字符验证或过滤； 攻击原理：可以在输入中编写攻击代码（ <script 攻击代码<script/ ），服务…
Git基本知识
1. git add . ：将工作区修改添加到暂存区； 2. git commit m '...' ：将暂存区修改提交到本地仓库，并添加描述； 3. git remote add origin htt…
网络协议
TCP/IP 四层模型：应用、传输、网络、网络接口； TCP/IP 五层模型（主流）：应用、传输、网络、数据链路、物理； OSI 七层模型： 应用：http、ftp 表示：telnet 会话：dns …
Typescript进阶
讲的最好的协变、逆变 T extends U ? T : never ，T如果可以分配给U，则返回类型T，否则返回never； 注意，当T是联合类型时，相当于对T的每种子类型单独应用条件类型，然后再把…
React v17.0.2源码
React 17.0.2 源码走读：Mount / Update 主流程、Work Loop、类组件与函数组件、Hooks 链表与 Scheduler 时间切片。
react-router详解
传统浏览器导航行为就是URL改变时直接向服务器发送请求，服务器响应对应资源，而客户端路由就是URL改变时不再发送请求，而是由客户端部署的App自行匹配URL并展示对应内容。 remix/history…
Mobx
非单一数据源 单向数据流 State Action Derivation Computed value：是一个无参纯函数，输入相同时将直接返回上次缓存的值 Reaction：当State改变时，需要执…
Redux详解
Redux是一个集中存储和管理全局状态的库，通过reducer纯函数来定义怎样更新state，然后通过dispatch action更新state，state每次更新都要返回一个新对象，也就是说sta…
常见业务之单点登录（SSO）
SSO 是 single sign on 的缩写，国内统称单点登录，其实翻译为单一登录更为准确，因为其内涵就是对于多系统的场景下，只进行一次登录即可访问所有子系统资源。 [注]：阅读前需掌握前置知识 …
列表虚拟化
列表虚拟化就是只渲染部分列表项，具体思路：两层容器，外层控制可见区域大小，内层计算一个高度（ 列表项数量 列表项高度 ，或 列表项高度累加 ），内层超高会使外层出现滚动条，监听外层容器滚动事件，通过 …
滚动加载
一个简单的滚动加载实现：通过Web API IntersectionObserver观察最后一个列表元素，当它出现在可视区域时，解除观察，同时异步地加载数据，并展示一个loading，在加载数据的回调…
LeetCode Hard 32. 最长有效括号
32. 最长有效括号 注释比较长，耐心看， 重点一 是看懂dp[i]表示的是什么，那就是从j到i的合法子串长度，0 <= j <= i， 重点二 是j可由等式dp[i] = i j + 1变形求得， …
React基础知识
基础API或特性： ClassComponent生命周期（含unsafe） Hooks如何模拟ClassComponent生命周期 useEffect VS useLayoutEffect useRe…
浏览器内核
1. JS解释编译简要过程 源代码通过解析器生成AST（Abstract syntax tree），然后生成字节码（介于高级语言与机器语言之间的中间代码），再通过解释器逐行解释并执行，借助JIT（Ju…
JS手撕代码
注：改变 this 指向是借助 “形如 obj.foo() 的函数调用，foo 函数在运行时的 this 会指向 obj 的特点”，而为了不覆盖原函数的已有属性，通过 Symbol 定义一个不重复的属…
Javascript常见内置对象
Object / Function / Array / String / Promise / RegExp 的常用方法与易错点速查。
面向对象编程
OOP（Object Orient Programming）面向对象编程； 三大特征： 1. 封装，将功能封装进相对独立的模块； 2. 多态，同一接口、类型，却可以做不同的事，代表不同的涵义； 3. …
Javascript进阶
定义的函数、类或对象会自动创建原型对象，并通过 prototype 和 constructor 互相指向对方，原型之间通过 proto 构成原型链，实例调用某个方法时，会沿原型链寻找该方法，直到找到指…
Execution Context
JS 引擎只确保 Execution Context 描述的机制，但不确保采用什么手段去实现。 首先，Execution Context 是 ECMAScript 语言规范中的抽象概念，它旨在建立一种…
CSS基础
盒模型分为四部分： margin box border box padding box content box 标准盒模型（content box）： block 盒子可设置宽高（默认占满父容器宽度）…
常见Web布局
按照元素在文档中的出现顺序与书写方向（write mode），搭配盒模型进行布局。 通过修改元素的position 来实现一些特殊布局效果。 float：none/left/right 用于指定浮动方…
HTML基础
三点：无需编写CSS就可以保持良好的文档结构、有助于SEO、有助于Web Accessibility； 三层：结构层（HTML）、表示层（CSS）、行为层（JS）； <! more 三点：不利于SEO…
Leetcode 刷题套路
刷题时反复用到的数组、字符串与二叉树套路：滑动窗口、双指针、四种遍历和递归框架。
What is Web Accessibility?
国内公司几乎不会考虑Web Accessibility，这与我们的法律有关，我国国内的法律并不强制要求Web Accessibility，但是世界上的部分国家如美国，则出台过508康复法案，制订了若干…
窗雨随笔
寒意未祛的早春下午，我坐在沙发上，在随手丢放的衣服毯子包围中，打开半扇窗户，愣愣地望着窗外出神，许久没有这般安静观察过这方世界了——窗外的世界，雨中的世界。 年少时，我常有强烈的创作欲，尤其是逢着雨天…