03 JavaScript
  ├─ 前置：无
  ├─ 紧接着：04 TypeScript（给 JS 加类型）
  │             05 浏览器原理（运行环境）
  │             06 框架（基于 JS 的抽象）
  ├─ 交叉：11 性能（长任务/内存）、14 Node（同一语言的服务端）
  └─ 长期：09 工程化（AST 与构建）

// var：函数作用域 + 变量提升（初始化为 undefined）
console.log(a); // undefined，不报错
var a = 1;

// let/const：块级作用域 + 暂时性死区（TDZ）
console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 1;

// const 只保证「绑定不变」，不保证内容不可变
const list = [1, 2];
list.push(3);      // 允许
list = [4];        // TypeError: Assignment to constant variable

typeof undefined;   // 'undefined'
typeof null;        // 'object'  ← 历史 bug，无法修复
typeof [];          // 'object'  ← 数组也是对象
typeof function(){};// 'function'
typeof 1n;          // 'bigint'

null == undefined;   // true
null == 0;           // false  ← 容易踩
'' == 0;             // true
'0' == false;        // true
[] == false;         // true   ← [] → '' → 0
[] == ![];           // true   ← 右侧 ![] 是 false

1 + '1';      // '11'（有字符串就是拼接）
1 + 1 + '1';  // '21'（从左到右）
'1' + 1 + 1;  // '111'
[] + [];      // ''
[] + {};      // '[object Object]'

let a = { n: 1 };
let b = a;      // 复制的是「引用」，两个变量指向同一个对象
b.n = 2;
console.log(a.n); // 2

let x = 1;
let y = x;      // 复制的是值
y = 2;
console.log(x); // 1

const origin = { a: 1, nested: { b: 2 } };

const shallow = { ...origin };          // 浅拷贝：nested 仍共享
shallow.nested.b = 99;
console.log(origin.nested.b);           // 99（被改了）

const deep = structuredClone(origin);   // 原生深拷贝（现代浏览器/Node 17+）

const obj = {
  name: 'obj',
  regular() { return this.name; },
  arrow: () => this?.name,
};

obj.regular();          // 'obj'   ← 隐式绑定：谁调用指向谁
const fn = obj.regular;
fn();                   // undefined（严格模式）← 默认绑定

obj.regular.call({ name: 'other' });  // 'other' ← 显式绑定
new obj.regular();                    // this 指向新对象 ← new 绑定

const counter = {
  count: 0,
  inc: () => { this.count++; },  // this 是外层（模块/全局），不是 counter
};

function sum(...nums) {           // 剩余参数，得到真数组
  return nums.reduce((a, b) => a + b, 0);
}

function oldStyle() {
  return Array.from(arguments);   // arguments 是类数组对象
}

// 数组：优先用不改变原数组的方法
const nums = [1, 2, 3, 4];
nums.map((n) => n * 2);            // [2,4,6,8]
nums.filter((n) => n % 2 === 0);   // [2,4]
nums.reduce((sum, n) => sum + n, 0);// 10
nums.find((n) => n > 2);           // 3
nums.some((n) => n > 3);           // true
nums.every((n) => n > 0);          // true

// ⚠️ 会改变原数组的方法
nums.push(5); nums.pop(); nums.splice(0, 1); nums.sort(); nums.reverse();

[10, 2, 1].sort();          // [1, 10, 2]  ← 按字典序
[10, 2, 1].sort((a, b) => a - b); // [1, 2, 10]

const user = { name: '张三', age: 20 };

Object.keys(user);              // ['name', 'age']
Object.entries(user);           // [['name','张三'], ['age',20]]
Object.fromEntries([['a', 1]]); // { a: 1 }

// 可选链与空值合并
const city = user?.address?.city ?? '未知';   // ?? 只在 null/undefined 时取右值

console.log('1');

setTimeout(() => console.log('2'), 0);

Promise.resolve().then(() => console.log('3'));

queueMicrotask(() => console.log('4'));

console.log('5');

// 输出：1 5 3 4 2

1. 执行同步代码（调用栈清空）
2. 清空所有微任务（microtask queue）：Promise.then、queueMicrotask、MutationObserver
3. 渲染（如果需要）
4. 取一个宏任务（task）：setTimeout、事件回调、网络回调
5. 回到第 2 步

<div id="outer">
  <button id="inner">点我</button>
</div>

const outer = document.getElementById('outer');

// 捕获阶段（从外到内）
outer.addEventListener('click', () => console.log('capture'), true);

// 冒泡阶段（从内到外，默认）
outer.addEventListener('click', () => console.log('bubble'));

// 阻止默认行为（如链接跳转、表单提交）
event.preventDefault();

