跳至主要內容

浏览器进程与线程

Cap原创大约 5 分钟

进程

浏览器是多进程架构，相比于单进程架构

  • 有数据隔离的能力
  • 有多核优势
  • 各司其职，互不影响。单页面崩溃不会影响其他页面

包含的进程

  1. Browser进程

    主进程

  2. 插件进程

    插件管理

  3. GPU进程

  4. 渲染进程（浏览器内核）

每个tab一个进程

渲染进程

每个进程内部有多个线程，展开渲染进程:

  1. GUI渲染线程
  2. JS引擎线程
  3. 事件触发线程
  4. 定时触发线程
  5. 异步http请求线程

GUI渲染线程与JS引擎线程互斥

道理就是js可以操作dom，dom没确定，是不会去渲染页面。

让我为您解释主流浏览器刷新频率为60Hz这个概念，以及它与浏览器渲染和JavaScript脚本执行的关系。

理解屏幕刷新频率与GUI渲染和JS引擎的关系

理解60Hz刷新频率

60Hz的刷新频率意味着浏览器每秒会更新或"刷新"屏幕60次。这就是说，理想情况下，每16.67毫秒（1000ms / 60 ≈ 16.67ms）会发生一次屏幕更新。

浏览器渲染过程

浏览器的渲染过程通常包括以下步骤：

  • 样式计算
  • 布局
  • 绘制
  • 合成

这个过程被称为"渲染管道"或"像素管道"。

渲染与60Hz刷新率的关系

为了保持流畅的用户体验，浏览器需要在每次屏幕刷新之前完成一次完整的渲染过程。这就意味着所有的计算、布局和绘制操作理想情况下应该在16.67ms内完成。

让我们用一个图表来说明这个过程：

JavaScript执行与60Hz刷新率

JavaScript的执行也需要在这个16.67ms的时间窗口内完成，以避免影响下一帧的渲染。如果JavaScript执行时间过长，可能会导致丢帧，造成页面卡顿。

实际影响

  • 动画效果：为了实现流畅的动画，每一帧的变化都应该在16.67ms内完成。这就是为什么我们经常听到"60fps（每秒60帧）"这个术语。
  • 事件处理：对用户输入的响应也应该在一帧之内完成，以确保用户感受不到延迟。
  • 长任务优化：任何超过50ms的任务都被认为是"长任务"，可能会导致用户体验问题。

优化策略

为了配合60Hz的刷新频率，开发者可以采取以下策略：

  • 使用requestAnimationFrame来调度动画，确保动画更新与屏幕刷新同步。
  • 将复杂的计算任务分解成小块，使用setTimeout或requestIdleCallback来调度，避免阻塞主线程。
  • 使用Web Workers来执行耗时的JavaScript操作，不影响主线程的渲染。

总结来说，理解60Hz刷新频率对于优化web应用的性能和用户体验至关重要。它为我们提供了一个清晰的目标：确保每16.67ms内完成所有必要的计算和渲染工作，以实现流畅的用户界面。