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. TCP如何保证可靠性

    如何保证可靠性? 1.校验和.在TCP的首部中有一个占据16为的空间用来放置校验和的结果. 这是一个端到端的检验和,目的是检测数据在传输过程中的任何变化.如果收到段的检验和有差错,TCP将丢弃这个报文 ...

  2. Leetcode 109

    //这种也是空间复杂度为O(K)的解法,就是边界有点难写class Solution { public: vector<int> getRow(int rowIndex) { vector ...

  3. 22. Generate Parentheses C++回溯法

    把左右括号剩余的次数记录下来,传入回溯函数. 判断是否得到结果的条件就是剩余括号数是否都为零. 注意判断左括号是否剩余时,加上left>0的判断条件!否则会memory limited erro ...

  4. Eclipse直接打开类文件/文件夹所在的本地目录

    1.Eclipse原生的文件浏览操作 选择项目目录/文件 按 ALT+SHIFT +W , 会弹出菜单点击 System Explorer 就可以打开文件所在的本地目录了: 设置工具目录 Run -- ...

  5. Pick-up sticks

    Pick-up sticks Stan has n sticks of various length. He throws them one at a time on the floor in a r ...

  6. MongoDB,无模式文档型数据库简介

    MongoDB的名字源自一个形容词humongous(巨大无比的),在向上扩展和快速处理大数据量方面,它会损失一些精度,在旧金山举行的MondoDB大会上,Merriman说:“你不适宜用它来处理复杂 ...

  7. Oracle使用expdp/impdp导出导入数据

    这里假设已存在数据库用户,并是计划通过该用户导入导出该用户表空间上的数据.(我们这里假定用户名称为ls) 1.创建逻辑目录(数据库命令,sqlplus中执行) Oracle不能直接指定系统目录让他去读 ...

  8. springmvc 自定义view支持json和jsonp格式数据返回

    1.如果controlloer上用@ResponseBody注解,则用<mvc:message-converter>里面配置的json解析器进行解析 <mvc:annotation- ...

  9. Android--Android Studio 打开ADM报错

    Android studio无法打开类似与eclipse的DDMS, 在android studio里点击android device monitor(点击菜单栏里的Tools->Android ...

  10. linux网络连接--桥接bridge,NAT,host-only的区别

    linux网络连接主要分为三种:桥接,net,host_only 桥接使用的是真实网卡,电脑里面有两种真实网卡,有线网卡,无线网卡,当你使用的是无线连接, 则选择无线网卡,使用网线连接,则选择有线网卡 ...