[{"data":1,"prerenderedAt":381},["ShallowReactive",2],{"content:\u002Fposts\u002F2024\u002Fjs-eventloop":3,"surround:\u002Fposts\u002F2024\u002Fjs-eventloop":370},{"id":4,"title":5,"body":6,"canonical":350,"categories":351,"date":353,"description":350,"draft":354,"extension":355,"image":356,"meta":357,"navigation":358,"path":359,"permalink":350,"readingTime":360,"recommend":350,"references":350,"seo":365,"sitemap":366,"stem":367,"tags":368,"type":350,"updated":353,"__hash__":369},"content\u002Fposts\u002F2024\u002Fjs-EventLoop.md","事件循环 \u002F EventLoop",{"type":7,"value":8,"toc":333},"minimark",[9,13,17,22,25,28,41,46,49,81,87,90,93,104,111,131,134,137,140,166,177,183,186,192,199,202,205,208,211,215,225,228,233,239,242,254,260,263,283,288,296,300,303,306,309,312,316,319],[10,11,12],"h2",{"id":12},"浏览器的进程和线程",[14,15,16],"p",{},"进程：每个应用至少有一个进程，进程之间相互独立。\n线程：一个进程中包括多个线程（线程用来运行代码）。一个进程中至少有一个线程，随进程创建的线程称为主线程。如果程序需要同时执行多块代码，需要创建多个线程。",[18,19,21],"h3",{"id":20},"浏览器有哪些进程和线程","浏览器有哪些进程和线程？",[14,23,24],{},"浏览器是一个多进程多线程的应用程序。",[14,26,27],{},"当浏览器启动后，会自动启动多个进程。浏览器有哪些进程呢？",[29,30,31,35,38],"ul",{},[32,33,34],"li",{},"浏览器进程\n负责进行主界面展示（浏览器界面）、用户交互、子进程管理（其他进程都是由其产生）",[32,36,37],{},"网络进程\n负责加载网络资源",[32,39,40],{},"渲染进程（一个标签页对应一个渲染进程）\n渲染进程启动后，会开启一个渲染主线程，主线程负责执行 HTML、CSS、JS 代码。\n默认情况下，浏览器会为每个标签页启动新的渲染进程，保证不同标签页之间互不影响。",[42,43,45],"h4",{"id":44},"渲染主线程是如何工作的","渲染主线程是如何工作的？",[14,47,48],{},"渲染主线程是浏览器中最繁忙的线程，需要它处理的包括但不限于：",[29,50,51,54,57,60,63,66,69,72,75,78],{},[32,52,53],{},"解析 HTML",[32,55,56],{},"解析 CSS",[32,58,59],{},"计算样式",[32,61,62],{},"布局",[32,64,65],{},"处理图层",[32,67,68],{},"每秒把页面绘制 60 次（FPS）",[32,70,71],{},"执行全局 JS 代码",[32,73,74],{},"执行事件处理函数",[32,76,77],{},"执行计时器的回调函数",[32,79,80],{},"……",[82,83,84],"alert",{},[14,85,86],{},"为什么不用多个线程处理这些事？",[14,88,89],{},"要处理这么多任务，主线程遇到了一个难题：如何调度任务？",[14,91,92],{},"比如：",[29,94,95,98,101],{},[32,96,97],{},"正在执行一个 JS 函数，执行到一半时用户点击了按钮，要立即去执行点击事件的处理函数吗？",[32,99,100],{},"正在执行一个 JS 函数，执行到一半时某个计时器到达了时间，要立即执行该计时器的回调函数吗？",[32,102,103],{},"浏览器进程通知“用户点击了按钮”，与此同时，一个计时器也到达了时间，要先处理哪一个呢？",[14,105,106,107],{},"渲染主线程说：",[108,109,110],"emp",{},"排队，都去排队！！！",[112,113,114,125,128],"ol",{},[32,115,116,117,121,122],{},"在最开始的时候，渲染主线程会进入一个无限循环\n",[118,119,120],"code",{"code":120},"while(true){...}"," ",[118,123,124],{"code":124},"for(;;){...}",[32,126,127],{},"每次进入循环时会判断是否有任务存在。如果有，就取出一个任务执行，执行完成后进入下一次循环；如果没有，就进入休眠状态",[32,129,130],{},"其他所有线程（包括其他进程的线程）可以随时向消息队列添加任务。新任务会添加到消息队列末尾。在添加新任务时，如果主线程是休眠状态，这将会唤醒主线程继续循环拿去任务。",[14,132,133],{},"整个过程叫做事件循环（消息循环）。",[42,135,136],{"id":136},"何为异步",[14,138,139],{},"代码在执行过程中，会遇到一些无法立即处理的任务，如：",[29,141,142,151,160],{},[32,143,144,145,121,148],{},"计时器完成后需要执行的任务： ",[118,146,147],{"code":147},"setTimeout",[118,149,150],{"code":150},"setInterval",[32,152,153,154,121,157],{},"网络通信完成后需要执行的任务： ",[118,155,156],{"code":156},"XHR",[118,158,159],{"code":159},"fetch",[32,161,162,163],{},"用户操作后要执行的任务：",[118,164,165],{"code":165},"addEventListener",[14,167,168,169,173,174],{},"如果让渲染主线程等待这些任务的时机到达，就会导致主线程长期处于",[170,171,172],"em",{},"阻塞","状态，从而导致浏览器",[170,175,176],{},"卡死",[14,178,179],{},[180,181,182],"strong",{},"渲染主线程承担着极其重要的恶工作，无论如何都不能阻塞！",[14,184,185],{},"因此，浏览器选择异步来解决这个问题",[14,187,188,189],{},"使用异步的方式，",[180,190,191],{},"渲染主线程永不阻塞",[42,193,195,196],{"id":194},"面试题如何理解-js-异步","面试题：",[180,197,198],{},"如何理解 js 异步",[14,200,201],{},"JS 是一门单线程的语言，这是因为它运行在浏览器的渲染主线程中，而渲染主线程只有一个。\n而渲染主线程承担着诸多工作，渲染页面、执行 HTML、CSS、JS 等都在其中运行。",[14,203,204],{},"如果使用同步的方式，就极有可能导致主线程产生阻塞，从而导致消息队列中很多其他任务无法执行。这样依赖，一方面会导致繁忙的主线程白白消耗时间，另一方面导致页面无法及时更新，给用户造成卡死的现象。",[14,206,207],{},"所以，浏览器采用异步的方式来避免。具体做法是当某些任务发生时，比如计时器、网络、事件监听，主线程将任务交给其他线程去处理，自身立即结束该任务的执行，转而执行后续代码，当其他线程完成对应的任务时，将事先传递的回调函数包装成任务加入到消息队列末尾，排队等待主线程调度执行。",[14,209,210],{},"在这种异步模式下，浏览器用不阻塞，从而最大限度保证了单线程的流畅运行。",[42,212,214],{"id":213},"js-为什么会阻碍渲染","JS 为什么会阻碍渲染",[216,217,223],"pre",{"className":218,"code":220,"language":221,"meta":222},[219],"language-html","\u003Chtml>\n  \u003Chead>\u003C\u002Fhead>\n  \u003Cbody>\n    \u003Ch1>wxw\u003C\u002Fh1>\n    \u003Cbutton>change name\u003C\u002Fbutton>\n\n    \u003Cscript>\n      const h1 = document.querySelector(\"h1\")\n      const btn = document.querySelector(\"button\")\n\n      function delay(duration) {\n        const start = Date.now()\n        while (Date.now() - start \u003C duration) {}\n      }\n\n      btn.onclick = () => {\n        h1.textContext = \"!!!\"\n        delay(3000)\n      }\n    \u003C\u002Fscript>\n  \u003C\u002Fbody>\n\u003C\u002Fhtml>\n","html","",[118,224,220],{"__ignoreMap":222},[42,226,227],{"id":227},"任务有优先级吗",[14,229,230],{},[180,231,232],{},"任务没有优先级，在消息队列中先进先出",[14,234,235,236],{},"但是",[180,237,238],{},"消息队列是有优先级的",[14,240,241],{},"根据 W3C 的最新解释：",[29,243,244,247],{},[32,245,246],{},"每个任务都有一个任务类型，同一个类型的任务必须在同一个队列，不同类型的任务可以分属于不同的队列。在一次事件循环中，浏览器可以根据实际情况从不同的队列中取任务执行。",[32,248,249,250,253],{},"浏览器必须准备好一个",[180,251,252],{},"微队列","，微队列中的任务优先所有其他任务执行",[255,256,257],"blockquote",{},[14,258,259],{},"随着浏览器复杂度的提升，W3C 不再使用宏队列的说法。",[14,261,262],{},"在 chrome 的实现中，至少包含了下面的队列：",[29,264,265,271,277],{},[32,266,267,268],{},"延时队列：用于存放计时器到达后的回调事件，优先级",[108,269,270],{},"中",[32,272,273,274],{},"交互队列：用于存放用户操作后产生的事件处理任务，优先级",[108,275,276],{},"高",[32,278,279,280],{},"微队列：用于存放需要最快执行的任务，优先级",[108,281,282],{},"最高",[255,284,285],{},[14,286,287],{},"添加到微任务的最主要方式是使用 Promise、MutationObserver",[216,289,294],{"className":290,"code":292,"language":293,"meta":222},[291],"language-js","\u002F\u002F 立即把一个函数添加到微队列\nPromise.resolve().then(\"函数内容\")\n","js",[118,295,292],{"__ignoreMap":222},[42,297,299],{"id":298},"面试题简述一下-js-的事件循环","面试题：简述一下 JS 的事件循环",[14,301,302],{},"事件循环又叫消息循环，是浏览器主线程的工作方式。",[14,304,305],{},"在 Chrome 的源码中，他会开启一个不会结束的 for 循环，每次循环从事件循环队列中取出第一个任务执行，而其他线程只需要在合适的时候将任务添加到任务队列末尾即可。",[14,307,308],{},"过去把事件循环队列简单分为宏队列和微队列，这种说法已经无法满足复杂的浏览器环境，取而代之的是一种更加灵活多变的处理方式。",[14,310,311],{},"根据 W3C 官方的解释，每个任务有不同的类型，同类型的任务必须在同一个队列里，不同任务可以属于不同的队列。不同任务队列有不同的优先级，再每次事件循环中，由浏览器自行决定取哪一个队列的任务，但浏览器必须有一个微任务队列，微任务队列的任务一定具有最高的优先级，必须优先调度执行。",[42,313,315],{"id":314},"面试题js-计时器能做到精确计时吗为什么","面试题：JS 计时器能做到精确计时吗？为什么？",[14,317,318],{},"不行，因为：",[112,320,321,324,327,330],{},[32,322,323],{},"计算机硬件没有原子钟，无法做到准确计时",[32,325,326],{},"操作系统的计时函数本就有少量的偏差，由于 JS 的计时器最终调用的是操作系统的计时函数，也就携带了这些偏差",[32,328,329],{},"按照 W3C 的标准，浏览器实现计时器时，如果嵌套层级超过 5 层，则会带有 4ms 的最少事件，咋样在计时器少于 4ms 时又带来了偏差",[32,331,332],{},"受事件循环的影响，计时器的回调函数只能在主线程空闲时运行，这又带来了些许偏差",{"title":222,"searchDepth":334,"depth":334,"links":335},4,[336],{"id":12,"depth":337,"text":12,"children":338},2,[339],{"id":20,"depth":340,"text":21,"children":341},3,[342,343,344,346,347,348,349],{"id":44,"depth":334,"text":45},{"id":136,"depth":334,"text":136},{"id":194,"depth":334,"text":345},"面试题：如何理解 js 异步",{"id":213,"depth":334,"text":214},{"id":227,"depth":334,"text":227},{"id":298,"depth":334,"text":299},{"id":314,"depth":334,"text":315},null,[352],"代码","2024-03-16 23:56:14",false,"md","https:\u002F\u002Fbitmc.uno\u002Fpicgo\u002F679ad63768138-78.webp",{},true,"\u002Fposts\u002F2024\u002Fjs-eventloop",{"text":361,"minutes":362,"time":363,"words":364},"10 min read",9.94,596400,1988,{"title":5,"description":350},{"loc":359},"posts\u002F2024\u002Fjs-EventLoop",[],"VSQ1O5W3GkGOf6JCV5-dQBqYXEqplQWNdCl5Oa7t0bw",[371,376],{"title":372,"path":373,"stem":374,"date":375,"type":350,"children":-1},"浏览器渲染原理","\u002Fposts\u002F2024\u002Fjs-browser-render","posts\u002F2024\u002Fjs-browser-render","2024-03-16 23:53:00",{"title":377,"path":378,"stem":379,"date":380,"type":350,"children":-1},"TypeScript 基本数据类型","\u002Fposts\u002F2024\u002Fts-basic-type","posts\u002F2024\u002Fts-basic-type","2024-03-16 23:59:14",1789642592516]