首页 > 其他分享 >Performance选项卡笔记以及分析vue页面卡顿

Performance选项卡笔记以及分析vue页面卡顿

时间:2024-05-22 18:57:02浏览次数:22  
标签:分析 vue 选项卡 渲染 Performance 卡顿

各区域内容说明

Performance选项卡可以用于分析页面性能。

image

最上方红框区域内出现红色块的代表该时间段帧率不足60帧。

image

往下是cpu占用率。

image

卡顿原因主要耗时根据以下该图进行分析。

image

问题分析

由此可见本次分析主要导致卡顿的原因是因为js的执行所导致的。

可以选择时间区域进一步方法分析的时间段,从而分析更详细的信息。

image

该段区域表示渲染帧率的情况。

image

绿色是正常的,黄色是表示这一帧本来应该渲染的,但是没有得到完整的渲染。部分渲染帧撒大声地

image

image

可以通过该区域看到本段时间内所执行的任务。

image

通过Call Tree小选项卡从而进一步分析调用情况。

image

通过点击此处可以调到对应source选项卡,即可看到哪行代码所导致的执行时间。

image

image

从该调用树可以看到大概是因为事件高频触发导致数据变更引起响应式数据进行多次的渲染,引起了卡顿现象。

解决方案

该段代码主要是实现一个拖拽div进入一个vue-grid-layout区域,那么我猜测是因为drag事件触发频率太高所导致,所以在触发的事件加上一个节流函数(useThrottleFn),降低触发频率来解决卡顿现象。

image

image

使用节流函数后卡顿现象明显大幅下降。

image

优化前后对比

  • 优化前

image

  • 优化后

image

标签:分析,vue,选项卡,渲染,Performance,卡顿
From: https://www.cnblogs.com/oldking997/p/18206915

相关文章

  • vue项目的简单搭建,vue init 和 vue create 的区别
    本文基于:[email protected]@2.5.2vuecreate和init的区别是vue-cli3.x的初始化方式,目前模板是固定的,模板选项可自由配置,创建出来的是vue-cli3的项目,与cue-cli2项目结构不同,配置方法不同,具体配置方法参考官方文档。vuecreatedemo 使用create命令搭建vueinit是vue-c......
  • 离线文档(vue/react/element/element-plus/ands vue等等)
    特殊环境需要离线状态文档的请参考这里 可以在你所想要的东西在github的官方项目上找一个名字包含‘gh-page’或者‘get-page’的分支下载下来然后本地win+Rcmd输入npminstallsgo-g全局下载sgo之后在你下载下来的文件夹根目录cmd打开终端输入sgo--fallindex.html......
  • vue3 Cesium添加地形的办法
    Cesium自带有地形,awaitCesium.createWorldTerrainAsync({    requestVertexNormals:true,    requestWaterMask:true    });async需要自己添加在方法前面然后在newCesium.Viewer("map",{terrainProvider:provider})provide中,第一个......
  • vue搭建脚手架 出现问题Command vue init requires a global addon to be installed.
    使用vue-cli脚手架命令vueinitwebpackmy-App创建项目回车时显示Commandvueinitrequiresa global addontobeinstalled.Pleaserun yarn globaladd@vue/cli-initandtryagain. 解决方法:npminstall-g@vue/cli-init 然后创建项目,正常。 ......
  • vue2播放海康视频,利用海康H5player
    一、H5视频播放器开发包地址1、https://open.hikvision.com/download/5c67f1e2f05948198c909700?type=20 2、内容 3、主要用demo里面的文件 4、demo可以用来测试获取的视频流是不是可以播放,如果用vue开发过,应该有安装的node,在当前页面右键-->在终端中打开 (1)两者的......
  • 关于vue-baidu-map的一些记录
    这一阶段主要的内容是负责编写和百度地图相关的信息。(写到我想吐)仿照导航的页面效果。1.使用说明这里使用的是vue-baidu-map相关组件,这里我就不去说明如何去安装他们了,我们直接向下看。vue-baidu-map的操作手册的网址:VueBaiduMap(dafrok.github.io)。当然我这里介绍的那些只......
  • 2024.05.09 vue实现
    所花时间(包括上课): 1 h左右代码量(行):  200  左右搏客量(篇):1了解到的知识点: vue2的选项式api备注(其他): <!--components文件中的Person.vue--><template><divclass="person"><h2>姓名:{{name}}</h2><h2>年龄:{......
  • vue路由切换滑动效果
    1.增加页面路由{path:'/feedbackList',name:'feedbackList',component:()=>import('../views/feedbackList/index'),meta:{title:"反馈列表",index:1}},{path:'/feedback......
  • uniapp-vue3-oadmin手机后台实例|vite5.x+uniapp多端仿ios管理系统
    原创vue3+uniapp+uni-ui跨端仿ios桌面后台OA管理模板Uni-Vue3-WeOS。uniapp-vue3-os一款基于uni-app+vite5.x+pinia等技术开发的仿ios手机桌面OA管理系统。实现了自定义桌面栅格磁贴布局、多分屏滑动管理、自定义桌面小部件、辅助触控悬浮球等功能。支持编译到H5+小程序端+App端......
  • .Net6 web API (跨域请求 Vue项目)
    前沿在做新项目的时候跨域2中选择一种是,.net .net //添加跨域策略builder.Services.AddCors(options=>{options.AddPolicy("CorsPolicy",opt=>opt.AllowAnyOrigin().AllowAnyHeader().AllowAnyMethod().WithExposedHeaders("X-Pagina......