// 阻止继续冒泡
event.stopPropagation();

document.getElementById('list').addEventListener('click', (event) => {
  const item = event.target.closest('[data-id]');
  if (!item) return;
  console.log('点击了', item.dataset.id);
});

var a = 1;
let b = 2;

console.log(window.a);        // 1：var 在全局 Object Record 上建了属性
console.log(window.b);        // undefined：let 在 Declarative Record 上，不上挂对象

console.log(delete window.a); // false：不可配置

console.log(typeof notDeclared);  // 'undefined'：真的不存在
console.log(typeof tdzed);        // ReferenceError：存在但未初始化
let tdzed = 1;

const obj = {
  valueOf: () => 42,
  toString: () => 'str',
};

console.log(obj + 1);   // 43：valueOf 先返回原始值
console.log(`${obj}`);  // 'str'：字符串上下文提示 'string'，优先 toString

const obj2 = {
  [Symbol.toPrimitive]: (hint) => (hint === 'number' ? 1 : 'x'),
};

console.log(obj2 + 1);   // 2
console.log(`${obj2}`);  // 'x'

[] == false        // true：[] → '' → 0，false → 0
[] == ![]          // true：右边 ![] 是 false → 0，左边 [] → '' → 0
null == 0          // false：null 只与 undefined 相等
NaN == NaN         // false
'1' == 1           // true
[1] == 1           // true：[1] → '1' → 1

const source = { date: new Date(), map: new Map(), arr: [1, 2] };
const copy = structuredClone(source);

// 需要保留原型或类实例时，结构化克隆不够用
const user = new User('a');
const cloned = structuredClone(user);  // 变成普通对象，instanceof 失效

function Fn() {
  console.log(this.name);
}

const bound = Fn.bind({ name: 'bound' });
new bound();            // undefined：new 优先级更高，this 指向新实例

// 1. 方法被「解构」后丢 this
const obj = { name: 'a', hi() { return this.name; } };
const { hi } = obj;
hi();                   // 严格模式下抛错 / 非严格为 undefined

// 2. 回调里丢 this
setTimeout(obj.hi, 0);  // this 不是 obj，应写 setTimeout(() => obj.hi(), 0)

// 3. 类字段箭头函数 vs 原型方法
class A {
  name = 'a';
  hi = () => this.name;   // 每个实例一份，绑定确定，但内存开销更大
  hi2() { return this.name; }  // 挂在原型上，共享
}

// 数字排序必须给比较函数，否则按字符串比
const nums = [10, 9, 100];
nums.sort((a, b) => a - b);   // [9, 10, 100]

// 深冻结需要递归
/**
 * 递归冻结对象，防止嵌套属性被意外修改。
 * @template T
 * @param {T} value
 * @returns {T}
 */
function deepFreeze(value) {
  if (value && typeof value === 'object' && !Object.isFrozen(value)) {
    Object.freeze(value);
    Object.values(value).forEach(deepFreeze);
  }
  return value;
}

console.log('1');
setTimeout(() => console.log('2'), 0);
Promise.resolve().then(() => console.log('3'));
queueMicrotask(() => console.log('4'));
console.log('5');

// 输出：1 5 3 4 2
// 原因：同步先跑完（1、5），清空微任务（3、4），最后才是宏任务（2）

// 反面例子：微任务无限递归会阻塞渲染与输入响应
function loop() {
  Promise.resolve().then(loop);   // 不要这样写
}

function makeCounter() {
  let count = 0;              // 被闭包捕获，不会随函数返回而回收
  return {
    inc: () => ++count,
    get: () => count,
  };
}

const c1 = makeCounter();
c1.inc();
c1.inc();
console.log(c1.get()); // 2
console.log(count);    // ReferenceError：外部访问不到

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 0); // 3 3 3
}

for (let j = 0; j < 3; j++) {
  setTimeout(() => console.log(j), 0); // 0 1 2
}

/**
 * 创建一个带缓存的纯函数包装。
 * @param {(n: number) => number} fn 需要缓存的函数
 * @returns {(n: number) => number} 带缓存版本
 */
function memoize(fn) {
  const cache = new Map();
  return (n) => {
    if (!cache.has(n)) cache.set(n, fn(n));
    return cache.get(n);
  };
}

function Animal(name) {
  this.name = name;
}
Animal.prototype.speak = function () {
  return `${this.name} 发出声音`;
};

const dog = new Animal('狗');
dog.speak(); // '狗 发出声音'

// 原型链：dog → Animal.prototype → Object.prototype → null
Object.getPrototypeOf(dog) === Animal.prototype; // true

