blog
blog copied to clipboard
mengxiong10
博客 - 谢孟雄记录知识的地方
## Scheduler 的作用 它实现的是一个任务调度器, 让任务可以在合适的时间执行,不阻塞渲染, 保证页面流畅 类似于浏览器自带的`requestIdleCallback` 回调函数会在浏览器空闲时间执行不影响渲染 虽然是空闲时间, 但是如果回调函数本身执行时间很长, 还是会阻塞渲染, 所以一般来说使用任务调度会先将执行时间长的大任务分成一个个执行时间比较短的小任务, 分散到不同的帧去调度执行 这也是`React`重构成`Fiber`的原因, 因为`JSX`天然的嵌套结构, 之前任务是递归执行无法将任务打断再继续, 重构成`Fiber`链表结构之后, 就可以分散成以`Fiber`为单位的小任务, 随时打断然后重新执行,让时间分片成为可能 专业文档的做法是将普通函数重构成`generator`函数, 也可以将一个大任务分成很多小任务  ## requestIdleCallback 用法 ```ts interface RequestIdleCallbackDeadline { imeRemaining?():...
## http缓存 每次浏览器请求前会先访问浏览器缓存，查找缓存结果和缓存标识（上次响应头中的字段），然后根据标识决定是否使用缓存。 #### 强制缓存 Cache-Control : * "max-age = \" 设置指令从请求开始,允许响应被重用的时间,不向服务器发送请求,直接取浏览器缓存. * public 表明响应可以被任何对象（包括：发送请求的客户端，代理服务器，等等）缓存,不是必须.声明max-age就OK * private 表明响应只能被单个用户缓存，不能作为共享缓存（即代理服务器不能缓存它) * no-store 直接禁止浏览器以及中间代理缓存,每次都下载完整的响应 * no-cache 在使用已存储的缓存数据前，发送带验证器(ETag)的请求到服务器. 在浏览器中，资源都会在硬盘中缓存，但是js和图片等文件还会在内存缓存中， 这样刷新页面就直接从内存缓存中读取（from memory cache），css其他资源从硬盘读取(from disk cache)，...
## 常见写法 将弹窗组件嵌套在调用的组件下面, 弹窗组件的显示隐藏由父组件控制. ```jsx function Dialog({ visible, onCancel, id}) { return ( 我是弹窗组件{id} ) } function Parent() { const [visible, setVisible] = useState(false); const [currentId, setCurrentId] = useState(0); const...
## 2-3查找树 为了保持查找树的平衡, 我们允许一个节点存储多个键, 一个2-3树就是允许一个节点可以有1 或 2 个节点, 对应有2个或3个子节点. * 2- : 一个键两个链接; * 3-: 两个键三个链接; 如下图.  ### 插入的时候怎么保持平衡 当未命中查找结束于一个2-节点就很简单, 直接把这个2-节点替换为3- 节点就OK了, 树还是平衡的. 当结束于3-节点 就有点麻烦, 我们可以临时构造一个4- 节点, 然后向上分解, 把中间的键移到父节点里面去,...
最近在写react 源码分析, 整体架构的文章比较多, 就转一篇写的比较清晰的文章. https://github.com/HuJiaoHJ/blog/issues/7
## 上下文传递(栈) React 的上下文传递都通过 valueStack 这个数组保存. 但是需要存储多种类型的数据(NewContext, HostContainer 等),配合游标(cursor)实现. 接口 - createCursor(defaultValue) - isEmpty() - pop(cursor, fiber) - push(cursor, value, fiber) ```js // 游标的current保存当前的值; // push的时候传入游标的值,索引+1, 游标的current再保存为最新传入的值; // pop的时候取出valueStack当前位置的值交给游标, valueStack赋值null,索引-1;...
## 浏览器的渲染过程 1. Create/Update DOM And request css/image/js：浏览器请求到HTML代码后，在生成DOM的最开始阶段（应该是 Bytes → characters 后），并行发起css、图片、js的请求，无论他们是否在HEAD里。 注意：发起 js 文件的下载 request 并不需要 DOM 处理到那个 script 节点，比如：简单的正则匹配就能做到这一点，虽然实际上并不一定是通过正则：）。这是很多人在理解渲染机制的时候存在的误区。 2. Create/Update Render CSSOM：CSS文件下载完成，开始构建CSSOM 3. Create/Update Render Tree：所有CSS文件下载完成，CSSOM构建结束后，和 DOM...
## 模式定义 观察者模式(Observer Pattern)：定义对象间的一种一对多依赖关系，使得每当一个对象状态发生改变时，其相关依赖对象皆得到通知并被自动更新。观察者模式又叫做发布-订阅（Publish/Subscribe）模式、模型-视图（Model/View）模式、源-监听器（Source/Listener）模式或从属者（Dependents）模式。 观察者模式是一种对象行为型模式。 ## 自己的理解 JavaScript本身就是基于事件驱动的，所以观察者模式还是比较容易理解。像流行的MVVM也离不开观察者模式，数据的变化通知视图更新。在轻文的一个需求演绘登录后在不刷新页面的情况下更新评论框，个人信息等状态。使用观察者模式在各个模块中通信。 ## 实例 自定义事件 ```JavaScript class EventTarget { constructor () { this.subs = {} } on (type, listener) { if (!Array.isArray(this.subs[type])) { this.subs[type]...
## 异步I/O Node通过I/O线程进行阻塞I/O或非阻塞I/O轮询，然后主线程（JavaScript）负责计算，通过线程之间的通信传递数据，完成异步I/O。除了JavaScript是单线程外，Node 自身其实是多线程的，内部完成I/O任务的另有线程池。
# 关于JavaScript数组乱序 ## Array.prototype.sort 常见的一个写法是利用Array.prototype.sort ```JavaScript function shuffle1 (arr) { return arr.concat().sort(function () { return Math.random() - 0.5 }) } ``` ### 问题 这个排序算法并不是完全随机的.如果是完全随机的那么数组[ 0, 1, 2, 3, 4, 5,...