浏览器事件循环与异步编程
浏览器多进程架构
现代浏览器采用多进程和多线程架构来提高性能、稳定性和安全性。主要包含以下几种进程：
- 主进程：管理界面元素，如地址栏和菜单，并协调其他进程。
- GPU进程：负责页面渲染，特别是3D效果。
- 网络进程：处理网络请求。
- 插件进程：运行插件，隔离崩溃风险。
- 渲染进程：将HTML、CSS和JavaScript转换为可交互的网页。
浏览器多线程
渲染进程中涉及多个线程：
- GUI渲染线程：解析并渲染页面内容。
- JS引擎线程：执行JavaScript代码。
- 定时器线程：管理计时器操作。
- 异步HTTP请求线程：处理AJAX请求。
- 事件触发线程：控制事件循环。
- 合成线程：处理动画与滚动。
- Web Worker线程：执行CPU密集型任务。
- IO线程：与其他进程通信。
为什么JavaScript是单线程
JavaScript设计为单线程以避免DOM操作冲突和简化语言实现。通过事件循环机制支持异步非阻塞操作。
事件循环详解
事件循环通过调用栈、任务队列（宏任务和微任务）、Web APIs和事件循环调度器协同工作。
// 示例1
console.log("同步1");
async function asyncFunc() {
console.log("await前");
await Promise.resolve();
console.log("await后");
}
asyncFunc();
console.log("同步2");
// 输出顺序: 同步1, await前, 同步2, await后
Promise基础
Promise用于处理异步操作，具有三种状态：pending、fulfilled 和 rejected。
const promise = new Promise((resolve, reject) => {
if (true) {
resolve('成功');
} else {
reject('失败');
}
});
promise.then(value => console.log(value)).catch(error => console.error(error));
Async/Await使用
Async/Await提供了一种更简洁的方式来编写异步代码。
async function fetchExample() {
try {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
console.log(data);
} catch (error) {
console.error('请求失败:', error);
}
}
优化并发请求
使用Promise.all或Promise.allSettled可以并发执行多个异步操作。
async function fetchDataConcurrently() {
const [user, posts, settings] = await Promise.all([
fetchUser(),
fetchPosts(),
fetchSettings()
]);
console.log(user, posts, settings);
}