Animal.prototype;          // 构造函数的原型对象
dog.__proto__;             // 实例的原型（等于 Animal.prototype）

class Animal {
  constructor(name) { this.name = name; }
  speak() { return `${this.name} 发出声音`; }
  static create(name) { return new Animal(name); }
}

class Dog extends Animal {
  speak() { return `${super.speak()}：汪`; }
}

Array.isArray([]);            // true
[] instanceof Array;          // true（跨 iframe 会失效）
Object.prototype.toString.call([]); // '[object Array]'（最稳）

// ESM：静态结构，编译期就能确定依赖
import { readFile } from 'node:fs/promises';
export const version = '1.0.0';
export default function init() {}

// CJS：运行时加载
const fs = require('node:fs');
module.exports = { version: '1.0.0' };

// counter.mjs
export let count = 0;
export function inc() { count++; }

// main.mjs
import { count, inc } from './counter.mjs';
inc();
console.log(count); // 1（跟着变）

const p = new Promise((resolve, reject) => {
  // 只能决定一次
  resolve(1);
  reject(new Error('无效')); // 被忽略
});

fetch('/api/user')
  .then((res) => {
    if (!res.ok) throw new Error(`HTTP ${res.status}`); // 主动抛错才会进 catch
    return res.json();
  })
  .then((user) => console.log(user))
  .catch((err) => console.error('失败', err))
  .finally(() => console.log('结束'));

Promise.all([a, b]);        // 全部成功才成功；有一个失败立即失败
Promise.allSettled([a, b]); // 等全部结束，返回状态数组（适合「部分成功也要展示」）
Promise.race([a, b]);       // 第一个结束（成功或失败）就返回
Promise.any([a, b]);        // 第一个成功就返回；全失败才失败（AggregateError）

async function load() {
  try {
    const user = await fetchUser();
    const orders = await fetchOrders(user.id); // 串行：等第一个结果才发第二个
    return { user, orders };
  } catch (err) {
    console.error('加载失败', err);
  }
}

async function loadFast() {
  const [user, config] = await Promise.all([fetchUser(), fetchConfig()]);
  return { user, config };
}

// 错误 1：forEach 里的 async 不会被等待
items.forEach(async (item) => {
  await save(item); // 外层函数不等它
});
console.log('全部保存完成'); // 实际还没保存完

// 正确
await Promise.all(items.map((item) => save(item)));

// 错误 2：吞掉错误
try {
  await doSomething();
} catch (e) {} // 空 catch 让问题彻底消失

// 错误 3：循环里的串行 await（能用并发就用并发）
for (const id of ids) {
  results.push(await fetchItem(id)); // 100 个请求串行执行
}

const range = {
  from: 1,
  to: 3,
  [Symbol.iterator]() {
    let current = this.from;
    const last = this.to;
    return {
      next() {
        return current <= last
          ? { value: current++, done: false }
          : { value: undefined, done: true };
      },
    };
  },
};

[...range]; // [1, 2, 3]

function* idGenerator() {
  let id = 0;
  while (true) {
    yield id++;
  }
}

const gen = idGenerator();
gen.next().value; // 0
gen.next().value; // 1

const target = { name: '张三' };

const proxy = new Proxy(target, {
  /**
   * 拦截属性读取。
   * @param {object} obj 目标对象
   * @param {string|symbol} key 属性名
   * @returns {unknown} 属性值
   */
  get(obj, key) {
    if (key === 'greet') return `你好，${obj.name}`;
    return Reflect.get(obj, key);
  },

  /**
   * 拦截属性写入，做校验。
   * @param {object} obj 目标对象
   * @param {string|symbol} key 属性名
   * @param {unknown} value 新值
   * @returns {boolean} 是否写入成功
   */
  set(obj, key, value) {
    if (key === 'age' && typeof value !== 'number') {
      throw new TypeError('age 必须是数字');
    }
    return Reflect.set(obj, key, value);
  },
});

proxy.greet;      // '你好，张三'
proxy.age = '20'; // TypeError

// 1. 全局缓存只增不减
const cache = {};
function remember(key, value) { cache[key] = value; } // 永不清理

// 2. 定时器未清除
const timer = setInterval(poll, 1000);
// 组件卸载时必须 clearInterval(timer)

// 3. 事件监听未解绑
window.addEventListener('resize', handler);
// 卸载时 removeEventListener

// 4. 闭包持有大对象
function create() {
  const bigData = new Array(1e6).fill('x');
  return () => bigData.length; // bigData 永远不释放
}

// 5. 游离 DOM（Detached DOM）
let node = document.getElementById('x');
node.remove();      // 从 DOM 移除
console.log(node);  // 变量仍引用它 → 无法回收

