为何添加while(true)后JavaScript的fetch API无响应？

问题场景 #

我用python -m http.server启动HTTP服务器，托管的目录结构如下：

dist/
   bundle.js
   index.html
   style.css
assets/
   tracks/
       listing.json

执行这段代码时，运行正常，数毫秒后控制台会打印Got it：

fetch("http://localhost:8000/assets/tracks/listing.json")
    .then(() => console.log("Got it"))

但在代码末尾添加while(true) {}死循环后，页面直接冻结，没有任何打印输出，浏览器还显示加载中的转圈图标：

fetch("http://localhost:8000/assets/tracks/listing.json")
    .then(() => console.log("Got it"))

while (true) {}

我已经有替代方案避免使用死循环，想知道这个现象背后JavaScript异步机制的具体原因。

原因解析 #

这完全由JavaScript的单线程事件循环模型导致：

• JavaScript是单线程执行：浏览器中负责运行JS代码的主线程，同一时间只能处理一个任务，所有任务必须排队等待执行。
• 异步任务的执行逻辑：fetch属于异步任务，调用它时，浏览器会把网络请求交给底层的网络线程处理，主线程则继续执行后续代码。当网络请求完成后，对应的then回调会被加入任务队列，等待主线程空闲时再执行。
• 死循环彻底阻塞主线程：while(true) {}是同步的死循环，会持续霸占主线程，让主线程永远处于忙碌状态，根本没有机会去处理任务队列里的fetch回调。同时，主线程被阻塞后，浏览器的UI渲染、事件响应等所有依赖主线程的操作都无法进行，所以页面会冻结，加载图标一直转圈。

简单来说：异步回调的执行前提是主线程空闲，而死循环把主线程彻底占死，回调永远没机会被执行。

内容的提问来源于stack exchange，提问作者Alphasaft