《HTML标准》解读：事件循环机制

本文为HTML标准解读系列文章，其他文章详见这里。

在一个HTML页面中，会发生许多不同类型的任务，包括HTML解析、用户交互、脚本执行、页面渲染、资源请求等等，所有的这些任务，都会使用事件循环机制来协调。

事件循环机制的组成

每一个HTML页面都至少关联着一个事件循环机制。一个事件循环机制的主要组成部分包括：

• 多个不同的类型的「任务队列」。
• 一个「微任务队列」。

每一个任务队列包含一系列的任务，这些任务普遍被大家称为「宏任务」，与「微任务」相对。值得注意的是，虽然名为“任务队列”，但它的数据结构并不是队列，而是sets，所以它并不遵循“先进先出”的原则。在事件循环机制运行时，会选择队列中的「第一个可运行的任务」而不是“第一个任务”来执行。

为了合理安排任务的优先级，事件循环机制有不同类型的队列，至少有以下几种：

• 与DOM操作相关的任务队列：主要的任务类型是对DOM操作的反应。比如，在下面的img标签中，当改变视口的大小超过临界点时，一个更新img内容(src)与尺寸的宏任务会进入这个队列：

  <img sizes="(max-width: 460px) 300px, 600px" 
       srcset="/img1.jpeg 300w, /img2.jpeg 600w">
  

• 与用户交互相关的任务队列：主要的任务类型是对用户交互的反应。比如，在下面的button标签中，当用户点击的时候，回调函数fire()会进入到这个队列当中：

  <button onclick="fire()">按钮</button>
  

• 与网络资源相关的任务队列：主要的任务类型是对网络请求的返回内容进行处理；比如，加载下面的标签时，会添加一个请求任务进入该队列：

  <link rel="stylesheet" href="main.css">
  

• 与导航相关的任务队列：主要的任务类型是页面导航以及历史