fuwari/src/content/posts/browser-run-js.md

category, description, draft, image, lang, published, tags, title

category	description	draft	image	lang	published	tags	title
记录	本文深度剖析浏览器的JS运行原理以及浏览器内部事件处理的根本操作：事件循环	false	https://r2.072103.xyz/myblog/img/4b040799-eec9-457e-a04e-edf8b7e35b94.webp		2025-04-25	浏览器 JS	浏览器JS运行原理

引言：以下JS代码运行的结果是什么？

function a() {
    console.log("1");
    Promise.resolve().then(() => {
        console.log("2");
    });
}
setTimeout(function () {
    console.log("3");
    Promise.resolve().then(a);
}, 0);

Promise.resolve().then(function () {
    console.log("4");
});

console.log("5");

浏览器是如何按部就班执行命令的？

浏览器的所有操作都由渲染主线程执行，渲染主线程将创建一个无限循环的任务执行已有的任务，当渲染主线程无任务时将从消息队列中拿取新的任务执行。所有任务遵循先来后到，不允许插队执行

视频分析：