话说js是单线程的，它通过浏览器事件循环轮询事件队列，来实现异步。然而，事件循环的时机是什么时候？浏览器是如何帮助JS引擎线程实现异步的？

浏览器页面进程的四个线程

首先说一下，chrome会为每一个tab创建一个进程，每个页面进程下可以创建多个线程，比如http请求线程（Ajax）、界面渲染线程（HTML&CSS）、JS引擎线程（JS）、浏览器事件触发线程（UI&DOM）、定时器（Timer）。

（既然渲染线程和js引擎是两个线程，为什么执行js会阻塞页面渲染？）

js的异步原理

用图片说话吧，请欣赏宝宝刚出炉热腾腾的sketch。

实在惭愧，画完图以后，就不想打字了说话了。发现自己爱绘画胜过文字~~~大家凑合着看啦。

JavaScript：理解事件循环的更多相关文章

  1. 对javascript EventLoop事件循环机制不一样的理解

    前置知识点: 浏览器原理,浏览器内核5种线程及协作,JS引擎单线程设计推荐阅读: 从浏览器多进程到JS单线程,JS运行机制最全面的一次梳理 [FE]浏览器渲染引擎「内核」 js异步编程,Promise ...

  2. [译] JavaScript 的事件循环

    译者注 本译文基本是按原文的意思来翻译,但对于 JavaScript 的事件循环,个人感觉还是 Philip Roberts 的视频讲解更形象些,思路和本文大致相同,不过他把事件表理解为 Web AP ...

  3. JavaScript的事件循环机制浅析

    前言 JavaScript是一门单线程的弱类型语言,但是我们在开发中,经常会遇到一些需要异步或者等待的处理操作. 类似ajax,亦或者ES6中新增的promise操作用于处理一些回调函数等. 概念 在 ...

  4. 深入理解JavaScript的事件循环（Event Loop）

    一.什么是事件循环 JS的代码执行是基于一种事件循环的机制,之所以称作事件循环,MDN给出的解释为 因为它经常被用于类似如下的方式来实现 while (queue.waitForMessage()) ...

  5. 【运行机制】 JavaScript的事件循环机制总结 eventLoop

    0.从个例子开始 //code-01 console.log(1) setTimeout(() => { console.log(2); }); console.log(3); 稍微有点前端经验 ...

  6. javascript的事件循环机制

    JavaScript是一门编程语言,既然是编程语言那么就会有执行时的逻辑先后顺序,那么对于JavaScript来说这额顺序是怎样的呢? 首先我们我们需要明确一点,JavaScript是单线程语言.所谓 ...

  7. 从JavaScript的事件循环到Promise

    JS线程是单线程运行机制,就是自己按顺序做自己的事,浏览器线程用于交互和控制,JS可以操作DOM元素, 说起JS中的异步时,我们需要注意的是,JS中其实有两种异步,一种是基于浏览器的异步IO,比如Aj ...

  8. 从一道题浅说 JavaScript 的事件循环

    最近看到这样一道有关事件循环的前端面试题: //请写出输出内容 async function async1() { console.log('async1 start'); await async2( ...

  9. 深入理解JavaScript事件循环机制

    前言 众所周知,JavaScript 是一门单线程语言,虽然在 html5 中提出了 Web-Worker ,但这并未改变 JavaScript 是单线程这一核心.可看HTML规范中的这段话: To ...

随机推荐

  1. PFILE和SPFILE介绍

    一.PFILE Pfile(Parameter File,参数文件)是基于文本格式的参数文件,含有数据库的配置参数. 1.PFILE - initSID.ora(默认PFILE名称),位置在$ORAC ...

  2. BZOJ 2045 容斥原理

    思路: 同BZOJ 2005 http://blog.csdn.net/qq_31785871/article/details/54314774 //By SiriusRen #include < ...

  3. express+模板引擎构建项目时遇到的几个小问题

    1.启动项目/调试项目 项目启动用:npm start 由于每次更改路由代码后必须重启服务才可以看效果,所以为了达到热加载的效果我们安装 supervisor:全局安装也可以: npm install ...

  4. （转载） Android两个子线程之间通信

    Android两个子线程之间通信 标签: classthreadandroid子线程通信 2015-03-20 17:03 3239人阅读 评论(0) 收藏 举报  分类: 个人杂谈 版权声明:本文为 ...

  5. POJ 3723 Conscription （Kruskal并查集求最小生成树）

    Conscription Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 14661   Accepted: 5102 Des ...

  6. centos下nginx配置

    转自  http://www.linuxidc.com/Linux/2016-09/134907.htm 安装所需环境 Nginx 是 C语言 开发,建议在 Linux 上运行,当然,也可以安装 Wi ...

  7. hiho152周 - 水题 区间问题

    题目链接 给定两个区间集合 A 和 B,其中集合 A 包含 N 个区间[ A1, A2 ], [ A3, A4 ], ..., [ A2N-1, A2N ],集合 B 包含 M 个区间[ B1, B2 ...

  8. js指定区域全屏

    <html>     <head>         <title>js指定区域全屏</title>         <style>      ...

  9. Golang 中的 面向对象: 方法, 类, 方法继承, 接口, 多态的简单描述与实现

    前言: Golang 相似与C语言, 基础语法与C基本一致,除了广受争议的 左花括号 必须与代码同行的问题, 别的基本差不多; 学会了C, 基本上万变不离其宗, 现在的高级语言身上都能看到C的影子; ...

  10. 利用MFC创建窗口、消息映射、window中的字节

    利用MFC创建窗口: 1.mfc的头文件:afxwin.h 2.自定义类,继承于CWinApp,应用程序类(app应用程序对象,有且仅有一个) 3.程序入口:Initinstance 4.在程序入口中 ...