话说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. TCP、HTTP协议的RPC

    TCP.HTTP协议的RPC 1.1 基于TCP协议的RPC 1.1.1 RPC名词解释 RPC的全称是Remote Process Call,即远程过程调用,RPC的实现包括客户端和服务端,即服务调 ...

  2. <Three.js>（第三节）全景漫游

    一.实验内容 通过上次实验,了解了Three.js创建场景的基本步骤.这一节,我们将通过Three.js实现全景漫游功能.如下图: 全景图是获取一个3D场景中的不同角度的图片,然后通过拼接.融合实现3 ...

  3. codeforces 493 D Vasya and Chess【 博弈 】

    题意:给出n*n的棋盘,白方在(1,1),黑方在(1,n)处,每一步可以上下左右对角线走,哪个先抓到另一个,则它获胜 可以画一下,发现n是奇数的时候,白方先走,无论它怎么走,黑方和它走对称的,黑方都一 ...

  4. Optional Chaining as an Alternative to Forced Unwrapping

    ?与!的区别 You specify optional chaining by placing a question mark (?) after the optional value on whic ...

  5. seq去除重复数据

    DELETE FROM temp_fjh_2 a WHERE a.rowid!=(SELECT MAX(b.rowid) FROM temp_fjh_2 b WHERE a.a=b.a); 表名和列名 ...

  6. IPv6理论知识详解

    1. IPv6地址表示 IPv6地址可以表示为128位由0.1组成的字符串,为了便于计算机理解,将128位的二进制字符串表示为32位的十六进制字符串,为了便于理解,人们将其划分为8组,组与组之间用 : ...

  7. 使用yum配置lnmp环境(CentOS7.6)

    一.安装版本详情 Server: MariaDB Server version: 5.5.60-MariaDB MariaDB Server [root@ln-125 ~]# cat /etc/red ...

  8. bytes、str与unicode

    1.Python3字符序列的类型 bytes -> 原始的8位值(既字节) str -> Unicode字符 2.Python2字符序列的类型 str -> 原始的8位值(既字节) ...

  9. HDU 4725 The Shortest Path in Nya Graph

    he Shortest Path in Nya Graph Time Limit: 1000ms Memory Limit: 32768KB This problem will be judged o ...

  10. POJ 3368 Frequent values(RMQ 求区间出现最多次数的数字的次数)

    题目链接:http://poj.org/problem? id=3368 Description You are given a sequence of n integers a1 , a2 , .. ...