学习事件循环 首先就要了解一下浏览器的进程模型
内存空间 可以把这块内存空间简单理解为进程对象,函数啥啥啥的 都是放在内存里面的 所以就需要开辟一块内存空间让这个程序自己去使用进程 == 开辟出的这块内存空间每一个应用 至少也要有一个进程
进程之间相互独立即使要通讯 也需要双方同意才行
比如qq进程崩溃了 肯定是不会影响到微信的 所以每一个进程是完全独立的
人称之为线程一个
进程至少有一个线程所以在进程开启后会自动创建一个线程来运行代码 该线程称之为主线程如果程序需要同时执行多块代码 主线程就会启动更多的 线程来执行代码 所以
一个进程中可以包含多个线程
当浏览器启动后 它会开启多个进程可以在浏览器的任务管理器中查看当前的所有进程
渲染主线程 , 主线程负责执行HTML,CSS,JS代码默认情况下浏览器会为为每个标签页开启一个新的渲染进程 以保证不同的标签页之间不相互影响
ps: 事件循环就在主线程中执行
解析html,css,js,计算样式,布局,处理图层,每秒把页面画60次.....要处理这么多的任务 主线程如何去调度指挥任务呢?
比如:
用户点击了按钮 ,与此同时,某个计时器也到达了时间,我应该处理哪一个呢?排队以下的整个过程,被称之为事件循环 也可以说消息循环
如果有,就取出第一个任务执行,执行完后进入下一次循环,如果没有就休息比如网络线程,监听用户交互的线程等等..) ,可以随时向事件队列里添加任务,新任务会加到事件队列的末尾,在添加新任务的时候,如果主线程是休眠状态,则会唤醒以继续循环拿去任务在代码执行过程中, 会遇到一些无法
立即处理的任务
setTimeOut,setIntervalXHR,FetchaddEventListener执行这些任务 都是需要
未知的时间的,不能立即去执行如果让渲染主线程等待这类型任务的时机达到,就会导致主线程长期处于
阻塞的状态 从而导致浏览器卡死!!!
setTimeOut(()=>{
console.log(1);
},300)
console.log(2);
// 如果先等待3秒后打印1 然后再打印2 这就是同步
// 显然 这样是不可行的 因为一个定时器所有的任务都被阻塞了
// 那渲染主线程怎么执行绘制页面任务?怎么执行事件交互任务? 直接废了!
渲染主线程承担着极其重要的工作,无论如何都不能阻塞!!!
因此浏览器选择用
异步来解决这个问题
定时器主线程是不会自己计时的, 他要干别的活,此时,在主线程眼里,定时器这个的任务已经执行了定时器时间到了!, 定时器会把需要执行的回调函数继续放在事件队列里的末端 当成一个普通的任务去执行此时,主线程也不会知道 这个任务就是当时定时器里的回调函数 依旧进行循环的执行任务之前遇到过一个面试题 , 如何理解js的异步?
学到这里后 , 我现在会选择这样去回答
单线程的语言 , 这是因为js只能运行在浏览器的渲染主线程中,而渲染主线程只有一个 , 而渲染主线程承担着非常的多的事情 , 渲染页面 , 执行js啥啥的 都在里面执行同步的方式 , 就极可能导致主线程阻塞 , 从而导致消息队列中的很多其他任务无法得到执行 , 这样一来 , 繁忙的主线程白白浪费时间等待 , 导致页面也会无法更新 , 给用户造成卡死的状态异步方式来避免 , 具体做法就是当某些任务发生时 , 比如计时器 , 网络 , 事件监听 , 主线程将任务会交给其他线程去处理 , 自身立刻结束任务的执行 , 转而执行后面的任务 , 当其他线程完成时 , 把那个回调函数包装成任务 , 加入到事件队列的末端排队 , 等待主线程调度渲染任务执行后才会绘制任务没有优先级
但是消息队列 有优先级
也就是一共有多个队列 , 不同类型的任务可以分属不同的队列,在一个次事件循环中,浏览器可以根据实际情况从不同的队列中区出任务执行他里面的东西 所有都要给我等 连绘制任务 都要等 就是最高优先级了随着浏览器的复杂度急剧提升 W3C不再使用宏队列的说法
在目前chrome的实现中 至少包含了下面的队列
优先级中优先级高优先级最高添加任务到微队列的主要方式是使用
promise,....
列如
// 立刻把一个函数添加到微队列 最高执行
promise.resolve().then(函数)
setTimeOut(()=>{ // 第三步执行延时队列中的任务
console.log(1);
},0)
promise.resolve().then(()=>{ // 第二步执行微队列中的任务
console.log(2);
})
console.log(3); // 第一步先执行全局js
// 3 2 1
面试题 : 阐述一下js的事件循环
官方叫event loop 浏览器实现叫message loop , 是浏览器选择主线程的工作方式 , 在chrome中就是开启了一个不会结束的for循环, 每次循环从消息队列中取出第一个任务执行,而其他线程只需要在合适的时候将任务加入到队列末尾即可学习事件循环 首先就要了解一下浏览器的进程模型
内存空间 可以把这块内存空间简单理解为进程对象,函数啥啥啥的 都是放在内存里面的 所以就需要开辟一块内存空间让这个程序自己去使用进程 == 开辟出的这块内存空间每一个应用 至少也要有一个进程
进程之间相互独立即使要通讯 也需要双方同意才行
比如qq进程崩溃了 肯定是不会影响到微信的 所以每一个进程是完全独立的
人称之为线程一个
进程至少有一个线程所以在进程开启后会自动创建一个线程来运行代码 该线程称之为主线程如果程序需要同时执行多块代码 主线程就会启动更多的 线程来执行代码 所以
一个进程中可以包含多个线程
当浏览器启动后 它会开启多个进程可以在浏览器的任务管理器中查看当前的所有进程
渲染主线程 , 主线程负责执行HTML,CSS,JS代码默认情况下浏览器会为为每个标签页开启一个新的渲染进程 以保证不同的标签页之间不相互影响
ps: 事件循环就在主线程中执行
解析html,css,js,计算样式,布局,处理图层,每秒把页面画60次.....要处理这么多的任务 主线程如何去调度指挥任务呢?
比如:
用户点击了按钮 ,与此同时,某个计时器也到达了时间,我应该处理哪一个呢?排队以下的整个过程,被称之为事件循环 也可以说消息循环
如果有,就取出第一个任务执行,执行完后进入下一次循环,如果没有就休息比如网络线程,监听用户交互的线程等等..) ,可以随时向事件队列里添加任务,新任务会加到事件队列的末尾,在添加新任务的时候,如果主线程是休眠状态,则会唤醒以继续循环拿去任务在代码执行过程中, 会遇到一些无法
立即处理的任务
setTimeOut,setIntervalXHR,FetchaddEventListener执行这些任务 都是需要
未知的时间的,不能立即去执行如果让渲染主线程等待这类型任务的时机达到,就会导致主线程长期处于
阻塞的状态 从而导致浏览器卡死!!!
setTimeOut(()=>{
console.log(1);
},300)
console.log(2);
// 如果先等待3秒后打印1 然后再打印2 这就是同步
// 显然 这样是不可行的 因为一个定时器所有的任务都被阻塞了
// 那渲染主线程怎么执行绘制页面任务?怎么执行事件交互任务? 直接废了!
渲染主线程承担着极其重要的工作,无论如何都不能阻塞!!!
因此浏览器选择用
异步来解决这个问题
定时器主线程是不会自己计时的, 他要干别的活,此时,在主线程眼里,定时器这个的任务已经执行了定时器时间到了!, 定时器会把需要执行的回调函数继续放在事件队列里的末端 当成一个普通的任务去执行此时,主线程也不会知道 这个任务就是当时定时器里的回调函数 依旧进行循环的执行任务之前遇到过一个面试题 , 如何理解js的异步?
学到这里后 , 我现在会选择这样去回答
单线程的语言 , 这是因为js只能运行在浏览器的渲染主线程中,而渲染主线程只有一个 , 而渲染主线程承担着非常的多的事情 , 渲染页面 , 执行js啥啥的 都在里面执行同步的方式 , 就极可能导致主线程阻塞 , 从而导致消息队列中的很多其他任务无法得到执行 , 这样一来 , 繁忙的主线程白白浪费时间等待 , 导致页面也会无法更新 , 给用户造成卡死的状态异步方式来避免 , 具体做法就是当某些任务发生时 , 比如计时器 , 网络 , 事件监听 , 主线程将任务会交给其他线程去处理 , 自身立刻结束任务的执行 , 转而执行后面的任务 , 当其他线程完成时 , 把那个回调函数包装成任务 , 加入到事件队列的末端排队 , 等待主线程调度渲染任务执行后才会绘制任务没有优先级
但是消息队列 有优先级
也就是一共有多个队列 , 不同类型的任务可以分属不同的队列,在一个次事件循环中,浏览器可以根据实际情况从不同的队列中区出任务执行他里面的东西 所有都要给我等 连绘制任务 都要等 就是最高优先级了随着浏览器的复杂度急剧提升 W3C不再使用宏队列的说法
在目前chrome的实现中 至少包含了下面的队列
优先级中优先级高优先级最高添加任务到微队列的主要方式是使用
promise,....
列如
// 立刻把一个函数添加到微队列 最高执行
promise.resolve().then(函数)
setTimeOut(()=>{ // 第三步执行延时队列中的任务
console.log(1);
},0)
promise.resolve().then(()=>{ // 第二步执行微队列中的任务
console.log(2);
})
console.log(3); // 第一步先执行全局js
// 3 2 1
面试题 : 阐述一下js的事件循环
官方叫event loop 浏览器实现叫message loop , 是浏览器选择主线程的工作方式 , 在chrome中就是开启了一个不会结束的for循环, 每次循环从消息队列中取出第一个任务执行,而其他线程只需要在合适的时候将任务加入到队列末尾即可