zoukankan      html  css  js  c++  java
  • JS执行机制--事件循环--笔记

    Event loop

      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

  • 相关阅读:
    vue项目发布到服务器之后出现空白页和图片找不到的问题
    H5中设置一个元素一直在页面的最底部
    vue项目打包出现的问题(日常记录)
    vue写H5注册页面
    vue项目中动态图片生成
    Java中boolean类型占用多少个字节
    Java将一个目录下的所有数据复制到另一个目录下
    Java使用递归找出某目录下的所有子目录以及子文件
    实现短信验证码
    C#连接Oracle数据库(直接引用dll使用)
  • 原文地址:https://www.cnblogs.com/lulin1/p/9227948.html
Copyright © 2011-2022 走看看