前端性能优化——性能监控

基础概念

网页出现白屏原因
网页从白屏到内容展示经历的过程

TTFB：Time To First Byte，首字节时间
FP：First Paint，首次绘制，绘制Body
FCP：First Contentful Paint，首次有内容的绘制，第一个dom元素绘制完成
FMP：First Meaningful Paint，首次有意义的绘制
TTI：Time To Interactive，可交互时间，整个内容渲染完成
对应如下图：

FP仅有一个div根节点
FCP包含页面的基本框架，但没有数据内容
FMP包含页面的所有元素及数据

这与vue的几个生命周期类似：
created：触发数据获取，页面内容为空节点
mounted：页面首次渲染，包含基本的框架结构
updated：数据获取完成，触发视图更新，视图内容会发生变化

长任务
简单来说，任何在浏览器中执行超过50ms的任务，都是long task
long task会长时间占据主线程资源，进而阻碍了其他关键任务的执行和响应，造成页面卡顿

代码监控

调用PerformanceObserver来获取性能指标数据

<script>
	const observer = new PerformanceObserver((list) => {
		for(const entry of list.getEntries()){
			console.groupCollapsed(entry.name);
			console.log(entry.entryType);
			console.log(entry.startTime);
			console.log(entry.duration);
			console.groupEnd(entry.name);
		}
	})	
	observer.observe({entryTypes:['longtask','frame','navigation','resource','mark','measure','paint']});
</script>

获取结果：

开始了吗？页面开始加载了吗？得到了服务端的回应吗？
首次绘制、首次内容绘制 First Paint (FP) / First Contentful Paint (FCP)

有用吗？有足够用户期望看到的内容被渲染出来了吗？
首次有效绘制、主要元素时间点 First Meaningful Paint (FMP) / Hero Element Timing

能用吗？用户能够与我们的页面交互了吗？还是依然在加载？
可交互时间点 Time to Interactive (TTI)

好用吗？交互是否流畅、自然、没有延迟与其他的干扰？
慢会话 Long Tasks (从技术上来讲应该是：没有慢会话)

Lighthouse使用

npm install -g lighthouse
lighthouse https://www.baidu.com/ --view

基于node环境，node版本10+以下会报下面错误，更新node版本即可

性能检测结果