imgs/eventloop.svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="processonSvg1000" viewBox="61.0 70.0 852.0 698.0" width="852.0" height="698.0"><defs id="ProcessOnDefs1001"><marker id="ProcessOnMarker1027" markerUnits="userSpaceOnUse" orient="auto" markerWidth="16.23606797749979" markerHeight="10.550836550532098" viewBox="-1.0 -1.3763819204711736 16.23606797749979 10.550836550532098" refX="-1.0" refY="3.8990363547948754"><path id="ProcessOnPath1028" d="M12.0 3.8990363547948754L0.0 7.798072709589751V0.0Z" stroke="#323232" stroke-width="2.0" fill="#323232" transform="matrix(1.0,0.0,0.0,1.0,0.0,0.0)"/></marker><marker id="ProcessOnMarker1035" markerUnits="userSpaceOnUse" orient="auto" markerWidth="16.23606797749979" markerHeight="10.550836550532098" viewBox="-1.0 -1.3763819204711736 16.23606797749979 10.550836550532098" refX="-1.0" refY="3.8990363547948754"><path id="ProcessOnPath1036" d="M12.0 3.8990363547948754L0.0 7.798072709589751V0.0Z" stroke="#323232" stroke-width="2.0" fill="#323232" transform="matrix(1.0,0.0,0.0,1.0,0.0,0.0)"/></marker><marker id="ProcessOnMarker1053" markerUnits="userSpaceOnUse" orient="auto" markerWidth="16.23606797749979" markerHeight="10.550836550532098" viewBox="-1.0 -1.3763819204711736 16.23606797749979 10.550836550532098" refX="-1.0" refY="3.8990363547948754"><path id="ProcessOnPath1054" d="M12.0 3.8990363547948754L0.0 7.798072709589751V0.0Z" stroke="#323232" stroke-width="2.0" fill="#323232" transform="matrix(1.0,0.0,0.0,1.0,0.0,0.0)"/></marker></defs><g id="ProcessOnG1002"><path id="ProcessOnPath1003" d="M61.0 70.0H913.0V768.0H61.0V70.0Z" fill="none"/><g id="ProcessOnG1004"><g id="ProcessOnG1005" transform="matrix(1.0,0.0,0.0,1.0,188.0,175.0)" opacity="1.0"><path id="ProcessOnPath1006" d="M0.0 0.0L184.0 0.0L184.0 551.0L0.0 551.0Z" stroke="#323232" stroke-width="2.0" stroke-dasharray="none" opacity="1.0" fill="#ffffff"/><g id="ProcessOnG1007" transform="matrix(1.0,0.0,0.0,1.0,10.0,225.5)"><text id="ProcessOnText1008" fill="#000000" font-size="16" x="0.0" y="16.4" font-family="微软雅黑" font-weight="normal" font-style="normal" text-decoration="none" family="微软雅黑" text-anchor="start" size="16">同步代码按顺序执行。</text><text id="ProcessOnText1009" fill="#000000" font-size="16" x="0.0" y="36.4" font-family="微软雅黑" font-weight="normal" font-style="normal" text-decoration="none" family="微软雅黑" text-anchor="start" size="16">遇Promise.then或者s</text><text id="ProcessOnText1010" fill="#000000" font-size="16" x="0.0" y="56.4" font-family="微软雅黑" font-weight="normal" font-style="normal" text-decoration="none" family="微软雅黑" text-anchor="start" size="16">etTimeout等任务会对</text><text id="ProcessOnText1011" fill="#000000" font-size="16" x="0.0" y="76.4" font-family="微软雅黑" font-weight="normal" font-style="normal" text-decoration="none" family="微软雅黑" text-anchor="start" size="16">应的加入到微任务队列</text><text id="ProcessOnText1012" fill="#000000" font-size="16" x="0.0" y="96.4" font-family="微软雅黑" font-weight="normal" font-style="normal" text-decoration="none" family="微软雅黑" text-anchor="start" size="16">或宏任务队列</text></g></g><g id="ProcessOnG1013" transform="matrix(1.0,0.0,0.0,1.0,81.0,402.0)" opacity="1.0"><path id="ProcessOnPath1014" d="M19.8 0.0L40.2 0.0L40.2 60.0L60.0 60.0L30.0 90.0L0.0 60.0L19.8 60.0L19.8 0.0Z" stroke="#323232" stroke-width="2.0" stroke-dasharray="none" opacity="1.0" fill="#ffffff"/></g><g id="ProcessOnG1015" transform="matrix(1.0,0.0,0.0,1.0,484.0,408.0)" opacity="1.0"><path id="ProcessOnPath1016" d="M0.0 0.0L379.0 0.0L379.0 85.0L0.0 85.0Z" stroke="#323232" stroke-width="2.0" stroke-dasharray="none" opacity="1.0" fill="#ffffff"/><g id="ProcessOnG1017" transform="matrix(1.0,0.0,0.0,1.0,10.0,22.5)"><text id="ProcessOnText1018" fill="#000000" font-size="16" x="178.5" y="16.4" font-family="微软雅黑" font-weight="normal" font-style="normal" text-decoration="none" family="微软雅黑" text-anchor="middle" size="16">微任务队列，每次都要把队列所有的微任务一次性</text><text id="ProcessOnText1019" fill="#000000" font-size="16" x="178.5" y="36.4" font-family="微软雅黑" font-weight="normal" font-style="normal" text-decoration="none" family="微软雅黑" text-anchor="middle" size="16">执行完，然后开始执行宏任务</text></g></g><g id="ProcessOnG1020" transform="matrix(1.0,0.0,0.0,1.0,484.0,556.0)" opacity="1.0"><path id="ProcessOnPath1021" d="M0.0 0.0L379.0 0.0L379.0 84.0L0.0 84.0Z" stroke="#323232" stroke-width="2.0" stroke-dasharray="none" opacity="1.0" fill="#ffffff"/><g id="ProcessOnG1022" transform="matrix(1.0,0.0,0.0,1.0,10.0,22.0)"><text id="ProcessOnText1023" fill="#000000" font-size="16" x="178.5" y="16.4" font-family="微软雅黑" font-weight="normal" font-style="normal" text-decoration="none" family="微软雅黑" text-anchor="middle" size="16">宏任务队列，每次只执行一个宏任务，然后重新开</text><text id="ProcessOnText1024" fill="#000000" font-size="16" x="178.5" y="36.4" font-family="微软雅黑" font-weight="normal" font-style="normal" text-decoration="none" family="微软雅黑" text-anchor="middle" size="16">始下一个循环</text></g></g><g id="ProcessOnG1025"><path id="ProcessOnPath1026" d="M673.5 493.0L673.5 524.5L673.5 524.5L673.5 540.7639320225002" stroke="#323232" stroke-width="2.0" stroke-dasharray="none" fill="none" marker-end="url(#ProcessOnMarker1027)"/></g><g id="ProcessOnG1029" transform="matrix(1.0,0.0,0.0,1.0,492.0,90.0)" opacity="1.0"><path id="ProcessOnPath1030" d="M0.0 0.0L160.0 0.0L160.0 40.0L0.0 40.0Z" stroke="none" stroke-width="0.0" stroke-dasharray="none" opacity="1.0" fill="none"/><g id="ProcessOnG1031" transform="matrix(1.0,0.0,0.0,1.0,0.0,2.5)"><text id="ProcessOnText1032" fill="#000000" font-size="28" x="79.0" y="28.700000000000003" font-family="微软雅黑" font-weight="normal" font-style="normal" text-decoration="none" family="微软雅黑" text-anchor="middle" size="28">while (true)</text></g></g><g id="ProcessOnG1033"><path id="ProcessOnPath1034" d="M372.0 450.5L428.0 450.5L428.0 450.5L468.7639320225002 450.5" stroke="#323232" stroke-width="2.0" stroke-dasharray="none" fill="none" marker-end="url(#ProcessOnMarker1035)"/></g><g id="ProcessOnG1037" transform="matrix(1.0,0.0,0.0,1.0,562.0,326.0)" opacity="1.0"><path id="ProcessOnPath1038" d="M0.0 0.0L227.0 0.0L227.0 68.0L0.0 68.0Z" stroke="none" stroke-width="0.0" stroke-dasharray="none" opacity="1.0" fill="none"/><g id="ProcessOnG1039" transform="matrix(1.0,0.0,0.0,1.0,0.0,7.75)"><text id="ProcessOnText1040" fill="#000000" font-size="14" x="0.0" y="14.350000000000001" font-family="微软雅黑" font-weight="normal" font-style="normal" text-decoration="none" family="微软雅黑" text-anchor="start" size="14">* Promise</text><text id="ProcessOnText1041" fill="#000000" font-size="14" x="0.0" y="31.85" font-family="微软雅黑" font-weight="normal" font-style="normal" text-decoration="none" family="微软雅黑" text-anchor="start" size="14">* MutationObserver</text><text id="ProcessOnText1042" fill="#000000" font-size="14" x="0.0" y="49.35" font-family="微软雅黑" font-weight="normal" font-style="normal" text-decoration="none" family="微软雅黑" text-anchor="start" size="14">* Object.observe()（已废弃）</text></g></g><g id="ProcessOnG1043" transform="matrix(1.0,0.0,0.0,1.0,562.0,655.0)" opacity="1.0"><path id="ProcessOnPath1044" d="M0.0 0.0L238.0 0.0L238.0 93.0L0.0 93.0Z" stroke="none" stroke-width="0.0" stroke-dasharray="none" opacity="1.0" fill="none"/><g id="ProcessOnG1045" transform="matrix(1.0,0.0,0.0,1.0,0.0,2.75)"><text id="ProcessOnText1046" fill="#000000" font-size="14" x="0.0" y="14.350000000000001" font-family="微软雅黑" font-weight="normal" font-style="normal" text-decoration="none" family="微软雅黑" text-anchor="start" size="14">* setTimeout</text><text id="ProcessOnText1047" fill="#000000" font-size="14" x="0.0" y="31.85" font-family="微软雅黑" font-weight="normal" font-style="normal" text-decoration="none" family="微软雅黑" text-anchor="start" size="14">* setInterval</text><text id="ProcessOnText1048" fill="#000000" font-size="14" x="0.0" y="49.35" font-family="微软雅黑" font-weight="normal" font-style="normal" text-decoration="none" family="微软雅黑" text-anchor="start" size="14">* setImmediate</text><text id="ProcessOnText1049" fill="#000000" font-size="14" x="0.0" y="66.85" font-family="微软雅黑" font-weight="normal" font-style="normal" text-decoration="none" family="微软雅黑" text-anchor="start" size="14">* I\O</text><text id="ProcessOnText1050" fill="#000000" font-size="14" x="0.0" y="84.35" font-family="微软雅黑" font-weight="normal" font-style="normal" text-decoration="none" family="微软雅黑" text-anchor="start" size="14">* UI rendering(DOM event)</text></g></g><g id="ProcessOnG1051"><path id="ProcessOnPath1052" d="M863.0 598.0L893.0 598.0L893.0 145.0L280.0 145.0L280.0 159.7639320225002" stroke="#323232" stroke-width="2.0" stroke-dasharray="none" fill="none" marker-end="url(#ProcessOnMarker1053)"/></g></g></g></svg>