How React 18 Improves Application Performance – Vercel

主线程和长任务

1. 长任务( >= 50ms)
2. 一些指标(Core Web Vitals metric)

• Total Blocking Time
• First Contentful Paint
• Time To Interactive
• Interaction to Next Paint (INP), new core metric ### Traditional React Rendering
• render: compute
• commit: update

In a traditional synchronous render, React would give the same priority to all elements within a component tree.

A synchronous render is an “all-or-nothing” operation, where it’s guaranteed that a component that starts rendering will always finish.

React 18 introduces a new

concurrent

renderer that that operates behind the scenes.

When rendering the low-priority components(pink), React yields back to the main thead to check for more important tasksIn that case, React will yield back to the main thread every 5 ms to see if there are more important tasks to handle instead.