前端性能优化学习（慕课网）笔记

一，指标的讲解

1，network

打开谷歌浏览器：

以淘宝为例，刷新加载：
它是电商网站，首页上有很多图片，动图之类的东西，肯定是做过很多优化的。

点进瀑布图：拉动这里可以调整查看的区域和状态，让瀑布图更大些：
瀑布图中有两根线，一根蓝线是dom加载完成的时间，而红线则是页面所有资源加载完成的时间。


或者悬浮后按回车，进入timing：
图中标签表示我记笔记的顺序：

如果想保存本次页面加载结果，可以在瀑布图空白处右键，然后保存为.har文件即可。

2，lighthouse

它是google集成到浏览器里面的一个性能测量工具。
我们先只看performance

至于衡量标准：speed index控制在4s内的都是非常好的了。

3,用户体验

上面两点讲的都是关于网络加载的性能。
而关于性能，我们其实还关注另一个层面的东西：用户的体验。
主要是要做到三点：

1，交互的响应需要足够快。（例如切换导航时，很快显示界面）
2，画面足够流畅，不会一卡一卡的。指标是1s达到60帧。（ctrl+shift+p然后搜framse就可以看到fps检测工具）
3，异步请求的响应速度（1s为标准）如果文件太大，就压缩，还不行，就需要在前端做出处理，及时地给用户反馈，比如说给个页面加载中的loading的动画等都是可以的。

二，RAIL测量模型

它是一个量化的指标，可以告诉你，做成什么样，前端性能优化才是合格的。

1，rail的评估标准

1，响应的时间：处理事件的时间应该在50ms内完成
2，动画：需要每隔10ms产生一帧（浏览器绘制一帧会消耗掉6ms左右）16*60=960差不多1s,也就是之前说的一分钟60帧
3，空闲：尽可能地增加空闲时间（像大量地计算类地工作应该放在后端做。）
4，加载：5s内完成内容加载，并可以进行交互

2，性能测量工具

还有ctrl+shift+p打开输入框，打开以下几个面板，以后直接按esc就会出现了：

三，web平台的实时检测的API

我们常常还需要检测用户使用时的性能情况，就需要Web性能API

1，利用timing对象查看各个阶段的时间

在页面的js代码开始处写这段代码：

window.addEventListener('load',(event)=>{
		//Time to Interacrtive 可交互时间
		//先取得这个对象，里面存储着各个阶段的时间
		let timing =performance.getEntriesByType('navigation')[0]
		let tti=timing.domInteractive-timing.fetchStart
		console.log("首次可交互时间:"+tti)
	})

就可以得到页面首次可以交互的时间：

其余的时间点也可以这样获得，它们都存储在timing对象里面：

DNS 解析耗时: domainLookupEnd - domainLookupStart
TCP 连接耗时: connectEnd - connectStart
SSL 安全连接耗时: connectEnd - secureConnectionStart
网络请求耗时 (TTFB): responseStart - requestStart
数据传输耗时: responseEnd - responseStart
DOM 解析耗时: domInteractive - responseEnd
资源加载耗时: loadEventStart - domContentLoadedEventEnd
First Byte时间: responseStart - domainLookupStart
白屏时间: responseEnd - fetchStart
首次可交互时间: domInteractive - fetchStart
DOM Ready 时间: domContentLoadEventEnd - fetchStart
页面完全加载时间: loadEventStart - fetchStart
http 头部大小： transferSize - encodedBodySize
重定向次数：performance.navigation.redirectCount
重定向耗时: redirectEnd - redirectStart

	//监听查看各个阶段花费的时间
	window.addEventListener('load',(event)=>{
		//Time to Interacrtive 可交互时间
		//先取得这个对象，里面存储着各个阶段的时间
		let timing =performance.getEntriesByType('navigation')[0]
		//设定需要查看的时间
		let ttfb=timing.responseStart-timing.fetchStart
		let datatran=timing.responseEnd-timing.requestStart
		let dataLoad=timing.loadEventStart-timing.domContentLoadedEventEnd
		let tti=timing.domInteractive-timing.responseStart
		let baiping=timing.responseEnd - timing.fetchStart
		let finish=timing.loadEventStart - timing.fetchStart
		console.log("网络请求耗时:"+ttfb)
		console.log("数据传输耗时:"+datatran)
		console.log("资源加载耗时:"+dataLoad)
		console.log("白屏时间:"+baiping)
		console.log("首次可交互时间:"+tti)
		console.log("页面完全加载耗时:"+finish)
		
	})

2，监听页面的切换

因为有时候比如说视频资源，如果用户切换走了，就可以让他设置成暂停，这样就可以省出主线程。
这就需要监听用户页面的切换：

//监听页面的切换
	let vEvent ='visibilitychange'
	if(document.webkitHidden != undefined){
		//wibkit事件名称
		vEvent='webkitvisibilitychange'
	}
	function visibilitychanged(){
		if(document.hidden || document.webkitHidden){
			console.log("页面已经切换走了")
		}else{
			console.log("页面正在使用")
		}
	}
	document.addEventListener(vEvent,visibilitychanged,false)