JS事件循环机制
原文中文，约1500字，阅读约需4分钟。
📝
内容提要
文章讨论了浏览器中GUI渲染线程与JS引擎线程的互斥关系，JS执行时会暂停GUI更新，导致页面渲染不连贯。同时提到浏览器对同一域名的并发连接数有限制，Chrome和Firefox为6个。在使用Vue和React等框架时，路由跳转前需清空定时器。
🔎
延伸解读
JS执行与页面渲染的互斥关系
GUI渲染线程与JS引擎线程互斥，JS执行时GUI更新被挂起并排队，待JS引擎空闲后执行。因此，长时间运行的JS会导致页面渲染不连贯，造成加载阻塞。这提醒开发者避免在JS中执行耗时操作，以免影响用户体验。
浏览器并发连接数限制
浏览器对同一域名的并发连接数有限制，Chrome和Firefox均为6个。这意味着同时发起的多个请求可能需排队等待，影响资源加载速度。开发者可通过域名分片或资源合并来优化，但需注意此限制是浏览器层面的固定行为。
框架中路由跳转与定时器管理
在Vue、React等框架中，路由跳转无法自动销毁setInterval和setTimeout等全局定时器，因为它们属于window方法。若不在跳转前手动清空，可能导致定时器继续运行，引发内存泄漏或意外行为。因此，路由跳转前清空定时器是必要的实践。
❓
Q&A
JS引擎线程和GUI渲染线程之间有什么关系？
JS引擎线程与GUI渲染线程是互斥的，JS执行时会暂停GUI更新。
长时间执行JS会有什么影响？
长时间执行JS会导致页面渲染不连贯，造成加载阻塞。
浏览器对同一域名的并发连接数有限制吗？
是的，Chrome和Firefox对同一域名的并发连接数限制为6个。
在使用Vue和React时，路由跳转前需要做什么？
在使用Vue和React等框架时，路由跳转前需清空定时器。
为什么JS执行会导致页面渲染暂停？
因为JS执行时会挂起GUI线程，导致GUI更新被延迟。
如何避免JS执行导致的页面渲染问题？
可以通过优化JS代码执行时间和在路由跳转前清空定时器来避免问题。
🏷️
