浏览器的渲染进程的线程
GUI 渲染线程
GUI 渲染线程是在 GUI 应用程序中负责界面渲染的线程。负责渲染浏览器页面,解析 HTML、CSS,构建DOM 树、构建CSSOM树、构建渲染树和绘制页面;当界面需要重绘或由于某种操作引发回流时,该线程就会执行。
在许多 GUI 应用程序中,渲染线程通常会在主线程中运行,这可能会导致界面卡顿或响应时间过长。为了避免这种情况,一些框架和库已经实现了将 GUI 渲染线程与主线程分离的机制,例如 Android 中的 UI 线程和渲染线程分离机制。
当渲染线程与主线程分离时,它可以专注于绘制和更新屏幕上的内容,而主线程则可以处理用户输入和其他逻辑。这样可以提高应用程序的响应速度和用户体验。
注意:GUI 渲染线程和 JS 引擎线程是互斥的,当JS 引擎执行时GUI线程会被挂起,GUI 更新会被保存在一个队列中等到JS 引擎空闲时立即被执行。
JS 引擎线程
JS 引擎线程也称为 JS 内核,负责处理Javascript 脚本程序,解析Javascript 脚本,运行代码;JS 引擎线程一直等待着任务队列中任务的到来,然后加以处理,一个 Tab 页中无论什么时候都只有一个JS 引擎线程在运行 JS 程序。
在浏览器环境中,JavaScript 引擎线程负责解释和执行 JavaScript 代码,并将执行结果返回给主线程。JavaScript 引擎线程通常是单线程的,这意味着它只能同时执行一个任务。这就是为什么一些耗时的 JavaScript 代码可以阻止页面的渲染和响应。
为了解决这个问题,浏览器引入了 Web Workers,使得可以使用多个 JavaScript 引擎线程来执行 JavaScript 代码。这些工作线程可以并行地执行 JavaScript 代码,并在完成任务后将结果返回给主线程,从而防止 JavaScript 代码阻塞页面的渲染和响应。
注意:GUI 渲染线程与 JS 引擎线程的互斥关系,所以如果JS 执行的时间过长,会造成页面的渲染不连贯,导致页面渲染加载阻塞。
时间触发线程
时间触发线程属于浏览器而不是 JS 引擎,用来控制事件循环;当JS引擎执行代码块如 setTimeOut 时(也可是来自浏览器内核的其他线程,如鼠标点击、AJAX 异步请求等),会将对应任务添加到事件触发线程中;当对应的事件符合触发条件被触发时,该线程会把事件添加到待处理队列的队尾,等待 JS 引擎的处理。
时间触发线程在浏览器中起着非常重要的作用,因为它们可以帮助网站实现许多不同的功能,包括:
-
启动定时器:当网页需要执行一些定时任务时,可以使用时间触发线程来启动定时器。
-
处理事件:当用户与网页交互时,例如点击按钮或提交表单,时间触发线程将负责处理这些事件并执行相应的回调函数。
-
处理异步请求:当网页需要从服务器获取数据时,可以使用时间触发线程来处理异步请求并执行回调函数。
注意:由于 JS 的单线程关系,所以这些待处理队列中的事件都得排队等待 JS 引擎处理(当 JS 引擎空闲时才会去执行)。
定时器触发进程
浏览器定时器触发进程是指浏览器中用来触发定时器的进程。在浏览器中,定时器可以使用 JavaScript 的 setTimeout() 和 setInterval() 方法来创建。当设置的时间到达后,浏览器会触发定时器,并执行对应的函数。
定时器触发进程通常由内核管理,它会在特定时间间隔内不断运行,并检查是否有定时器需要触发。当定时器触发时,该进程会将需要执行的任务推入待执行队列中,然后通知主线程执行。主线程会不断检查待执行队列,如果有任务待执行,则将其取出并执行。
需要注意的是,如果执行的任务需要较长时间才能完成,会导致主线程阻塞,影响页面的响应速度。因此,应该尽可能避免在定时器中执行复杂的任务,或者使用 Web Worker 在后台执行任务,以避免阻塞主线程。
注意:W3C 在 HTML 标准中规定,定时器的定时时间不能小于4ms,如果是小于 4ms,则默认为 4ms。
异步 http 请求线程
在浏览器中,异步 HTTP 请求线程通常由浏览器内部的 JavaScript 引擎处理。当 JavaScript 代码发起一个异步 HTTP 请求时,浏览器会创建一个新的线程来处理该请求,该线程通常是浏览器的网络线程。在该线程中,浏览器会向服务器发送 HTTP 请求,并等待服务器返回响应。
在等待服务器响应的同时,JavaScript 引擎会继续执行其他代码,不会被阻塞。当服务器返回响应后,浏览器会将响应数据传递给 JavaScript 引擎,在 JavaScript 线程中执行相应的回调函数,用来处理响应数据。
需要注意的是,由于浏览器对跨域请求进行了限制,在异步 HTTP 请求线程中发起的跨域请求需要经过浏览器的安全机制进行处理,一般需要设置相关的请求头或者使用 JSONP 等技术来解决。