前端性能优化

性能指标

白屏时间、首屏渲染时间、首次交互时间、出错率、APDEX

http://doc.tingyun.com/browser/html/yemianjiancexiangguanzhibiao.html

性能查看工具

工具		链接地址	备注	特点
Lighthouse 3.0		https://developers.google.com/web/updates/2018/05/lighthouse3	Chrome Extension 性能、体验、SEO等优化	简单易用 排除网络因素
Chrome Dev Tools Autits+Netrowk
webpagetest		http://www.webpagetest.org/result/180511_6T_f87a2700966e1a45332da0809ad7981a/   requestMap https://requestmap.herokuapp.com/render/180511_6T_f87a2700966e1a45332da0809ad7981a/	在线检测工具	可以生成各种报表，依赖图，和优化建议 属于lighthouse的增强版 requesetMap 报表功能很强
Gtmetrix		https://gtmetrix.com/reports/www.csdn.net/fwCRvdlC	在线检测工具	功能强大
听云Browser		https://report.tingyun.com/browser-web/#/browser/overview/applist	被动抽样监测	能够记录并还原问题慢页面的问题点 页面优化工具与lighthouse相同（中文版）

文章参考

听云Browser帮助文档

http://doc.tingyun.com/browser/html/yemianjiancexiangguanzhibiao.html

 

美团性能分析框架和性能监控平台   

https://tech.meituan.com/performance-framework-and-platform.html

 

前端性能——监控起步

https://www.cnblogs.com/chuaWeb/p/PerformanceMonitoring.html

 

浏览器的工作原理：新式网络浏览器幕后揭秘

https://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/

Why Performance Matters

https://developers.google.com/web/fundamentals/performance/why-performance-matters/