你不知道的JavaScript：异步与性能

简介

《Async & Performance》深入讲解 JavaScript 的异步编程模型和性能优化技巧。

异步编程发展史

1. 回调函数

function fetchData(callback) {
  setTimeout(() => {
    callback(null, "data");
  }, 1000);
}

fetchData((err, data) => {
  if (err) {
    console.error(err);
  } else {
    console.log(data);
  }
});

回调地狱：

fetchData((err, data1) => {
  if (err) return handleError(err);
  processData(data1, (err, data2) => {
    if (err) return handleError(err);
    saveData(data2, (err, result) => {
      if (err) return handleError(err);
      console.log(result);
    });
  });
});

2. Promise

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("data");
  }, 1000);
});

promise
  .then(data => console.log(data))
  .catch(err => console.error(err));

链式调用：

fetchData()
  .then(data => processData(data))
  .then(processed => saveData(processed))
  .then(result => console.log(result))
  .catch(err => console.error(err));

Promise.all 和 Promise.race：

const p1 = fetch("/api/user");
const p2 = fetch("/api/posts");

// 全部完成
Promise.all([p1, p2])
  .then(([user, posts]) => console.log(user, posts))
  .catch(err => console.error(err));

// 任意一个完成
Promise.race([p1, p2])
  .then(first => console.log(first));

3. Async/Await

async function main() {
  try {
    const user = await fetchUser();
    const posts = await fetchPosts(user.id);
    console.log(posts);
  } catch (err) {
    console.error(err);
  }
}

并行执行：

async function parallel() {
  const [user, posts, comments] = await Promise.all([
    fetchUser(),
    fetchPosts(),
    fetchComments()
  ]);
}

事件循环

JavaScript 是单线程的

console.log("1");
setTimeout(() => console.log("2"), 0);
console.log("3");
// 输出: 1, 3, 2

宏任务 vs 微任务

console.log("1");

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

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

console.log("4");
// 输出: 1, 4, 3, 2
// 宏任务: setTimeout
// 微任务: Promise.then

执行顺序：

1. 同步代码
2. 微任务（Promise）
3. 宏任务（setTimeout, setInterval）

性能优化

1. 避免内存泄漏

// 及时清理定时器
const timer = setInterval(() => { ... }, 100);
clearInterval(timer);

// 移除事件监听
element.removeEventListener("click", handler);

2. 防抖 (Debounce)

function debounce(fn, delay) {
  let timer;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}

// 搜索防抖
const search = debounce(query => {
  console.log("Searching:", query);
}, 300);

3. 节流 (Throttle)

function throttle(fn, limit) {
  let inThrottle;
  return function(...args) {
    if (!inThrottle) {
      fn.apply(this, args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  };
}

// 滚动节流
const onScroll = throttle(() => {
  console.log("Scroll!");
}, 100);

4. 懒加载

// 图片懒加载
const img = document.querySelector("img");
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
});
observer.observe(img);

小结

• ✅ 理解回调、Promise、Async/Await 的演进
• ✅ 掌握事件循环和任务队列
• ✅ 学会使用防抖和节流优化性能
• ✅ 避免常见的内存泄漏问题
• ✅ 实现懒加载等优化技术

相关阅读：

• YDKJS: Async & Performance