JavaScript EventLoop

最新推荐文章于 2023-11-03 21:23:27 发布

mmlz00

最新推荐文章于 2023-11-03 21:23:27 发布

阅读量228

点赞数

分类专栏： JavaScript 文章标签： JavaScript JS EventLoop setTimeout

本文链接：https://blog.csdn.net/mmlz00/article/details/90945839

版权

js 事件循环机制：

js事件循环机制：示例

MutationObserver

<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8"/>
    <meta name="ES5" content="ES5规范引入了异步的微任务microtask，本轮同步任务结束后，通过EventLoop事件循环机制，得以在本轮的所有同步方法执行完后得以调度执行，而且是执行到本轮中的所有微任务都执行完毕后，才会进入下一轮的EventLoop">
  </head>

  <body>

    <div id='demo'>
      <ul>
        <li>111111</li>
      </ul>
    </div>

  </body>

  <script type="text/javascript">

    console.log(!!MutationObserver); // 监测浏览器是否支持

    var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
	 
    var list = document.querySelector('ul');

    var Observer = new MutationObserver(function(mutations, instance){

        console.log("begin::::我是异步回调函数，是个microtask类型的微任务，在本轮的同步代码执行完毕之后，才由EventLoop事件循环机制开始被调度执行的!");
		 
	console.log(mutations);
        console.log(instance);

        mutations.forEach(function(mutation){
            console.log(mutation);
        });

	console.log("end::::我是异步回调函数，是个microtask类型的微任务,所有的微任务都已在本轮中执行完毕后,才由EventLoop进入下一轮的macrotask宏任务调度执行");

     });

     Observer.observe(list, {
         childList: true,
         subtree: true
     });

     console.log("====begin::我是同步代码,在本轮中,我得到执行,而且执行完本轮中的所有同步代码:::,首次的本轮是html网页从上至下的直至</html>处的所有js代码");

     list.appendChild(document.createElement('div')); //第一次DOM变动 产生MutationRecord对象,压入异步回调函数的入参mutations数组
     list.appendChild(document.createTextNode('foo'));//第二次DOM变动 产生MutationRecord对象,压入异步回调函数的入参mutations数组
     list.removeChild(list.childNodes[0]);	      //第三次DOM变动 产生MutationRecord对象,压入异步回调函数的入参mutations数组
     list.childNodes[0].appendChild(document.createElement('div')); //第四次DOM变动 产生MutationRecord对象,压入异步回调函数的入参mutations数组

    console.log("====end::我是同步代码,在本轮中,我得到执行,而且执行完本轮中的所有同步代码:::");

  </script>

</html>

XHR ajax

<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8"/>
	<meta name="XHR" content="ajax异步请求响应行为"/>
	<!--
		浏览器环境：
		A：可不止一个线程，其是有多个线程并发执行的。但有一点，dom解析渲染引擎和js引擎是互斥的。
		A.1：可开启多个异步下载图片/js文件/视频等的异步线程
		A.2：一个dom解析线程
		A.3：一个监控dom变化和dom事件/bom事件/手工js事件/等事件的事件监控线程：事件一旦发生，监控线程立马往相应的macrotask任务队列中投放一个任务源（这个任务源包括事件本身[事件的时间/人物/地点]，事件的处理器[事件回调函数]），待jsEventLoop来执行
		A.4：一个js主线程，从上至下的解析执行js代码，并且伴随着EventLoop事件循环机制，以期达到javascript能”并发执行“。再次强调下，js是单线程的，永远没有并发执行，引入了EventLoop机制，是为了模仿多线程的并发执行而已。


		B：html页面

最低0.47元/天解锁文章

mmlz00

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript EventLoop

js 事件循环机制：js事件循环机制：示例MutationObserver<!DOCTYPE html><html> <head> <meta charset="UTF-8"/> <meta name="ES5" content="ES5规范引入了异步的微任务microtask，本轮同步任务结束后，通过E...
复制链接

扫一扫