话说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. sicily 1002 Anti-prime Sequences

    debug了好久..各种犯错..按照某个学长的思路,终于AC了.. #include <iostream> #include <cstring> using namespace ...

  2. 在Jquery里格式化Date日期时间数据

    在Jquery里格式化Date日期时间数据: $(function(){ //当前时间格式化yyyy-MM-dd HH:mm:ss alert(timeStamp2String(new Date(). ...

  3. swift语言点评二十一-协议

    定义有什么,及哪些必须实现. A protocol defines a blueprint of methods, properties, and other requirements that su ...

  4. day02变量

    一. 什么是变量? 变量:在程序运行过程中,值会发生变化的量.(与之相对应的,常量就是在程序运行过程中,值不会发生变化的量).无论是变量还是常量,在创建时都会在内存中开辟一块空间,用于保存它的值. 二 ...

  5. （2016北京集训十三）【xsy1533】mushroom - bitset

    题解: 神题...我看到的时候直接吓懵了... 这是一道STL题...否则可能要写可持久化ETT或者可持久化Toptree? 用bitset来维护每个蘑菇上哪里有杂草,那么 对于操作1和操作2:可以预 ...

  6. npm 6.0.0 版本npminstall报npm:write after end错误

    这两个多月一直开发小程序,今天准备开发公众号,使用Vue-cli 脚手架搭建项目时候, npm install 就报错误,我就奇葩了!心里一万个曹尼玛....... 因为之前使用安装包的提示升级,自己 ...

  7. linux 调试相关命令

    1. tail -f filename 调试时,log输出到文件,但是又想看到即时输出信息 未完待续....

  8. [vue插件]基于vue2.x的电商图片放大镜插件

    最近在撸一个电商网站,有一个需求是要像淘宝商品详情页那样,鼠标放在主图上,显示图片放大镜效果,找了一下貌似没有什么合适的vue插件,于是自己撸了一个,分享一下.小白第一次分享,各位大神莫见笑. vue ...

  9. py_One

    1.Python 标识符 在 Python 里,标识符由字母.数字.下划线组成. 在 Python 中,所有标识符可以包括英文.数字以及下划线(_),但不能以数字开头. Python 中的标识符是区分 ...

  10. 洛谷 P4147 玉蟾宫 （最大子矩形问题）

    这道题用到了悬线法,非常牛逼,可以看这个论文. https://blog.csdn.net/twtsa/article/details/8120269 #include<cstdio> # ...