// 6. 未完成的 Promise / 请求未取消
fetch('/slow').then(update); // 组件已卸载仍在更新状态

/**
 * 防抖：停止触发 wait 毫秒后才执行。
 * @param {Function} fn 目标函数
 * @param {number} wait 等待毫秒数
 * @returns {Function} 包装后的函数
 */
function debounce(fn, wait = 300) {
  let timer = null;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), wait);
  };
}

/**
 * 节流：每 wait 毫秒最多执行一次。
 * @param {Function} fn 目标函数
 * @param {number} wait 间隔毫秒数
 * @returns {Function} 包装后的函数
 */
function throttle(fn, wait = 200) {
  let last = 0;
  return function (...args) {
    const now = Date.now();
    if (now - last >= wait) {
      last = now;
      fn.apply(this, args);
    }
  };
}

/**
 * 深拷贝：支持对象、数组、Date、Map、Set，并处理循环引用。
 * @param {unknown} value 待拷贝值
 * @param {WeakMap<object, unknown>} seen 已拷贝记录，防止循环引用
 * @returns {unknown} 拷贝结果
 */
function deepClone(value, seen = new WeakMap()) {
  if (value === null || typeof value !== 'object') return value;
  if (seen.has(value)) return seen.get(value);

  if (value instanceof Date) return new Date(value);
  if (value instanceof Map) {
    const m = new Map();
    seen.set(value, m);
    value.forEach((v, k) => m.set(deepClone(k, seen), deepClone(v, seen)));
    return m;
  }
  if (value instanceof Set) {
    const s = new Set();
    seen.set(value, s);
    value.forEach((v) => s.add(deepClone(v, seen)));
    return s;
  }

  const out = Array.isArray(value) ? [] : Object.create(Object.getPrototypeOf(value));
  seen.set(value, out);
  for (const key of Reflect.ownKeys(value)) {
    out[key] = deepClone(value[key], seen);
  }
  return out;
}

class HttpError extends Error {
  /**
   * @param {number} status HTTP 状态码
   * @param {string} message 错误信息
   * @param {unknown} [cause] 底层原因
   */
  constructor(status, message, cause) {
    super(message, { cause });
    this.name = 'HttpError';
    this.status = status;
  }
}

try {
  await request();
} catch (err) {
  if (err instanceof HttpError && err.status === 401) {
    redirectToLogin();
  } else {
    reportToMonitor(err);
  }
}

function outer() {
  let count = 0;
  return () => ++count;
}
const inc = outer();

inc(函数对象) ──[[Environment]]──▶ Closure Environment
                                     ├─ count: 0
                                     └─ [[OuterEnv]] → 全局环境

// 泄漏形态：闭包捕获了巨大的数据，只为读一个字段
function makeFormatter(hugeDataset) {
  const id = hugeDataset[0].id;        // 只需要 id
  return () => format(id);             // 但整个 hugeDataset 都被环境留住
}

// 修法：先取出需要的值，再返回闭包
function makeFormatterFixed(hugeDataset) {
  const id = hugeDataset[0].id;
  return () => format(id);
}

for (var i = 0; i < 3; i++) setTimeout(() => console.log(i));   // 3 3 3
for (let j = 0; j < 3; j++) setTimeout(() => console.log(j));   // 0 1 2

/**
 * 模拟 new 的行为，用于解释「new 到底做了什么」。
 * @param {Function} Ctor 构造函数
 * @param {...any} args 参数
 */
function mockNew(Ctor, ...args) {
  // 1. 创建一个以 Ctor.prototype 为原型的对象
  const obj = Object.create(Ctor.prototype);
  // 2. 以该对象为 this 执行构造函数
  const result = Ctor.apply(obj, args);
  // 3. 构造函数返回对象则用它，否则用第 1 步创建的对象
  return result !== null && typeof result === 'object' ? result : obj;
}

