前端性能指标与计算

  new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log('LCP candidate:', entry.startTime, entry);
  }
}).observe({type: 'largest-contentful-paint', buffered: true});

...
<script>
...
export default {
	...
	methods: {
		...
		// 获取组织树数据
    	getOrgTreeData () {
			this.calcStartTime = new Date().getTime();
			getTreeData()
        		.then((res) => {
					if (res.code === '000000') {
            			this.data = res.data
            			this.data2 = res.data
            			this.allDataTree = JSON.parse(JSON.stringify(res.data))
            			this.currentTree = JSON.parse(JSON.stringify(this.allDataTree))
						this.$nextTick(() => {
							let endTime = new Date().getTime();
							let time = endTime - this.calcStartTime;
							console.warn('---开始时间---'+ this.calcStartTime);
						    console.warn('---结束时间---'+endTime);
							console.warn('---结算后耗时---'+time);
						})
          			 }
				 })
		  },
		...
	}
}
</script>
...

...
// #ifdef APP-PLUS
Vue.mixin({
	onLaunch(options) {
		uni.console.log('---mixin onLaunch---')
		uni.console.log(options)
		plus.runtime.getProperty(plus.runtime.appid, function(wgtInfo) {
		    // uni.console.log('name: ' + wgtInfo.name);
		    // uni.console.log('version: ' + wgtInfo.version);
		    // uni.console.log('code: ' + wgtInfo.version.code);
		    // uni.console.log('appId: ' + wgtInfo.appid);
			// 应用加载首页面的总时间，从开始加载首页面到首页面加载完成，单位为ms https://www.html5plus.org/doc/zh_cn/runtime.html#plus.runtime.launchLoadedTime
		    uni.console.log('--plus库统计应用加载首页面的总时间--: ' + plus.runtime.launchLoadedTime);
			uni.console.log('--应用启动时间戳--: ' + plus.runtime.startupTime);
		});
		let m_launch_time = new Date().getTime();
		uni.console.log('---launch_time---: ' + m_launch_time);
		this.globalData = {
			...this.globalData,
			launchTime: m_launch_time,
		}
	},
	onLoad(query) {
		uni.console.log('---mixin onLoad---')
		let pages = getCurrentPages()
		let page = pages[pages.length - 1]
		if(page) {
			let pagePath = page.route
			uni.console.log(pagePath)
			let mGlobalData = getApp().globalData
			let page_load_start_time = new Date().getTime();
			uni.console.log('---页面开始加载时间---: ' + page_load_start_time);
			mGlobalData[pagePath] = {
				path:pagePath,
				pageLoadStartTime:page_load_start_time,
			}
			if(!mGlobalData.firstLoadTime) {
				// 计算首页加载耗时, page_load_start_time - launchTime
				mGlobalData.firstLoadTime = page_load_start_time - mGlobalData.launchTime
				uni.console.log('---首页加载耗时---: ' + mGlobalData.firstLoadTime);
			}
		}
	},
	onReady() {
		uni.console.log('---mixin onReady---')
		let pages = getCurrentPages()
		let page = pages[pages.length - 1]
		if(page) {
			let pagePath = page.route
			uni.console.log(pagePath)
			let mGlobalData = getApp().globalData
			if(mGlobalData[pagePath]) {
				let page_render_end_time = new Date().getTime();
				// 计算页面加载总耗时,构建+渲染时间, page_render_end_time - pageLoadStartTime
				let page_load_time = page_render_end_time - mGlobalData[pagePath].pageLoadStartTime;
				uni.console.log(pagePath+ '---页面加载总耗时---: ' + page_load_time);
				mGlobalData[pagePath] = {
					path:pagePath,
					pageLoadTime:page_load_time,
				}
				// 若没有展示过首屏冷启动渲染总耗时,计算并展示
				if(!mGlobalData.firstRenderTime) {
					let first_render_time = mGlobalData.firstLoadTime + page_load_time
					uni.console.log('---首屏加载耗时---: ' + mGlobalData.firstLoadTime);
					uni.console.log(pagePath+ '---首屏冷启动渲染耗时总耗时---: ' + first_render_time);
					mGlobalData.firstRenderTime = first_render_time;
				}
			}
		}
	},
})
// #endif
...
const app = new Vue({
	...App
});
app.$mount();

...
<script>
...
export default {
	...
	methods: {
		...
		// 点击搜索触发函数
		queryInfo () {
			this.calcStartTime = new Date().getTime();
      		this.$refs.tree.filter(this.filterText)
      		this.$nextTick(()=>{
				let endTime = new Date().getTime();
				let time = endTime - this.calcStartTime;
				console.warn('---开始时间---'+ this.calcStartTime);
				console.warn('---结束时间---'+endTime);
				console.warn('---结算后耗时---'+time);
			})
		},
		...
	}
}
</script>
...