浏览器性能指标

浏览器图片懒加载，可以预加载一个小的图片。

性能优化

监控lighthouse

Compression: node 起静态资源，来压缩静态资源。

gZip加了一点运算量

讲防止重复被打包吗？

1. Webpack-analyatics(可实话的包)
2. Tree shaking

 

FMP FP FCP

 

Ssr FP首屏 performance

 

网络

缓存（DNS成型，放到标签， tcp）

响应：request ttr<5s

Dom parse:ssr

 

Ssr

同构，静态化

 

Coverage=ctrrl+shift+p

W3c+ tc39

 

性能数据收集

https://www.w3.org/TR/navigation-timing-2/

 

Performance。GenEntriesByType(“navigation”)[0]

 

FMP first meaning paint(每个页面不同)

FP 首次绘制，FCP 首次内容绘制，FMP 首次有效绘制，TTI 交互时间 (性能分析点)

如何提升FMP

mutationObserver监听DomTree

https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver

1.

页面进入，mutaitonObserver

对变化的dom打上标记

文档的Load触发

遍历dom tree

根据元素的可是区域，计算元素的权重

遍历父元素， 对比合并

找到权重最高的

判断是否加载完毕

是不是img, video, audo,不然需要判断资源加载时间

Performance getentries

只是单纯的dum， 时间-dom变化

算出fmp

 

简单粗暴

mutationObserver首屏出来80%就算