class Base { #secret = 1; static #count = 0; }
// # 私有字段是运行时的硬保证：外部无法读取、无法伪造，且 Reflect 也拿不到

// counter.js
export let count = 0;
export function increment() { count++; }

// main.js
import { count, increment } from './counter.js';
increment();
console.log(count);   // 1：活绑定

{
  "exports": {
    ".": {
      "import": "./dist/index.mjs",
      "require": "./dist/index.cjs"
    }
  }
}

async function run() {
  console.log('a');
  await null;            // 产生一次微任务
  console.log('b');
  await null;            // 再一次
  console.log('c');
}

run();
console.log('d');

// 输出：a d b c

// 串行：总耗时 = 各请求之和
for (const id of ids) await fetchUser(id);

// 并发：总耗时 = 最慢的那个，但要注意并发上限
await Promise.all(ids.map((id) => fetchUser(id)));

/**
 * 给任意 Promise 加超时，超时后通过 AbortSignal 通知底层请求取消。
 * @template T
 * @param {(signal: AbortSignal) => Promise<T>} task
 * @param {number} timeoutMs
 */
async function withTimeout(task, timeoutMs) {
  const controller = new AbortController();
  const timer = setTimeout(() => controller.abort(), timeoutMs);

  try {
    return await task(controller.signal);
  } finally {
    clearTimeout(timer);   // 无论成功失败都要清理，否则计时器泄漏
  }
}

/**
 * 用 Proxy 实现「只读视图」：写操作抛错，读操作透传。
 * 注意：这是浅层保护，嵌套对象仍可变。
 * @template {object} T
 * @param {T} target
 * @returns {T}
 */
function readonly(target) {
  return new Proxy(target, {
    set() {
      throw new TypeError('只读视图，禁止修改');
    },
    deleteProperty() {
      throw new TypeError('只读视图，禁止删除');
    },
  });
}

/**
 * 事件监听与组件同生命周期：用 AbortController 一次性注销。
 * @param {HTMLElement} el
 */
function bindWithSignal(el) {
  const controller = new AbortController();
  const { signal } = controller;

  el.addEventListener('click', onClick, { signal });
  window.addEventListener('resize', onResize, { signal });

  // 卸载时调用一次，全部监听同时移除
  return () => controller.abort();
}

// 好：属性顺序一致，共享隐藏类
function createPoint(x, y) { return { x, y }; }
const p1 = createPoint(1, 2);
const p2 = createPoint(3, 4); // 与 p1 同一个隐藏类

// 坏：动态增删属性导致隐藏类迁移链变长
const p3 = { x: 1 };
p3.y = 2;      // 迁移到新隐藏类
delete p3.x;   // 变成字典模式（慢属性）

// 手动观察（Node 环境）
setInterval(() => {
  const { heapUsed } = process.memoryUsage();
  console.log(`堆内存：${(heapUsed / 1024 / 1024).toFixed(1)} MB`);
}, 5000);

const cache = new WeakMap(); // 键是对象，键被回收时条目自动消失

function attachMeta(el, meta) {
  cache.set(el, meta); // el 被移除且无其它引用时，缓存自动清理
}

输入处理 → rAF 回调（动画）→ 样式计算 → 布局 → 绘制 → 合成

/**
 * 把大循环拆成多个小任务，让浏览器有机会渲染与响应输入。
 * @param {number[]} items 待处理数据
 * @param {(item: number) => void} handle 单项处理逻辑
 */
async function processInChunks(items, handle) {
  const CHUNK = 200;
  for (let i = 0; i < items.length; i += CHUNK) {
    const slice = items.slice(i, i + CHUNK);
    slice.forEach(handle);
    // 让出主线程：用宏任务，微任务不会让出渲染机会
    await new Promise((resolve) => setTimeout(resolve, 0));
  }
}

// 优先级调度（Chrome 94+）
scheduler.postTask(task, { priority: 'background' });

// 判断是否有待处理的用户输入
if (navigator.scheduling?.isInputPending?.()) {
  await yieldToMain();
}

// main.js
const worker = new Worker('./heavy.worker.js', { type: 'module' });

worker.postMessage({ type: 'compute', payload: bigArray });

worker.onmessage = (event) => {
  console.log('结果', event.data);
};

// heavy.worker.js
self.onmessage = (event) => {
  const { payload } = event.data;
  const result = payload.map((n) => n * 2);
  self.postMessage(result);
};

// 1. Transferable：转移所有权，零拷贝（原线程失效）
worker.postMessage(buffer, [buffer]);

// 2. SharedArrayBuffer：共享内存（需 COOP/COEP 响应头）
const sab = new SharedArrayBuffer(1024);
const view = new Int32Array(sab);
Atomics.add(view, 0, 1);

// 3. 只传必要字段，别传整个 store
worker.postMessage({ id, range: [start, end] });

/**
 * 协作式任务：每处理一批就 yield 一次，外部可随时中止。
 * @param {number[]} items 数据
 */
function* processCooperatively(items) {
  const BATCH = 100;
  for (let i = 0; i < items.length; i += BATCH) {
    for (let j = i; j < Math.min(i + BATCH, items.length); j++) {
      // 处理 items[j]
    }
    yield i; // 交还控制权
  }
}

const it = processCooperatively(data);
function tick() {
  const { done } = it.next();
  if (!done) requestAnimationFrame(tick); // 每帧处理一批
}

const controller = new AbortController();

fetch('/api/data', { signal: controller.signal }).catch((err) => {
  if (err.name === 'AbortError') return; // 正常取消，不算错误
  throw err;
});

// 用户切换页面 / 输入新关键词
controller.abort();

// 1. 避免在热路径创建闭包与临时对象
// 差：每帧都创建新数组
function frame() { render([...items, extra]); }

// 2. 稀疏数组会退化为字典模式
const sparse = [];
sparse[1000000] = 1; // 不要这样

// 3. 字符串拼接：少量用 +，大量用数组 join 或模板
const html = parts.join('');

// 4. 对象池：高频创建/销毁大对象时复用
class Pool {
  constructor(factory) {
    this.factory = factory;
    this.free = [];
  }
  acquire() { return this.free.pop() ?? this.factory(); }
  release(obj) { this.free.push(obj); }
}

// 1. 同步错误
window.addEventListener('error', (event) => {
  report({ type: 'js-error', message: event.message, stack: event.error?.stack });
});

// 2. Promise 未处理拒绝
window.addEventListener('unhandledrejection', (event) => {
  report({ type: 'unhandled-rejection', reason: String(event.reason) });
});

// 3. 资源加载失败（不冒泡，需捕获阶段）
window.addEventListener(
  'error',
  (event) => {
    const target = event.target;
    if (target instanceof HTMLImageElement) {
      report({ type: 'img-error', src: target.src });
    }
  },
  true
);

// 命名捕获组
const m = /(?<year>\d{4})-(?<month>\d{2})/.exec('2026-10');
m.groups.year; // '2026'

// 后行断言
/(?<=¥)\d+/.exec('价格 ¥199'); // '199'

// Unicode 属性转义
/\p{Script=Han}+/u.test('中文'); // true

// 全局匹配用 matchAll，避免 lastIndex 陷阱
for (const match of 'a1b2'.matchAll(/\d/g)) {
  console.log(match[0]);
}

// 差：逐个追加，形状反复迁移
const a = {};
a.x = 1;
a.y = 2;

// 好：一次性定型，隐藏类稳定
const b = { x: 1, y: 2 };

/**
 * 在页面里临时观测堆增长速率，用于判断「是泄漏还是正常缓存」。
 * @param {number} [intervalMs=5000]
 * @returns {() => void} 停止观测
 */
function watchHeap(intervalMs = 5000) {
  let prev = performance.memory?.usedJSHeapSize ?? 0;

  const timer = setInterval(() => {
    const now = performance.memory?.usedJSHeapSize ?? 0;
    console.log(`堆增长: ${((now - prev) / 1024 / 1024).toFixed(2)} MB`);
    prev = now;
  }, intervalMs);

  return () => clearInterval(timer);
}

16.7ms（60Hz）预算分配
├─ 输入事件处理          优先，必须快
├─ rAF 回调（动画）
├─ 样式计算 / 布局
├─ 绘制 / 合成
└─ 剩余时间才能跑长任务

/**
 * 用 MessageChannel 把长任务切片，避免阻塞输入响应。
 * @param {any[]} items
 * @param {(item: any) => void} handle
 * @param {number} [budgetMs=8] 每片的时间预算
 */
function runInSlices(items, handle, budgetMs = 8) {
  const channel = new MessageChannel();
  let index = 0;

  const step = () => {
    const start = performance.now();

    while (index < items.length && performance.now() - start < budgetMs) {
      handle(items[index++]);
    }

    if (index < items.length) channel.port2.postMessage(null);
  };

  channel.port1.onmessage = step;
  channel.port2.postMessage(null);   // 启动
}

/**
 * 把图像像素交给 Worker 处理，并转移缓冲区避免拷贝。
 * @param {Worker} worker
 * @param {ImageData} imageData
 */
function processPixels(worker, imageData) {
  const buffer = imageData.data.buffer;

  worker.postMessage({ buffer, width: imageData.width, height: imageData.height }, [
    buffer,   // 转移：主线程之后访问该 buffer 会得到 detached 状态
  ]);
}

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

/**
 * 统一错误上报：同时覆盖同步异常、未捕获 Promise、资源加载失败。
 * @param {(payload: object) => void} report 上报函数
 */
function installErrorReport(report) {
  window.addEventListener('error', (event) => {
    // 资源加载失败时 event.target 是元素，没有 error 对象
    if (event.target && event.target !== window) {
      report({ type: 'resource', url: event.target.src || event.target.href });
      return;
    }
    report({ type: 'js', message: event.message, stack: event.error?.stack });
  }, true);   // 捕获阶段，否则资源错误收不到

  window.addEventListener('unhandledrejection', (event) => {
    report({ type: 'promise', reason: String(event.reason) });
  });
}

const { instance } = await WebAssembly.instantiateStreaming(fetch('/math.wasm'));
const result = instance.exports.fibonacci(40);

import { parse } from '@babel/parser';
import traverse from '@babel/traverse';
import generate from '@babel/generator';

const code = `const answer = 40 + 2;`;
const ast = parse(code, { sourceType: 'module' });

traverse(ast, {
  BinaryExpression(path) {
    // 编译期常量折叠：40 + 2 → 42
    if (path.node.left.type === 'NumericLiteral' && path.node.right.type === 'NumericLiteral') {
      path.replaceWith({ type: 'NumericLiteral', value: path.node.left.value + path.node.right.value });
    }
  },
});

generate(ast).code; // 'const answer = 42;'

用户感受到卡顿
  → 掉帧（Performance 面板显示 >16.7ms 的帧）
    → 主线程长任务（Long Task）
      → 具体函数（Bottom-Up 排序）
        → 是 JS 执行？强制同步布局？GC？还是绘制？

// 时间处理的安全写法：显式给出时区语义
const d = new Date(Date.UTC(2026, 0, 1));
// 展示时再按用户时区格式化
const text = new Intl.DateTimeFormat('zh-CN', { timeZone: 'Asia/Shanghai' }).format(d);

/**
 * Babel 插件骨架：把 console.log 替换为项目统一的 logger。
 * @param {import('@babel/core')} babel
 */
module.exports = function removeConsole({ types: t }) {
  return {
    name: 'replace-console',
    visitor: {
      MemberExpression(path) {
        if (!path.matchesPattern('console.log')) return;
        // 用带命名空间的对象替换，保留后续的调用参数
        path.replaceWith(t.memberExpression(t.identifier('logger'), t.identifier('info')));
      },
    },
  };
};

// 构建期常量，未命中的分支会被完全移除
if (__ENABLE_DEBUG_PANEL__) {
  mountDebugPanel();
}

let controller = null;

const search = debounce(async (keyword) => {
  controller?.abort();               // 取消上一次
  controller = new AbortController();

  try {
    const res = await fetch(`/api/search?q=${encodeURIComponent(keyword)}`, {
      signal: controller.signal,
    });
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    render(await res.json());
  } catch (err) {
    if (err.name === 'AbortError') return; // 正常取消
    showError(err);
  }
}, 300);

let seq = 0;

async function request(keyword) {
  const mySeq = ++seq;
  const data = await fetchResult(keyword);
  if (mySeq !== seq) return; // 旧请求，丢弃
  render(data);
}

// filter.worker.js
self.onmessage = ({ data }) => {
  const { list, keyword } = data;
  const result = list.filter((item) => item.name.includes(keyword));
  self.postMessage(result);
};

/**
 * 可取消的防抖搜索：新输入到来时，先取消上一次请求。
 * @param {(keyword: string, signal: AbortSignal) => Promise<any[]>} search
 * @param {number} [delay=300]
 */
function createSearch(search, delay = 300) {
  let timer = null;
  let controller = null;

  return (keyword) => {
    clearTimeout(timer);
    controller?.abort();            // 关键：取消旧请求，避免竞态覆盖

    timer = setTimeout(async () => {
      controller = new AbortController();
      try {
        const result = await search(keyword, controller.signal);
        render(result);
      } catch (error) {
        if (error.name === 'AbortError') return;   // 主动取消不算错误
        renderError(error);
      }
    }, delay);
  };
}

/**
 * 创建并发上限调度器。
 * @param {number} limit 最大并发数
 * @returns {(task: (signal: AbortSignal) => Promise<unknown>) => Promise<unknown>}
 */
function createLimiter(limit) {
  /** @type {Array<{task: Function, resolve: Function, reject: Function, controller: AbortController}>} */
  const queue = [];
  let active = 0;

  /** 从队列取任务，直到达到并发上限 */
  const pump = () => {
    while (active < limit && queue.length > 0) {
      const item = queue.shift();
      if (item.controller.signal.aborted) {
        item.reject(new DOMException('aborted', 'AbortError'));
        continue;
      }
      active += 1;
      Promise.resolve()
        .then(() => item.task(item.controller.signal))
        .then(item.resolve, item.reject)
        .finally(() => {
          active -= 1;
          pump();
        });
    }
  };

  return (task) =>
    new Promise((resolve, reject) => {
      queue.push({ task, resolve, reject, controller: new AbortController() });
      pump();
    });
}

/**
 * 节流：保证 wait 毫秒内最多执行一次。
 * @param {Function} fn 目标函数
 * @param {number} wait 间隔毫秒
 * @param {{leading?: boolean, trailing?: boolean}} [options] 首尾是否执行
 * @returns {Function & {cancel: () => void, flush: () => void}}
 */
function throttle(fn, wait, { leading = true, trailing = true } = {}) {
  let last = 0;
  let timer = null;
  let lastArgs = null;
  let lastThis = null;

  /** 立即执行并重置状态 */
  const invoke = (time) => {
    last = time;
    const args = lastArgs;
    const ctx = lastThis;
    lastArgs = lastThis = null;
    fn.apply(ctx, args);
  };

  const throttled = function (...args) {
    const now = Date.now();
    if (last === 0 && !leading) last = now;

    lastArgs = args;
    lastThis = this;
    const remaining = wait - (now - last);

    if (remaining <= 0) {
      if (timer) {
        clearTimeout(timer);
        timer = null;
      }
      invoke(now);
    } else if (!timer && trailing) {
      timer = setTimeout(() => {
        timer = null;
        invoke(Date.now());
      }, remaining);
    }
  };

  throttled.cancel = () => {
    clearTimeout(timer);
    timer = null;
    last = 0;
    lastArgs = lastThis = null;
  };

  throttled.flush = () => {
    if (timer) {
      clearTimeout(timer);
      timer = null;
      invoke(Date.now());
    }
  };

  return throttled;
}

console.log(1);
setTimeout(() => console.log(2));
Promise.resolve().then(() => console.log(3));
queueMicrotask(() => console.log(4));
console.log(5);

/**
 * 结构化相等判断：支持对象、数组、Date、Map、Set 与循环引用。
 * @param {any} a
 * @param {any} b
 * @param {WeakMap<object, object>} [seen] 已比较过的对象对，用于断开循环
 * @returns {boolean}
 */
function isEqual(a, b, seen = new WeakMap()) {
  if (Object.is(a, b)) return true;
  if (typeof a !== 'object' || typeof b !== 'object' || !a || !b) return false;
  if (a.constructor !== b.constructor) return false;

  if (seen.get(a) === b) return true;   // 同一个环已经比过，直接认为相等
  seen.set(a, b);

  if (a instanceof Date) return a.getTime() === b.getTime();
  if (a instanceof Map || a instanceof Set) return isEqual([...a], [...b], seen);

  const keysA = Object.keys(a);
  const keysB = Object.keys(b);
  if (keysA.length !== keysB.length) return false;

  return keysA.every((key) => isEqual(a[key], b[key], seen));
}

/**
 * 限制同时执行的任务数量，超出的排队等待。
 * @param {Array<() => Promise<any>>} tasks
 * @param {number} limit
 * @returns {Promise<any[]>} 按输入顺序返回结果
 */
async function runWithLimit(tasks, limit) {
  const results = new Array(tasks.length);
  let cursor = 0;

  /** 一个「工人」循环取任务，直到取完 */
  const worker = async () => {
    while (cursor < tasks.length) {
      const index = cursor++;
      results[index] = await tasks[index]();
    }
  };

  await Promise.all(Array.from({ length: Math.min(limit, tasks.length) }, worker));
  return results;
}

/**
 * 事件总线：支持一次性监听与批量解绑，避免组件卸载后回调泄漏。
 */
class EventBus {
  /** @type {Map<string, Set<Function>>} */
  #listeners = new Map();

  /**
   * 注册监听。
   * @param {string} type
   * @param {Function} handler
   * @param {{ once?: boolean, signal?: AbortSignal }} [options]
   * @returns {() => void} 手动解绑函数
   */
  on(type, handler, { once = false, signal } = {}) {
    const wrap = (...args) => {
      if (once) this.off(type, wrap);
      handler(...args);
    };

    if (!this.#listeners.has(type)) this.#listeners.set(type, new Set());
    this.#listeners.get(type).add(wrap);

    // 与 AbortSignal 联动：一次 abort 清掉所有相关监听
    signal?.addEventListener('abort', () => this.off(type, wrap), { once: true });

    return () => this.off(type, wrap);
  }

  /**
   * 解除监听。
   * @param {string} type
   * @param {Function} handler
   */
  off(type, handler) {
    this.#listeners.get(type)?.delete(handler);
  }

  /**
   * 触发事件。
   * @param {string} type
   * @param {...any} args
   */
  emit(type, ...args) {
    // 复制一份再遍历，防止回调内部解绑导致遍历跳过
    [...(this.#listeners.get(type) ?? [])].forEach((fn) => fn(...args));
  }
}