php本地建站工具,网站建设电子合同,wordpress文章行距,网站自定义错误页面模板目录 1#xff0c;浏览器进程模型进程线程浏览器的进程和线程1#xff0c;浏览器进程2#xff0c;网络进程3#xff0c;渲染进程 2#xff0c;渲染主线程事件循环异步同步 JS 为什么会阻塞渲染任务优先级 3#xff0c;常见面试题1#xff0c;如何理解 js 的异步2#x… 目录 1浏览器进程模型进程线程浏览器的进程和线程1浏览器进程2网络进程3渲染进程 2渲染主线程事件循环异步同步 JS 为什么会阻塞渲染任务优先级 3常见面试题1如何理解 js 的异步2讲一下 js 的事件循环3js 能做到精准计时吗 1浏览器进程模型
进程
简单理解程序的运行是需要内存空间的。这块内存空间就可以理解为进程。
另外每个应用程序至少会有一个进程。进程之间相互独立通信需要双方同意。
线程
有了进程内存后就能运行程序了。而具体运行程序代码的是进程的小弟——线程。
1个进程至少有1个线程因为需要线程来运行程序代码。所以在进程开启后会默认创建1个线程——主线程。如果程序需要同时执行多个代码会由主线程来开启更多的线程来执行。所以进程和线程之间是一对多的关系。
浏览器的进程和线程
现在浏览器是一个多进程多线程的程序。为了避免相互影响和减少连环崩溃的概率当启动浏览器程序后它会自动启动多个进程。 其中主要的进程有
1浏览器进程
主要负责页面显示用户交互比如点击滑动子进程管理。它会启动多个线程来处理不同的任务。
2网络进程
负责加载网络资源它也会启动多个线程来处理各种网络任务。
3渲染进程
它默认创建的主线程被称为渲染主线程。负责执行 HTML CSS JS 代码。
默认情况下浏览器会为每个标签页创建1个新的渲染进程以保证不同标签页之间互不影响。
2渲染主线程
事件循环
渲染主线程是浏览器中最忙的线程因为需要处理的东西有很多包括但不限于
解析 HTML解析 CSS计算样式布局处理图层画页面 60次/s执行全局 js 代码执行绑定事件的处理函数执行计时器中的回调函数 …
问题来了如何调度这么多的任务举例来说
正在执行 js 函数的过程中用户点击了某个按钮是否应该立即执行点击事件的处理函数正在执行 js 函数的过程中计时器时间到了是否应该立即执行对应的回调函数计时器时间到了同时又点击了按钮应该先执行哪个
渲染主线程通过排队的方式来处理这个问题。 1渲染主线程会进入无限循环。
2每次循环会检查消息队列中是否存在任务 -- 有则取出第1个任务执行– 执行完进入下次循环。没有任务则进入休眠状态。
3其他所有线程包括其他进程的子线程可以随时向消息队列的末尾添加任务。 添加任务时如果渲染主线程是休眠状态则会唤醒让它继续循环取出任务执行。 注意消息队列不止一个常见有微队列延时队列交互队列。 以上整个过程被称为——事件循环。
异步
在执行代码时会遇到一些无法立即处理的任务。
计时器结束时需要执行的任务。—— setTimeout setInterval网络通信完成后需要执行的任务。—— XHR Fetch用于操作后需要执行的任务。—— EventListener
如果渲染主线程一直等待这些任务的时间点到来那就会一直处于阻塞的状态表现为浏览器卡死。
浏览器选择用异步来解决这个问题。这样渲染主线程永不阻塞。 同步 JS 为什么会阻塞渲染
因为 js 运行在渲染主线程中所以是单线程的语言。而渲染主线程有许多的工作包括渲染页面和执行全局 js。
举例
bodyh1下雪天的夏风/h1button更改内容/buttonscriptconst h1 document.querySelector(h1);const btn document.querySelector(button);btn.addEventListener(click, function () {h1.textContent 求关注;delay(2000);});// 死循环的时间 sfunction delay(duration) {const start Date.now();while (Date.now() - start duration) {}}/script
/body点击按钮效果 解释首先页面内容需要重新绘制才会更新。
1当全局 js 执行到绑定事件时会通知交互线程来处理。当某个时间用户点击后会将 fn 包装为任务发送给消息队列。
2当 fn 执行时第1条语句会创建1个绘制任务接着死循环 2s 后此时 fn 才执行完成。渲染主线程再去消息队列中看有没有新的任务。
这就是同步 js 会阻塞渲染的原因。
任务优先级
任务没有优先级在消息队列中先进先出。但消息队列有优先级
1每个任务都有一个任务类型同一类型的任务必须在一个队列不同类型的任务可以分属不同的队列。 一次事件循环中浏览器可以根据实际情况选择从不同的队列中取出任务执行。
2队列也有 VIP。浏览器必须准备好一个微队列微队列中的任务优先其他所有任务执行。 现代浏览器的复杂度升高了许多W3C 不再使用宏队列的说法。 不过我们可以简单的将除微队列之外的其他队列 “统一看做宏队列”。 3在目前的 Chrome 浏览器中至少包含了以下队列其他的和前端开发关系不大省略
微队列存放需要最快执行的任务优先级最高。交互队列存放用户操作后产生的事件处理任务优先级高。延时队列存放计时器时间结束后的回调任务优先级中。
交互队列和延时队列优先级举例如下 可以理解为用户的交互行为需要立即响应而计时器已经等了一段时间了再等一小会也无所谓。 bodybutton idbtn1初始化/buttonbutton idbtn2执行交互队列/buttonscript/* 1addDelay()执行完成时2s后计时器的回调函数 A会被添加到延时队列。2接着 addInteraction() 执行完成时2s后会将按钮点击事件的回调函数 B会被添加到交互队列。3此时点击【执行交互队列】交互队列中的 B 会先于延时队列中的 A 执行。*/const init document.querySelector(#btn1);const btnInteraction document.querySelector(#btn2);init.addEventListener(click, function () {addDelay();addInteraction();// “添加交互队列” 被打印后需要立即点击【执行交互队列】console.log(-----);});function addDelay() {console.log(添加延时队列);setTimeout(() {console.log(执行延时队列);}, 0);// 等 2s 为了保证 addDelay 执行完后计时器的回调函数添加到延时队列delay(2000);}function addInteraction() {console.log(添加交互队列);btnInteraction.addEventListener(click, function () {console.log(执行交互队列);});// 等 2s 为了保证 addInteraction 执行完后按钮点击事件的回调函数添加到交互队列delay(2000);}function delay(duration) {const start Date.now();while (Date.now() - start duration) {}}/script
/body效果 另外添加任务到微队列主要使用 Promise 和 MutationObserver
// 立即把 fn 添加到微队列。
Promise.resolve().then(fn)几个测试题
1结果: 21
setTimeout(() {console.log(1);
}, 0);
console.log(2);2结果54312
function a() {console.log(1);Promise.resolve().then(function () {console.log(2);});
}setTimeout(() {console.log(3);Promise.resolve().then(a);
}, 0);Promise.resolve().then(function () {console.log(4);
});console.log(5);3结果5123
function a() {console.log(1);Promise.resolve().then(function () {console.log(2);});
}setTimeout(() {console.log(3);
}, 0);Promise.resolve().then(a);console.log(5);3常见面试题
搞清楚了上面的内容后下面的问题也就比较简单了。 单线程是异步产生的原因。 事件循环是异步的实现方式。 1如何理解 js 的异步
因为 js 运行在渲染主线程中所以是单线程的语言。而渲染主线程有许多的工作包括渲染页面和执行全局 js。
如果使用同步的方式大概率会造成渲染主线程阻塞进而导致消息队列中的很多其他任务无法及时执行。表现为页面无法及时更新给用户造成浏览器卡死的现象。
所以浏览器采用异步的方式来避免这个问题。具体做法
当有某些任务产生后计时器网络通信事件监听等渲染主线程会交给其他对应线程去处理自身继续执行后面的代码。当其他线程处理完成后会将实现传递的回调函数包装为任务发送到消息队列末尾等待渲染主线程调度执行。
在这种异步模式下浏览器不会被阻塞最大限度的保证了单线程的流畅运行。
2讲一下 js 的事件循环
事件循环又叫做消息循环是浏览器渲染主线程的工作方式。
在 Chrome 的源码中会开启一个不会结束的 for 循环for(;;){}每次循环从消息队列中取出第1个任务执行其他线程将产生的任务加入到消息队列末尾即可。
过去把消息队列简单的分为微队列和宏队列。现在已经无法满足现代浏览器的复杂环境了。
根据 W3C 的解释每个任务都有类型同类型的任务必须在同一个队列不同的任务可以属于不同的队列。而不同队列的优先级也不一样。
一次事件循环中由浏览器来决定调取那个队里中的任务。同时必须有一个优先级最高的微队列必须优先调度执行。
3js 能做到精准计时吗
不能。
1受事件循环的影响计时器的回调函数所在的延时队列优先级较低这样即便倒计时结束也得等某些队列的任务执行完成所以会带来偏差。
2W3C 的标准浏览器实现的倒计时如果嵌套超过5层默认会有 4ms 的最少时间这也是可能的偏差。
3操作系统的计时函数本身就有少量误差js 计时器调用的就是它所以也会有偏差。
4计算机硬件没有原子钟无法做到精准计时。 原子钟英语Atomic clock是一种时钟它以原子共振频率标准来计算及保持时间的准确。原子钟是世界上已知最准确的时间测量和频率标准也是国际时间和频率转换的基准用来控制电视广播和全球定位系统卫星的讯号。 以上。 参考渡一教育。
