新北网站建设,江西企业网站建设价格,网站漂浮物怎么做,wordpress怎么设置访问前言
进程
程序运行需要其专属的内存空间#xff0c;可以把这块内存空间简单理解为进程。
下图每个颜色块都可视为一个应用#xff0c;每个应用至少应有一个进程#xff0c;进程之间相互独立#xff0c;即使想要通信#xff0c;也需要双方同意。 线程
有了进程后…前言
进程
程序运行需要其专属的内存空间可以把这块内存空间简单理解为进程。
下图每个颜色块都可视为一个应用每个应用至少应有一个进程进程之间相互独立即使想要通信也需要双方同意。 线程
有了进程后就可以执行程序的代码了。运行代码的「人」称为「线程」。
一个进程至少有一个线程一个程序开始运行后会自动开启一个线程该线程称为主线程。
如果程序需要同时执行多块代码主线程就会启动更更多的线程来执行代码。
浏览器是个多进程多线程的程序
为了避免相互影响减少连环崩溃的几率当启动浏览器后它会自动启动多个进程。
可以通过浏览器自带的任务管理器中查看当前的所有进程。 浏览器中主要的进程 浏览器进程 主要负责界面显示例如浏览器操作栏、主题…、用户交互、子进程管理等。 网络进程 负责加载网络资源 渲染进程 渲染进程启动后会自动开启渲染主线程主线程主要负责执行HTML、CSS、JS代码。 默认情况下浏览器会为每个标签页创建一个渲染进程以保证每个标签页间互不影响。 注意Chrome浏览器当前的默认模式仍为Process-per-Tab(一个标签页对应一个进程)但Chrome官方说明文档中表示未来会使用site-per-process模式(一个站点对应一个进程)例如多个标签页访问同一站点只会对应一个进程。
事件循环会发生在渲染进程的主线程中那么渲染进程做了什么操作呢
事件循环
渲染主线程与事件循环
渲染进程的 主线程 中主要进行了如下处理
解析 HTML解析 CSS计算样式布局处理图层每秒把页面画60次执行全局 JS 代码执行事件处理函数执行定时器的回调函数… 为什么渲染进程不适用多个线程来分别处理如上事情 那么渲染主线程如何调度任务例如
该线程正在执行 JS 函数恰巧用户又触发了点击事件那么二者执行的先后顺序该如何处理浏览器进程通知渲染主线程用户点击了按钮恰好此时某个回调函数正要执行又该如何处理
此时每个任务就需要排队每个任务都会在消息队列中排队当主线程中的任务执行完毕后需要依次执行消息队列中的任务。 渲染主线程初始会进入无限循环模式每次循环都会查看消息队列中是否有待处理的任务如果有则取出队列中的第一个任务执行执行完毕后再次循环如果队列中没有任务则主线程会进入休眠模式。其他线程包括其他进程的线程例如浏览器进程中负责用户交互的线程可以随时向消息队列中添加任务这个新任务会添加到消息队列末尾如果添加前消息队列中没有任务那么会唤醒 渲染主线程 重新进入无限循环模式。
以上整个流程称为事件循环也叫消息循环。
同步带来的阻塞问题
以上说明为同步任务的执行方式即每个任务执行完毕后再去执行下一个任务但是
有些任务不是立即就执行的例如定时器的回调函数、网络通信后的函数、用户操作后的函数…
如果让 渲染主线程 等待这些任务的时机到达后再去执行就会导致 渲染主线程 长期处于阻塞状态阻塞期间主线程不会执行任何操作给用户造成一种视觉上的卡死。 因此需要把这些任务变成异步任务
异步任务
渲染主线程处理异步任务时不会等待其触发而是通知计时线程开始计时然后立即结束当前任务继续去消息队列取下一个任务执行计时线程计时结束后会将异步任务的回调函数处理为一个新的任务并放入消息队列末尾。 并非只有同步会造成阻塞
即使是异步任务也有可能造成阻塞比如JS函数中等待但未进行运算。以下代码中事件处理函数是异步的点击按钮后可以发现3秒后页面内容才发生变化给用户一种「卡死」的感受。
h1TianBenchu/h1
buttonchangeName/button
scriptvar h1 document.querySelector(h1)var btn document.querySelector(button)// 一定期间内不进行任何操作function delay(duration) {var start Date.now()while (Date.now() - start duration) {}}btn.onclick function () {h1.textContent 田本初delay(3000)}
/script事件循环分析如下 浏览器进程 中的交互线程捕捉到用户点击了按钮将该事件的回调函数封装为一个任务添加到了消息队列的末尾唤醒了渲染主线程的休眠模式由于在此操作前消息队列中没有任务所以渲染主线程进入了休眠模式 渲染主线程 取出消息队列中的第一条任务来执行 渲染主线程 执行点击事件任务时操作dom会产生绘制任务然后执行delay函数该函数会等待3秒3秒后点击事件任务结束。渲染主线程才会去消息队列取出绘制任务所以页面内容没有立即发生改变。 任务的优先级
任务本身是没有优先级的但是消息队列有优先级。
其实消息队列并不止一个不同类型的任务会被排进不同的消息队列。
W3C 最新解释中抛弃了原先 宏任务和微任务 的说法而是
每个任务都有一个任务类型同一个类型的任务必须在一个队列不同类型的任务可以分属于不同的队列。 在一次事件循环中浏览器可以根据实际情况从不同的队列中取出任务执行。浏览器必须准备好一个微队列微队列中的任务优先所有其他任务执行微队列不再使用宏队列的说法
在目前Chrome的实现中至少包含了如下队列
微队列存放需要最快执行的任务优先级「最高」交互队列用于存放用户交互的处理优先级「高」延时队列用于存放定时器的回调优先级「中」
验证没有宏队列说法
示例
button idbegin开始/button
button idinteraction添加交互任务/button// 等待函数 期间不进行操作 以确保异步任务已经进入队列
function delay(duration) {var start Date.now()while (Date.now() - start duration) { }
}function addDelay() {console.log(添加延时队列)setTimeout(() {console.log(延时队列执行)}, 100)delay(2000)
}function addInteraction() {console.log(添加交互队列)interaction.onclick function () {console.log(交互队列执行)}delay(2000)
}begin.onclick function () {addDelay()addInteraction()console.log()
}点击开始按钮看到控制台打印出「添加交互队列」后快速点击添加交互任务按钮可以发现打印并非传统宏队列说法所述先入队列的任务先执行。 传统宏队列错误分析 点击开始按钮开始执行开始按钮的回调函数 先执行addDelay()打印「添加延时队列」处理定时器回调将其交给计时线程开始计时 执行addDelay()中的delay(2000)执行期间计时线程计时定时器的100毫秒已经到了定时器回调函数先进入宏队列delay(2000)两秒后执行结束至此addDelay()处理完毕 开始执行addInteraction()打印「添加交互队列」注册 添加交互任务按钮 的点击事件delay(2000)开始等待两秒 等待的两秒期间触发 添加交互任务按钮 的点击事件将回调函数封装为任务**加入宏队列** 两秒后addInteraction()结束打印「」 开始按钮的回调函数执行完毕 渲染主线程去宏队列中寻找任务按照其说法应该先打印「延时队列执行」再打印「交互队列执行」但事实与其描述相反
分析正确流程 渲染主线程开始处理全局JS解析JS完毕未触发任何函数 点击开始按钮回调函数封装为任务加入交互队列渲染主线程取出该任务开始执行 开始执行开始按钮的回调函数 先执行addDelay()打印「添加延时队列」处理定时器回调将其交给计时线程开始计时 执行addDelay()中的delay(2000)执行期间计时线程计时定时器的100毫秒已经到了定时器回调函数进入延时队列delay(2000)两秒后执行结束至此addDelay()处理完毕 开始执行addInteraction()打印「添加交互队列」注册 添加交互任务按钮 的点击事件delay(2000)开始等待两秒 等待的两秒期间触发 添加交互任务按钮 的点击事件将回调函数封装为任务**加入交互队列** 两秒后addInteraction()结束打印「」 开始按钮的回调函数执行完毕 渲染主线程根据队列优先级先执行交互队列中的任务并打印「交互队列执行」再执行延时队列的任务并打印「延时队列执行」
上述案例可以证明队列不止宏队列和微队列传统宏队列的说法的不准确的其实有很多队列渲染主线程会根据他们的优先级从中取出任务去执行。
添加任务到微队列
常见的方式如Promise的then函数、MutationObserver
总结
由于浏览器复杂度急剧上升原先宏任务与微任务的说法已经不适用队列也不止宏队列和微队列两个W3C不再使用宏队列的说法但微队列仍存在。不同类型的任务会进入不同的队列渲染主线程根据队列优先级从队列中取出任务并执行。但微队列中的任务优先级高于其他任何队列包括绘制任务。任务没有优先级但队列有。
事件循环面试题
一、如下代码输出
setTimeout((){console.log(1)
},1000)Promise.resolve().then((){console.log(2)
})console.log(3)分析渲染主线程的执行顺序 运行代码开始解析全局JS从上至下依次执行代码 定时器部分代码执行完毕将回调函数加入延时队列 进入Promise部分代码执行后将其加入微队列 最后执行console.log(3)同步代码直接打印。全局JS已经完全解析完毕此时全局JS任务结束 根据优先级去队列中寻找下一个执行任务 微队列中有任务最先执行即打印了2 渲染主线程执行完毕再次根据优先级寻找待执行任务此时找到了延时队列中的任务 执行延时队列中的任务打印1
答案 3 2 1
二、如下代码输出
function a() {console.log(1)Promise.resolve().then(function () {console.log(2)})
}
setTimeout(function () {console.log(3)Promise.resolve().then((){console.log(4)})
}, 0)Promise.resolve().then(a)console.log(5)分析渲染主线程 运行代码开始解析全局JS从上至下依次执行代码 定义函数a部分解析结束 定时器部分代码解析结束将回调函数交给延时队列延时队列将该函数处理为一个定时任务 Promise部分代码解析结束将then中函数交给微队列微队列会将该函数处理为一个微任务 解析console.log(5)控制台打印5 至此全局JS已经全部解析完毕 根据优先级寻找待执行任务发现Promise微任务并执行 执行a函数打印1Promise.then是微任务将其放入微队列 根据优先级寻找待执行任务发现Promise微任务并执行打印2 根据优先级寻找待执行任务发现定时任务并执行打印3发现微任务放入微队列 根据优先级寻找待执行任务发现Promise微任务并执行打印4
答案5 1 2 3 4
总结 单线程是异步产生的原因 事件循环是异步的实现方式 如何理解异步 JS是一门单线程的语言这是因为它运行在浏览器的渲染主线程中而渲染主线程只有一个。 渲染主线程承担着诸多的工作渲染页面、执行 JS、解析 HTML CSS… 都在其中运行。 使用同步的方式极有可能导致主线程产生阻塞从而导致消息队列中的很多其他任务无法得到执行。这样一来一方面会导致繁忙的主线程白白的消耗时间另一方面导致页面无法及时更新给用户造成卡死现象。 浏览器采用异步的方式来避免。具体做法是当某些任务发生时比如计时器、网络、事件监听主线程将任务交给其他线程去处理自身立即结束任务的执行转而执行后续代码。当其他线程完成时将事先传递的回调函数包装成任务加入到消息队列的末尾排队等待主线程调度执行。 在这种异步模式下浏览器永不阻塞从而最大限度的保证了单线程的流畅运行。
什么是JS的事件循环 事件循环又叫做消息循环是浏览器渲染主线程的工作方式。 在 Chrome 的源码中它开启一个不会结束的 for 循环每次循环从消息队列中取出第一个任务执行而其他线程只需要在合适的时候将任务加入到队列末尾即可。 过去把消息队列简单分为宏队列和微队列这种说法目前已无法满足复杂的浏览器环境取而代之的是一种更加灵活多变的处理方式。 根据 W3C 官方的解释每个任务有不同的类型同类型的任务必须在同一个队列不同的任务可以属于不同的队列。不同任务队列有不同的优先级在一次事件循环中由浏览器根据队列优先级自行决定取哪一个队列的任务。但浏览器必须有一个微队列微队列的任务一定具有最高的优先级必须优先调度执行。
JS中的计时准确吗 为什么
不准确
计算机硬件没有原子钟无法做到精确计时操作系统的计时函数本身就有少量偏差由于 JS 的计时器最终调用的是操作系统的函数也就携带了这些偏差按照 W3C 的标准浏览器实现计时器时如果嵌套层级超过 5 层则会带有 4 毫秒的最少时间这样在计时时间少于 4 毫秒时又带来了偏差受事件循环的影响计时器的回调函数只能在主线程空闲时运行因此又带来了偏差
