zoukankan      html  css  js  c++  java
  • three.js项目引入vue,因代码编写不当导致的严重影响性能的问题,卡顿掉帧严重

    three.js项目引入vue,因代码编写不当导致的严重影响性能的问题,卡顿掉帧严重

    问题排查

     使用谷歌浏览器的Performance分析页面性能

    可以看到vue.js的reactiveGetter方法耗时最长,刚开始看到这个觉得很奇怪,三维卡顿跟vue怎么会有关系呢?

    vue.js的reactiveGetter方法调用了很多三维模型的方法,我引入vue是为了方便做增删改查,它不应该频繁调用three.js的方法,所以这是不正常的

     

     

    问题原因

    我把火焰模型对象、事件位置精灵标签对象、路线展示相关的数据放到了vue对象的data中,导致vue频繁监控三维模型相关的大量变量及属性,使性能严重下降

    问题解决

    把fire、planLocation、modelData这三个三维相关的数据,放到vue对象的外面

    然后问题完美解决,展示了火焰效果和逃生路线后,频率依然是60FPS,没有受到影响,碰撞检测开启后也很流畅,在场景中飞行也很流畅

  • 相关阅读:
    schema的详解
    递归删除文件
    如何写一个schema文件
    如何写一个dtd文件
    WebService随笔记录
    文件分割
    三级数据显示
    数据库锁表查询及解除方法
    list分页
    JXLS模板导出多个sheet文件
  • 原文地址:https://www.cnblogs.com/s0611163/p/15580810.html
Copyright © 2011-2022 走看看