JS进阶5 -- 事件循环及JQuery的load与ready的区别5-事件循环及JQuery的load与ready的区别

131 阅读 0 评论 87 点赞

我是靠谱客的博主整齐鼠标，这篇文章主要介绍JS进阶5 -- 事件循环及JQuery的load与ready的区别5-事件循环及JQuery的load与ready的区别，现在分享给大家，希望可以做个参考。

JS进阶5 -- 事件循环及JQuery的load与ready的区别

5-事件循环及JQuery的load与ready的区别
- 5-1 事件循环
- - 5-1-1 宏观任务
  - 5-1-2 微观任务
- 5-2 $(window).load 与 $(window).ready 的区别
- - 5-2-1 相同点
  - 5-2-2 区别
  - 5-2-3 加载顺序

在 JS进阶4 – 代理中我们学习了代理的使用方法和优点分析，本文将继续重点跟大家介绍JS中的第5个重点内容 – 事件循环及JQuery的load与ready的区别。废话不多说，一起来看看吧！

5-事件循环及JQuery的load与ready的区别

5-1 事件循环

JS是事件驱动程序，因此最底层都是以事件驱动完成函数的回调执行，例如当有触发某个事件的启动因素时，就会抛出事件，调用回调函数，但是这个过程并不是函数可以自己去回调，而是抛出事件后，将在任务队列中等待下一个执行时间立即调用函数。
即使在同一个任务队列中也有先后执行的顺序，主要分为宏观任务和微观任务

5-1-1 宏观任务

宏观任务是在当前任务队列的尾部抛出事件，等待下一次任务队列执行时间开始的时候执行
setInterval、setTimeout

5-1-2 微观任务

微观任务一般是在当前任务的尾部抛出事件，下一次任务队列执行时间之前执行
process.nextTick、Promise

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
	var time = new Date().getTime();
    console.log('a');  // 同步任务
    setTimeout(function() {
        console.log(new Date().getTime() - time);  // 宏任务与微任务相比，执行时间更长
        console.log('b');  // 异步任务--宏任务
    }, 0);
    new Promise(function(res, rej) {
        res();
    }).then(function() {
        console.log(new Date().getTime() - time);
        console.log('c');  // 异步任务--微任务
    });
    console.log('d');  // 同步任务  // a d c b

5-2 $(window).load 与 $(window).ready 的区别

5-2-1 相同点

这两个方法都是先加载后执行，但是有先后顺序，ready先执行，load后执行

5-2-2 区别

ready在图片媒体进来之前就可以运行代码了，而load需要等待全部完成后才可以执行代码

5-2-3 加载顺序

html结构
加载外部样式表和执行文件
解析执行脚本代码
构造DOM模型（样式应用）-- ready执行
加载图片文件等等
页面加载完毕 – load执行

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
	<!DOCTYPE html>
	<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	    <title>$(window).load 与 $(window).ready 的区别</title>
	</head>
	<body>
	    <img src="./images/avater.jpg" alt="">
	    <img src="./images/cat1.jpeg" alt="">
	    <img src="./images/cat2.jpeg" alt="">
	    <img src="./images/cat3.jpeg" alt="">
	    <script src="jquery-3.5.1.min.js"></script>
	    <script>
	        // 先输出ready,再输出load
	        $(window).on("load", function() {
	            console.log('load');
	        });
	        $(window).ready(function() {
	            console.log('ready');
	        });
	    </script>
	</body>
	</html>