浏览器渲染进程到底分为多少线程?

浏览器的渲染进程到底分为多少线程?

今天查资料有点给我查晕了,我现在知道浏览器应该是有四个进程。
而其中的渲染进程又是由五个小线程组成的。

然后我去查渲染进程流程的时候,又查到主要说法是分为四个或三个小线程:主线程 Main thread , 工作线程 Worker thread(有的文章没说这个),光栅线程 Raster thread 和排版线程 Compositor thread。

流程类似:

我希望您解答:

  1. 浏览器的渲染进程,到底分为几个线程
  2. 为什么会出现我问题中描述的,同样是渲染进程,却有不同的细分方式。
  3. 浏览器运行工作时,每一帧(16ms)是不是都会触发一次完整渲染进程流程?
  4. 希望您能给出比较系统化的资料链接
阅读 778
avatarAI BotBETA
  1. 浏览器的渲染进程通常包含多个线程,但具体数量可能因浏览器实现和版本而异。然而,通常提到的渲染进程中的线程包括:
* 主线程(Main Thread):也称为UI线程,负责处理JavaScript代码、事件处理、布局和绘制请求等。
* 工作线程(Worker Thread):用于执行背景任务,不干扰主线程的运行。
* 渲染线程(Raster Thread):负责将页面内容转换为图像,以便在屏幕上显示。
* 合成线程(Compositor Thread):将多个图层合并成最终的可视化输出,并处理动画和滚动等。
* 其他可能的线程还包括网络线程、数据库线程等,这些线程的具体存在取决于浏览器的实现。
  1. 关于渲染进程的不同细分方式,这可能是由于不同的资料来源、浏览器版本或特定的技术细节所导致的。浏览器技术不断发展,不同的实现可能会有所差异。此外,不同的文章可能侧重于不同的线程或概念,导致对渲染进程的描述有所不同。
  2. 浏览器运行工作时,每一帧(通常约为16ms)并不一定会触发完整的渲染进程流程。渲染进程涉及多个步骤,包括解析HTML、CSS和JavaScript,计算布局和样式,以及绘制页面内容等。为了提高性能和效率,浏览器会采用多种优化策略,如增量渲染、异步加载等。这意味着不是每个帧都会触发完整的渲染流程,而是根据页面内容和用户交互来动态调整渲染过程。
  3. 关于系统化的资料链接,以下是一些关于浏览器渲染进程的参考资料:
* MDN Web Docs: [Browser rendering processes](https://developer.mozilla.org/en-US/docs/Mozilla/Gecko/Browser_rendering_processes)
* Chromium Blog: [Inside browser rendering: Overview](https://blog.chromium.org/2010/04/inside-browser-rendering-overview.html)
* Smashing Magazine: [How Browsers Work: Behind the scenes of modern web rendering](https://www.smashingmagazine.com/2013/06/how-browsers-work-behind-the-scenes-of-modern-web-rendering/)
* HTML5 Rocks: [High Performance Animations](http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/)

这些资料提供了对浏览器渲染进程的深入了解,包括线程、渲染流程、性能优化等方面的内容。请注意,由于浏览器技术的不断更新,建议查阅最新的资料以获取最准确的信息。

1 个回答

核心线程:
主线程(Main thread)
合成线程(Compositor thread)
光栅线程(Raster thread 或多个)
网络线程(尽管在网络层面,但它对渲染流程至关重要)
工作线程(Worker thread,用于异步计算任务)

出现描述差异的原因可能包括但不限于:
资料来源基于不同的浏览器版本或研究视角。
浏览器内部实现不断改进,线程分工随之变化。
部分资料为简化说明,可能忽略了非直接影响渲染流程的部分线程类型。

关于帧率与渲染流程的问题
浏览器并不保证每一帧(通常为16毫秒)都会触发一次完整的渲染流程。实际上,现代浏览器利用增量渲染和异步更新技术,仅在必要时(例如页面内容或布局发生改变时)才重新进行布局或重绘。许多情况下,如滚动和动画的更新,仅需要合成线程参与,而无需重新执行布局或绘制操作。

深入了解现代网络浏览器(第 1 部分):
https://developer.chrome.com/blog/inside-browser-part1?hl=zh-cn
深入了解现代网络浏览器(第 2 部分):
https://developer.chrome.com/blog/inside-browser-part2?hl=zh-cn
开发者工具的新变化 (Chrome 77) :
https://developer.chrome.com/blog/new-in-devtools-77?hl=zh-cn
High PerformanceBrowser Networking:
https://hpbn.co/

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