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

I am 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.

What are the differences in the positioning and functionality of the two apis?

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