Quiero medir cuánto tiempo tomó la página para SSR. En next.js hay una manera de medir el rendimiento, utilizando la función reportWebVitals Pero antes de seguir con este enfoque, me gustaría jugar con performance.now .
Entonces, ¿es posible medir el tiempo de procesamiento con el performance.now ? Ahora algo como el siguiente fragmento, ¿será preciso?
const Page = () => { const t1 = performance.now(); const pageBody = <h1>Hello world</h1> const t2 = performance.now(); console.log(`Page took ${t2 - t1}ms`); return pageBody; }Nota: Supongamos que solo estamos haciendo SSR
aquí está el resultado de mi investigación, el tiempo de página no se relaciona con el procesamiento de componentes, como se dijo en los comentarios, el procesamiento es lo que necesita medir
page: 0.112ms component: 0.113ms render 0 -------------: 10.383ms page: 0.018ms component: 0.054ms render 1000 -------------: 1.284ms page: 0.021ms component: 3.903ms render 1000000 -------------: 4.749ms page: 0.019ms component: 1.195s render 1000000000 -------------: 1.201s page: 0.011ms // codes https://github.com/postor/measure-performance-of-react-ssrEntonces, ¿por qué sucede esto? porque jsx se compilan así
// before const Page = ()=> <Comp /> // after const Page = ()=>React.createElement(Comp) por lo tanto, React.createElement no representa los subcomponentes directamente, más como estructuras con subcomponentes, como se menciona en el comentario, React is more a scheduler than a reactor , los componentes se llaman cuando es necesario, por lo que la línea de tiempo se ve así
call render found page call page and return structure found component call component and return structure render structure to html and return