website 性能检测 & 前端性能优化

website 性能检测 & 前端性能优化

https://cdn.xgqfrms.xyz/

https://mobile.xgqfrms.xyz/

PageSpeed Insights

https://developers.google.com/speed/pagespeed/insights/

https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.xgqfrms.xyz

Lighthouse

PWA

https://developers.google.com/web/tools/lighthouse/

https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk

---

渲染树构建、布局及绘制

https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction

https://developers.google.com/web/fundamentals/performance/rendering/

1. JS / CSS > 样式 > 布局 > 绘制 > 合成

2. JS / CSS > 样式 > 绘制 > 合成

3. JS / CSS > 样式 > 合成

Layout Paint Composite / 布局 / 绘制 / 组合

refs

https://csstriggers.com/

https://github.com/GoogleChromeLabs/squoosh
https://github.com/GoogleChromeLabs/comlink

https://www.udacity.com/course/browser-rendering-optimization--ud860

---

---

©xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

---