# vue

# 响应性原理

• 内存中维护了一个桶结构，weakMap-Map-Set，用于存储所有的副作用函数
• 使用 Proxy 这个 api 对对象进行代理，拦截到 getter 操作进行 track 收集副作用，拦截到 setter 操作进行 trigger 触发副作用函数。

# 编译时

• 将 template 词法分析为 tokens，语法分析为 vue ast，（标记 v-if 等指令属性），接着转换为 js ast，接着将 ast 变为 render 函数字符串（v-if 变为三元表达式），最后使用 new Function () 变为可执行的 render 函数。

# 运行时

• h 函数生成 vnode

# diff 算法

• 首先自前向后进行 diff 比对，只要 key 和 type 不同就直接 path 更新（调用 render 函数，该组件重新渲染一遍），接着自后向前进行 diff 比对，最后获取最长递增子序列，在相应的节点位置处进行插入。

# react

# 响应性原理

• 内存中维护了一个最小任务堆存储副作用，根据 timeout 属性进行排序，每一个副作用都对应有一个 lane 车道，通过 lane 车道和 hooks 的调用方式将副作用打上 timeout 标记
• 为了避免高优先级任务打断低优先级任务导致 UI 延迟渲染而造成的卡顿现象，react 采用 Message Channel 和 performance.now 这两个 api 模拟 requestIdleCallback，使得任务在不影响 UI 渲染的情况下执行
• requestIdleCallback 这个 api 有 FPS 最大帧率限制，一帧执行 8 次，并且高交互操作时不稳定，兼容性也不太好，settimeout 嵌套 5 层有 4ms 最小延迟。

# webpack

# loader

一个 loader 就是一个函数，它接收文本内容，返回转换后的文本内容，以一种管道的形式传递内容。

# plugin

一个类，具有 apply 方法，第一个参数是 compiler 实例（整个编译实例），可以注册整个编译过程的生命周期钩子（使用的是 tapable 这个库），在钩子中可以获取到 compilation 实例，对应加载某一个文件时的生命周期钩子。