zoukankan      html  css  js  c++  java
  • JS的Event Loop

    JavaScript是单线程的,只有一个执行栈,一次只能做一件事。

    在浏览器中,却“好像”可以同时做几件事:点击,发送请求,执行多个函数,解析代码。

    这是因为浏览器实现的Event Loop机制。

    Web API

    setTimeout,ajax,dom操作回调,等等都是浏览器(JS runtime)提供的。setTimeout or http or DOM 这些东西在V8引擎代码中都是找不到的,他们都是浏览器自身部署的

    这些操作不占用js线程,只有在回调函数需要执行时,才会将函数推入js执行栈。

    Event Loop

    在浏览器DOM环境中,至少有一个event loop,“相同域名”的DOM环境至多有一个event loop。

     一个event loop可以有多个task queue,task queue包含多个任务。

     event loop会依次执行队列中的task。

    优先执行macrotask queue的task,若某个task执行完成,会先执行microtask queue的task。

    整个脚本文件本身是一个macrotask,在macrotask队列中。

    名词解释

    JS runtime

    不仅包括js引擎,不同runtime还提供不同的功能。

    比如,浏览器提供dom,ajax请求;node.js runtime提供file system,http服务等。

    JavaScript Engine JS引擎

    解释或者执行JS代码。

    Call Stack 执行栈

    执行栈

    Call frame 

    调用帧

    macrotask queue

    这些会产生macrotask,会被push进到macrotask queue

    setTimeout, setInterval, setImmediate, requestAnimationFrame, I/O, UI rendering

    microtask queue

    这些会产生microtask,会被push进到microtask queue

    process.nextTick, Promises, Object.observe, MutationObserver

    [参考资料]

    强烈推荐这个视频,讲的很清楚 https://www.youtube.com/watch?v=8aGhZQkoFbQ

    https://www.w3.org/TR/html5/webappapis.html#event-loops

    https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop

    https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/

    https://stackoverflow.com/a/25933985/7362450

    https://www.zhihu.com/question/36972010/answer/71338002

    https://github.com/ccforward/cc/issues/48

  • 相关阅读:
    MVC @Html.TextBox 添加属性和样式
    当项目中出现“未能找到与此解决方案关联的源代码管理提供程序。项目将视为不受源代码管理”
    MVC视图中读取ViewBag传递过来的HashTable表数据
    使用NPOI导入导出标准的Excel
    网站文件下载代码
    C# 刷新页面浏览次数(点击量)+1
    sed
    Shell变量的取用、删除、取代与替换
    non-member function cannot have cv-qualifier
    awk学习
  • 原文地址:https://www.cnblogs.com/oneplace/p/8594630.html
Copyright © 2011-2022 走看看