跟着whatwg看一遍事件循环

最新推荐文章于 2022-10-10 19:48:14 发布

小雨小雨丶

最新推荐文章于 2022-10-10 19:48:14 发布

阅读量207

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_34436866/article/details/106941350

版权

前言

对于单线程来说，事件循环可以说是重中之重了，它为任务分配不同的优先级，井然有序的调度。让js解析，用户交互，页面渲染等互不冲突，各司其职。

我们书写的代码无时无刻都在和事件循环打交道，要想写出更流畅，我们就必须深入了解事件循环，下面我们将从规范中翻译和解读整个流程。

以下内容来自whatwg文档，均为个人理解，若有不对，烦请指出，我会第一时间修改，避免误导他人！

正文

为了协调用户操作，js执行，页面渲染，网络请求等事件，每个宿主中，存在事件循环这样的角色，并且该角色在当前宿主中是唯一的。

简单解释一下宿主：宿主是一个ECMAScript执行上下文，一般包含执行上下文栈，运行时执行环境，宿主记录和一个执行线程，除了这个执行线程外，其他的专属于当前宿主。例如，某些浏览器在不同的tabs使用同一个执行线程。

不仅如此，事件循环又存于在各个不同场景，有浏览器环境下的，worker环境下的和Worklet环境下的。

Worklet是一个轻量级的web worker，可以让开发者访问更底层的渲染工作线，也就是说你可以通过Worklet去干预浏览器的渲染环境。

提到了worklet，那就顺便看一个例子(需开启服务，不要以file协议运行)，通过这个例子，可以看到事件循环不同阶段触发了什么钩子函数：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            .fancy {
    
                background-image: paint(headerHighlight);
                display: layout(sample-layout

最低0.47元/天解锁文章

小雨小雨丶

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
跟着whatwg看一遍事件循环

前言对于单线程来说，事件循环可以说是重中之重了，它为任务分配不同的优先级，井然有序的调度。让js解析，用户交互，页面渲染等互不冲突，各司其职。我们书写的代码无时无刻都在和事件循环打交道，要想写出更流畅，我们就必须深入了解事件循环，下面我们将从规范中翻译和解读整个流程。以下内容来自whatwg文档，均为个人理解，若有不对，烦请指出，我会第一时间修改，避免误导他人！正文为了协调用户操作，js执行，页面渲染，网络请求等事件，每个宿主中，存在事件循环这样的角色，并且该角色在当前宿主中是唯一的。简单解释
复制链接

扫一扫