Live Note

Remain optimistic

Posted on Edited on In

Generics

1
2
3
4
5
6
7
8
function foo<T>(arg: T): T {
  return arg
}

function len<T>(arg: Array<T>): Array<T> {
  console.log(arg.length)
  return arg
}

Generics Types

1
2
3
4
5
6
7
8
9
10
11
function foo<T>(arg: T): T {
  return arg
}

interface fooInterface<T> {
  (arg: T): T
}

let myFunction: <T>(arg: T) => T = foo
let otherFunction: { <T>(arg: T): T } = foo
let interfaceFunction: fooInterface<number> = foo
Read more »

Posted on Edited on

缘由

公司的 PC 没有音卡。导致耳机不能播放。

使用 pavucontrol 输出为模拟信号

刚开始总报找不到这个 package。
换了官方源也没用。
后来才发现需要打开开源 package 安装。。。software & updates > ubuntu software > open-source software

Posted on Edited on

Node.js is built on Google’s V8 engine, and V8’s garbage collection mechanism is one of its core performance features. In this article, we’ll explore the three primary garbage collection algorithms used in V8: Mark-Sweep, Mark-Compact, and Scavenge, along with their working principles and application scenarios.

V8’s Memory Partition Model

Before diving into garbage collection algorithms, we need to understand V8’s memory partition model. V8 divides memory into two main regions:

Young Generation

  • Contains objects with short lifespans.
  • Typically small in size (e.g., a few MB).
  • Uses the Scavenge algorithm for garbage collection.

Old Generation

  • Contains objects with longer lifespans.
  • Typically larger in size (e.g., hundreds of MB).
  • Uses the Mark-Sweep and Mark-Compact algorithms for garbage collection.
Read more »

Posted on Edited on In

原理

通过改写[].__proto__上的方法，实现对Array原生方法的拦截。

源码位置为 /core/instance/observer/array.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
// cache the original Array.prototype
const originalPrototype = Array.prototype

// create an object from original Array.prototype
const arrayMethods = Object.create(originalPrototype)

const methodsToPatch = [
  "push",
  "pop",
  "shift",
  "unshift",
  "splice",
  "sort",
  "reverse",
]

methodsToPatch.forEach((method) => {
  arrayMethods[method] = function (...args) {
    // use original Array methods to get the result
    const result = originalPrototype[method].apply(this, args)

    // proxy here
    console.log(`catch ${method}`)

    return result
  }
})

const a = [1, 2, 3]
a.__proto__ = arrayMethods

a.push(1)
a.reverse()
a.pop()

console.log(a)

Posted on Edited on In

Vite 为什么快？

Vite 的速度优势主要来源于其基于原生 ESM（ES Modules）的开发模式和高效的构建过程。

原生 ESM 的开发服务器

传统打包工具（如 Webpack）的问题

  • Webpack 在开发模式下会将所有模块打包成一个或多个 bundle 文件，即使只修改了一个文件，也需要重新打包整个 bundle。
  • 这种打包过程涉及大量的文件读取、解析、转换和写入操作，随着项目规模增加，启动时间和热更新时间会显著变慢。

Vite 的解决方案

  • Vite 利用现代浏览器对 原生 ES Modules（ESM） 的支持，在开发模式下不进行打包，而是直接通过 HTTP 请求按需加载模块。
  • 浏览器支持 <script type="module">，可以动态加载 ESM 模块，Vite 的开发服务器将源码直接以 ESM 格式提供给浏览器。
  • 启动速度快：
    • Vite 的开发服务器启动时，只需要初始化一个简单的 HTTP 服务器，无需预先打包整个项目。
    • 文件按需加载，只有访问到的模块才会被处理（例如解析和转换），大大减少了初始启动时间。
  • 按需编译：
    • Vite 使用 Esbuild（一个极快的 JavaScript/TS 编译器）对 TypeScript、JSX 等非标准 ESM 文件进行预编译，生成浏览器可识别的 ESM 格式。
    • Esbuild 的性能比传统工具（如 Babel）快 10-100 倍，因为它是基于 Go 语言实现的，充分利用了多核 CPU。
Read more »