跳到主要内容

琐碎点汇总

· 阅读需 26 分钟
多云转晴
前端开发

在 Node 环境中使用 ESM

两种方式:

  1. 把模块文件的后缀改成 .mjs
  2. 给最近的上级 package.json 文件添加名为 type 的字段,并将字段值改成 module

渲染原理

· 阅读需 8 分钟

事件循环

事件循环

  1. 在最开始的时候,渲染主线程会进入一个无限循环。
  2. 每一次循环会检查消息队列中是否还有任务存在。如果有,就取出第一个任务执行,执行完一个后进入下一次循环;如果没有,则进入休眠状态。
  3. 其他所有的线程(包括其他进程的线程)可以随时向消息队列中添加任务。新任务会加到消息队列的末尾,在添加新任务是,如果主线程是休眠状态,则会将其唤醒以继续循环拿取任务,这样一来,就可以让每个任务有条不紊、持续的进行下去。

用 Stream 编程

· 阅读需 19 分钟

缓冲模式和流模式

  • 缓冲模式(buffer mode),在这种模式下系统会把某份资源传来的所有数据,都先收集到一个缓冲区里,直到操作完成为止。然后,系统把这些数据当成一个模块回传给调用方。比如 fs.writeFilefs.readFile 等;

  • 流模式(stream mode),在流模式下,系统会把自己从资源端收到的每一块新数据都立刻传给消费方,让后者有机会立刻处理该数据。

哈夫曼编码 Node.js 简单实现

· 阅读需 14 分钟
多云转晴
前端开发

哈夫曼树

定义

  1. 给定 n 个权值作为 n 个叶子结点,构造一棵二叉树,若该树的带权路径长度(WPL)达到最小,称这样的二叉树为 最优二叉树,也称为 哈夫曼树

  2. 哈夫曼树是带权路径长度最短的树,权值较大的结点离根结点较近。

  3. 树的带权路径长度:树的带权路径长度规定为所有叶子结点的带权路径长度(WPL,weighted path length)之和,权值越大的结点离根结点越近的二叉树才是最优二叉树。

  4. WPL 最小的就是哈夫曼树。

WPL计算过程

TypeScript 中的装饰器原理

· 阅读需 27 分钟
多云转晴
前端开发

定义、分类

定义

装饰器本质上就是一个函数,可以“注入”到类、方法、属性、对象上,用于扩展其功能。

分类:

  • 类装饰器
  • 属性装饰器
  • 方法装饰器
  • 方法的参数装饰器
  • 元数据装饰器

装饰器通常有两种写法:

  1. 调用时不传递参数的装饰器;
  2. 装饰器工厂,调用时可以传递参数的装饰器;

浏览器缓存

· 阅读需 7 分钟
多云转晴
前端开发

浏览器的缓存类型比较多,例如:

  • HTTP Cache: HTTP 缓存;
  • Disk Cache: 将缓存写入到硬盘中;
  • Memory Cache: 将缓存写入到内存中;
  • Service Worker Cache;

强缓存

Disk CacheMemory Cache 属于强缓存,是 HTTP 缓存的产物,强缓存的产生依赖于请求响应中的 cache-controlexpires 的 headers 字段。这两个字段都用来设置缓存数据的有效时间。

强缓存

手写 Promise A+(一):实现 then 方法

· 阅读需 12 分钟
多云转晴
前端开发

promise 如今已经深度融入前端开发技术当中,很多模块内部都依赖 promise,使用 promise 可以很好的解决异步回调问题。

promise 内部有三种状态:预备态(pending)、成功态(fulfilled)和失败态(rejected)。初始状态是 pending,当操作完成时会变成成功态,如果操作出现异常而终止时它会变成失败状态(或拒绝态)。一旦 promise 被履行或者被拒绝,它就不可逆转,即不能从成功态再变回其他状态,状态之间不能再相互转换。此时的 promise 可以认为是完成状态(settled)。