JS的解析是由浏览器中的JS解析引擎完成的。JS是单线程运行,也就是说,在同一个时间内只能做一件事,所有的任务都需要排队,前一个任务结束,后一个任务才能开始。但是又存在某些任务比较耗时,如IO读写等,所以需要一种机制可以先执行排在后面的任务,这就是:同步任务(synchronous)和异步任务(asynchronous)。JS的执行机制就可以看做是一个主线程加上一个任务队列(task queue)。同步任务就是放在主线程上执行的任务,异步任务是放在任务队列中的任务。所有的同步任务在主线程上执行,形成一个执行栈;异步任务有了运行结果就会在任务队列中放置一个事件;脚本运行时先依次运行执行栈,然后会从任务队列里提取事件,运行任务队列中的任务,这个过程是不断重复的,所以又叫做事件循环(Event loop)

  浏览器在解析过程中,如果遇到请求外部资源时,如图像,iconfont,JS等。浏览器将重复1-6过程下载该资源。请求过程是异步的,并不会影响HTML文档进行加载,但是当文档加载过程中遇到JS文件,HTML文档会挂起渲染过程,不仅要等到文档中JS文件加载完毕还要等待解析执行完毕,才会继续HTML的渲染过程。原因是因为JS有可能修改DOM结构,这就意味着JS执行完成前,后续所有资源的下载是没有必要的,这就是JS阻塞后续资源下载的根本原因。CSS文件的加载不影响JS文件的加载,但是却影响JS文件的执行。JS代码执行前浏览器必须保证CSS文件已经下载并加载完毕。

  事件循环有一个简单的任务 —— 去监控调用栈和回调队列。如果调用栈是空的,它就会取出队列中的第一个事件,然后将它压入到调用栈中,然后运行它。

  这样的迭代在事件循环中被称作一个 tick。每一个事件就是一个回调函数。

console.log('Hi');
setTimeout(function cb1() {
console.log('cb1');
}, 5000);
console.log('Bye');

参考:  https://segmentfault.com/a/1190000006879700#articleHeader0

JS执行机制--事件循环--笔记的更多相关文章

  1. 浏览器中js执行机制学习笔记

    浏览器中js执行机制学习笔记 RiverSouthMan关注 0.0772019.05.15 20:56:37字数 872阅读 291 同步任务 当一个脚本第一次执行的时候,js引擎会解析这段代码,并 ...

  2. JS学习笔记:(三)JS执行机制

    首先我们先明确一点:JavaScript是一门单线程语言.单线程也就是说同一时间只能执行一个任务,所有的任务都必须排队顺序执行.那么如果一个任务耗时很长,阻塞了其它任务的执行,就会给用户造成不友好的体 ...

  3. JS 执行机制笔记

        js同步和异步同步 前一个任务结束以后再执行下面一个任务,程序的执行顺序与任务的排列顺序是一致的 同步任务都在主线程上执行,形成一个执行线 异步 前一个任务没结束之前程序还可以执行别的任务 j ...

  4. JS执行机制详解,定时器时间间隔的真正含义

     壹 ❀ 引 通过结果倒推过程是我们常用的思考模式,我在上一篇学习promise笔记中,有少量关于promise执行顺序的例子,通过倒推,我成功让自己对于js执行机制的理解一塌糊涂,js事件机制,事件 ...

  5. 从一道看似简单的面试题重新理解JS执行机制与定时器

     壹 ❀ 引 最近在看前端进阶的系列专栏,碰巧看到了几篇关于JS事件执行机制的面试文章,因为我在之前一篇 JS执行机制详解,定时器时间间隔的真正含义 博文中也有记录JS执行机制,所以正好用于作为测试自 ...

  6. 【nodejs原理&源码赏析(7)】【译】Node.js中的事件循环,定时器和process.nextTick

    [摘要] 官网博文翻译,nodejs中的定时器 示例代码托管在:http://www.github.com/dashnowords/blogs 原文地址:https://nodejs.org/en/d ...

  7. 【nodejs原理&源码赏析(7)】【译】Node.js中的事件循环,定时器和process.nextTick

    目录 Event Loop 是什么? Event Loop 基本解释 事件循环阶段概览 事件循环细节 timers pending callbacks poll阶段 check close callb ...

  8. js执行机制

    js是单线程的,为什么可以执行异步操作呢? 这归结与浏览器(js的宿主环境)通过某种方式使得js具备了异步的属性. 区分进程和线程: 进程:正在运行中的应用程序.每个进程都自己独立的内存空间.例如:打 ...

  9. 浅谈js执行机制

    关于js执行机制,老早之前就一直想写篇文章做个总结,因为和js执行顺序的面试题碰到的特别多,每次碰到总是会去网上查,没有系统地总结,搞得每次碰到都是似懂非懂的感觉,这篇文章就系统的总结一下js执行机制 ...

随机推荐

  1. 解决Maven下载依赖慢的问题(转)

    使用Maven构建项目时,项目中有的依赖包可能下载的非常慢,我们可以通过配置镜像来解决这个问题. 之前开源中国的那个好像已经关闭了,于是我找到了一个阿里的来解决. 在Maven的配置文件(%MAVEN ...

  2. Hadoop 2.7.3 完全分布式维护-动态增加datanode篇

    原有环境 http://www.cnblogs.com/ilifeilong/p/7406944.html  IP       host JDK linux hadop role 172.16.101 ...

  3. git如何merge github forked repository里的代码更新?(转)

    参考内容:git如何merge github forked repository里的代码更新? [refer to ]http://www.haojii.com/2011/08/how-to-git- ...

  4. [已解决]Can't update: no tracked branch

    报错:Can't update: no tracked branch 我们之前的分支是drome,然后删除了这个分支,换到了另一个分支上面去了,所以出现了这个问题. 解决办法: 0:点击VCS-> ...

  5. TOYS

    TOYS Calculate the number of toys that land in each bin of a partitioned toy box. Mom and dad have a ...

  6. Mysql SQL优化系列之——执行计划连接方式浅释

    关系库SQL调优中,虽然思路都是一样的,具体方法和步骤也是大同小异,但细节却不容忽视,尤其是执行计划的具体细节的解读中,各关系库确实有区别,特别是mysql数据库,与其他关系库的差别更大些,下面,我们 ...

  7. Qt与JS(三)

    Qt不错的学习网址: http://www.cnblogs.com/findumars/p/5529526.html ----------------------------------------- ...

  8. possible error

    1● regedit 2● path [HKEY_CURRENT_USER\SOFTWARE\Microsoft\Windows\Windows Error Reporting]       3● 步 ...

  9. Mysql计算并保留两位小数

    如:123456.789 转成 123456.79 自动,));

  10. CAD绘制扶手5.6

    用PL命令绘制出扶手的位置,如图 , “楼梯其他”“添加扶手”选择这条线,扶手宽度60,高度900,中间对齐.生成如图: 三维: