performance性能监控

详细看MDN上

setTimeout(() => {
    
    
const {
    
    
	fetchStart, // 开始访问
	requestStart, // 请求的开始
	responseStart, // 响应的开始
	responseEnd, // 响应的结束
	domIntereactive, // 可交互的时间的点
	domContentLoadedEventEnd, // dom加载完毕 + domContentLoad完成的事件 $(function(){})
	loadEventStart // 开始访问
} = performance.timing
	
	let TTFB (time to first bate) = requestStart - requestStart  // 首字节返回的事件 服务器的处理能力
 
 	let TTI (time to Intereactive) = domIntereactive - fetchStart // 整个的一个交互的时长
 
 	let DCL (DOMContentLoaded)= domContentLoadedEventEnd - fetchStart // DOM整个加载完毕
 
 	let L (onLoad)= loadEventStart - fetchStart // 所有资源加载完毕用的时长

	const paint = performance.getEntriesByType('paint')

	console.log(paint[0].startTime) // FP只是画像素的
	console.log(paint[1].startTime) // FCP dom元素要有内容才行
}, 3000)

// 监听有意义的元素渲染时间
new performanceObserver((entryList, observer) => {
    
    
	console.log(entryList.getEntries()[0])
	observer.disconnect()
}).observe({
    
     entryTypes:['element'] })

// LCP 监听最大元素渲染时间
new performanceObserver((entryList, observer) => {
    
    
	const list = entryList.getEntries()
	console.log(list[list .length - 1])
	observer.disconnect()
}).observe({
    
     entryTypes:['largest-contentful-paint'] })

网络策略优化

1.减少http请求
2.合理设置服务器缓存，提高服务器处理速度。（强制缓存、对比缓存）
3.避免重定向重定向会降低响应速度
4,dns-prefetch 进行DNS预解析 link标签上加dns-prefetch
5.采用域名分片技术，将资源放到不同的域名下。接触同一个域名最多处理6个TCP链接问题。
6.采用CDN加速加快访问速度。（指派最近、高度可用）
7.gzip 压缩优化对传输资源进行体积压缩（html、js、css）
8.加载数据优先级：preload（预先请求）prefetch（浏览器空闲时预判加载）将数据缓存到HTTP缓存中

关键渲染路径： js——样式计算——布局（回流）——重绘——合成

回流（重排）Reflow:添加元素、删除元素、修改大小、移动元素位置、获取位置相关信息
重绘 Repaint: 页面中元素样式的改变并不影响他在文档流中的位置

如何减少重回回流

1.脱离文档流
2.渲染时给图片增加固定宽高
3.多使用css3动画
4.可以使用style=“will-change: transform;”>将dom提取到单独的图层中

重排的时机是在js执行后所以尽量少去将这些操作放在函数中，比如在函数中多次获取dom位置，应当在外面获取好了在浏览器里面使用

performance性能监控

如何减少重回回流

猜你喜欢