话说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. BZOJ 4636 （动态开节点）线段树

    思路: 偷懒 懒得离散化 搞了个动态开节点的线段树 (其实是一样的--..) 注意会有a=b的情况 要判掉 //By SiriusRen #include <cstdio> #includ ...

  2. POJ 3342 树形DP+Hash

    这是很久很久以前做的一道题,可惜当时WA了一页以后放弃了. 今天我又重新捡了起来.(哈哈1A了) 题意: 没有上司的舞会+判重 思路: hash一下+树形DP 题目中给的人名hash到数字,再进行运算 ...

  3. jquery 几种类选择器方式

    代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestClas ...

  4. Optional是以enum和泛型为基础的高阶类型

    结论:1.optionals使用时需要检查:2.可以通过!+赋值语句转化为非optionals. Optional-Generic Enumeration enum Optional<T> ...

  5. SpringCloud学习笔记（12）----Spring Cloud Netflix之Hystrix断路器的流程和原理

    工作流程(参考:https://github.com/Netflix/Hystrix/wiki/How-it-Works) 1. 创建一个HystrixCommand或HystrixObservabl ...

  6. [Vijos P1369]难解的问题

    题目大意:给你一个序列,叫你求最长上升子序列长度,但必须包含第k项. 解题思路:我们把k左边的比a[k]大的数去掉,k右边的比k小的数去掉,就可以保证选到a[k]了(因为左边的数小于a[k],而a[k ...

  7. Springboot+swagger2的接口文档开发

    一.创建一个SpringBoot项目 1. 2. 3. 4. 把web里的web选中,SQL里选择自己需要的,点击next 二.创建各项所需的controller,configure等 1. 项目布局 ...

  8. 【图灵杯 A】谷神的赌博游戏

    [题目链接]:http://oj.acmclub.cn/problem.php?cid=1164&pid=0 [题意] [题解] 把每个数字都%3处理; 会发现最后1的个数为n+1 2和0的个 ...

  9. jquery validate验证remote时的多状态问题

    因为远程验证用户名时可能会出现几种错误情况: 1.用户名字符非法: 2.长度超限: 3.用户名已经存在: 但remote返回的内容只能是布尔型的,即使用dataFilter来过滤也不知道如何对应的把错 ...

  10. 二维码框架ZBarSDK的使用和自己定义二维码扫描界面方法

    假设你不知道ZBarSDK怎么用,请下载demo http://download.csdn.net/detail/u013686641/7858917 假设你已经配置好ZBarSDK .那么以下这个类 ...