what's the difference between window.performance and PerformanceObserver?

Question

I am recently learning about explore's performance apis, and learned about window.performance and PerformanceObserver. I think they seem to have almost same function, for example if I want to get FCP time, I can get it from performance.getEntries() or from PerformanceObserver by observe paint. Could anyone tell me the differences in the positioning and functionality of the two apis

I've read some docs from MDN and other

Answer 1

You're right that you can get First Contentful Paint and First Paint directly from the .getEntries() list, but you'll need to invoke PerformanceObservers if you want to listen to metrics like:

• Largest Contentful Paint
• Layout shifts
• First Input Delay
• Interaction to Next Paint

Take a look at the webVitals.js library from the Chrome team here: https://github.com/GoogleChrome/web-vitals