Vue动画卡顿，动画帧数优化

项目中需要在地图中做一个风场粒子动画，原生js方法绘制的动画非常流畅，但是一放到Vue中就会变得很卡顿，帧数大概只有原来的30%，最终发现是因为map变量放在了date中重写了变量的getter/setter，导致获取某个属性或者改写某个属性的时间变长，对于动画来说，影响就非常大了。

代码中使用的是原生js的window.requestAnimationFrame()方法：告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。回调函数执行次数通常是每秒60次，执行次数通常与浏览器屏幕刷新次数相匹配。但是Vue对data中的数据做了数据劫持，因此回调函数执行的次数远远小于60次，帧数达不到，会显得动画非常卡顿。

 var AnimatedFunction = function () {if (canvasLayer)canvasLayer.needRedraw();globalID=requestAnimationFrame(AnimatedFunction);}

解决方案：将map在方法内部定义，或者深拷贝data中的值复制给map，由于一个map变量可能在多个方法内使用，也可以将map放在data和方法的外部去定义

<script type="module">
let map //外部定义
var vm = new Vue({el : "#app",data : {// map:'' //data中定义 getting/setting},mounted : function(){this.initMap();},methods:{initMap:function(){// let map = L.map("mapid", {  //方法内定义map = L.map("mapid", {minZoom: 4,maxZoom: 15,crs: L.CRS.EPSG3857,center: [37.005646, 114.52044],zoom: 4,zoomDelta: 0.5,fullscreenControl: false,zoomControl: false,attributionControl: false});L.tileLayer('http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}',{maxZoom: 12,minZoom: 4,pane: 'overlayPane'}).addTo(map);var windyLayer = new Windy(map);windyLayer.setData(stringToDate('20200705080000'),'ground');},}
});
</script>

不在data中定义map后动画运行速度和原生js速度基本一致

参考链接：https://www.yinchengli.com/2019/03/24/vue-performance-problem/

Vue动画卡顿，动画帧数优化相关推荐

小程序Android端movable-view拖拽卡顿掉帧的优化
背景: 最近项目中使用到movable-view来做一个拖拽排序的功能,等到功能都实现完成后到真机测试发现,拖拽动画在Android端存在严重的卡顿掉帧,及其不跟手,但是在IOS端却挺流畅.查阅Goo ...
需要显卡还是cpu_玩游戏卡顿，帧数低，是该升级显卡，还是升级cpu？
很多朋友用电脑来玩游戏,只管游戏能不能玩,对硬件知识了解甚少.所以在玩某些游戏是遇到卡顿丢帧等情况的时候,不知道是哪些硬件拖了后腿,从而进行盲目的升级,蒙对了还好,蒙错了可能就和升级之前没什么区别.大 ...
笔记本玩rust卡顿_帧数提升10 让你帧数提高10帧的笔记本1650游戏测评方法【rust吧】...
11月11日2AM苹果将发布独立CPU的电脑产品?评论(0) 神舟战神G9学习玩好--视频评测复习(0) 生意贵?英特尔努力打造3000元职场好伙伴点评(0) Upmaster验证索尼手柄与PS3兼容 ...
CSS3 动画卡顿性能优化解决方案--摘抄
最近在开发小程序,与vue类似,它们都有生命周期这回事. onLoad 监听页面加载 onReady 监听页面初次渲染完成 onShow 监听页面显示到底是什么意思? 所以这又触碰到了我的知识盲区, ...
Android 解决帧动画卡顿问题
Android帧动画一次性加载会造成ui卡顿,所以就有了这份代码.通过handle队列和Bitmap复用,每次加载一张并显示,可以解决帧动画卡顿问题. 使用方法: int[] right_res_id ...
android 动画卡顿分析工具
android 动画卡顿分析工具 Android应用性能优化之分析工具上一次记录了解决过度绘制的过程,这一次,想先弄清个概念性的东西,就是如何判断顺不顺畅? 这东西其实最初我自己也觉得有点废话,用起 ...
css鼠标拖拉卡顿_浅谈CSS3 动画卡顿解决方案
为什么会卡顿? 有一个前提必须要提,前端开发者们都知道,浏览器是单线程运行的.但是我们要明确以下几个概念:单线程,主线程和合成线程. 虽然说浏览器执行js是单线程执行(注意,是执行,并不是说浏览器只有 ...
lottie android 卡顿,说说动画卡顿的解决方案
CSS3 动画卡顿解决方案前端时间用animation实现H5页面中首页动画过渡,很简单的一个效果,首页加载一个客服头像,先放大,停留700ms后再缩小至顶部.代码如下首页加载动画 .welcom ...
CSS transition动画卡顿的探究
一.问题今天在使用css3的transition做动画过渡时,发现动画会卡顿,特此记录我发现卡顿的一些原因和笔记. 先给出结论: 在使用css3 transtion做动画效果时,transform实 ...

Vue动画卡顿，动画帧数优化

Vue动画卡顿，动画帧数优化相关推荐

最新文章

热门文章