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

问题排查

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

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

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

问题原因

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

问题解决

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

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

three.js项目引入vue，因代码编写不当导致的严重影响性能的问题，卡顿掉帧严重的更多相关文章

  1. Vue.js项目引入less文件报错解决

    解决方案: 需要局部安装vue-style-loader,less-loader,css-loader,vue-loader和less包(需注意就算全局安装以上包仍需局部安装) 即:npm i vue ...

  2. vue脚手架使用swiper /引入js文件/引入css文件

    1.安装vue-cli 参考地址:https://github.com/vuejs/vue-cli 如果不使用严格语法需要在后三项打no:(加了挺头疼的,老是报错,但是对自己的代码规范性也是有很大的帮 ...

  3. vue引入swiper vue使用swiper vue脚手架使用swiper /引入js文件/引入css文件

    vue引入swiper  vue使用swiper  vue脚手架使用swiper /引入js文件/引入css文件 ------------------------------------------- ...

  4. 实现分页数据请求的思路/Element UI(Plus)的分页模板（Vue3.x写法），（直接使用<script>引入vue.js）

    实现分页数据请求的思路/Element UI(Plus)的分页模板(Vue3.x写法),(直接使用<script>引入vue.js) 1. 效果图: 2.实现分页数据请求的思路:   分页 ...

  5. 2019.2.1 现有vue-cli项目引入ESLint

    ESLint 不管是多人合作还是个人项目,代码规范是很重要的.这样做不仅可以很大程度地避免基本语法错误,也保证了代码的可读性. 可能在早期建立项目的时候,因为一些原因没有引入eslint.单元测试等, ...

  6. Python--前端基础之JavaScript（JS的引入方式，JS的变量、常量和标识符，JS的数据类型，运算符，流程控制，JavaScript的对象）

    JavaScript介绍 JavaScript是运行在浏览器端的脚步语言,JavaScript主要解决的是前端与用户交互的问题,包括使用交互与数据交互. JavaScript是浏览器解释执行的,前端脚 ...

  7. 在老项目中单独引入vue.js,使用自定义指令

    传统项目,做一个表格渲染,然而数据过多,传统方式费时费力,便引入vue和elelment  ui,由于表格需要渲染的数据过多一个表格上千条,导致切换tab更新表格时缓慢,体验太差,于是做了自定义指令, ...

  8. vue项目 引入js文件

    例如我想将laydate.js引到vue项目中 将用到的js文件放到static文件夹内,在项目的根目录下的index.html内引入 <script src="static/js/l ...

  9. Vue.js项目模板搭建

    前言 从今年(2017年)年初起,我们团队开始引入「Vue.js」开发移动端的产品.作为团队的领头人,我的首要任务就是设计 整体的架构 .一个良好的架构必定是具备丰富的开发经验后才能搭建出来的.虽然我 ...

  10. Vue.js项目集成ElementUI

    Vuejs实例-02Vue.js项目集成ElementUI   Vuejs实例-02Vue.js项目集成ElementUI 0:前言 vue.js的UI组件库,在git上有多个项目,我见的使用者比较多 ...

随机推荐

  1. The 2021 ICPC Asia Regionals Online Contest (II) L Euler Function

    思路来源:Zed222 如果一个区间里的数都有这个质数,那么我们就直接利用性质\(\phi(n * p) = \phi(n) * p\),如果没有这个区间中有没有这个质数的,那么就退化到了单点修改,当 ...

  2. 一款实用的.NET Core加密解密工具类库

    前言 在我们日常开发工作中,为了数据安全问题对数据加密.解密是必不可少的.加密方式有很多种如常见的AES,RSA,MD5,SAH1,SAH256,DES等,这时候假如我们有一个封装的对应加密解密工具类 ...

  3. 多项目git账户用户名和邮箱设置以及局部github代理

    因为公司使用自建的gitlab服务器所以需要配置两个git账户分别用来访问公司仓库和自己的github仓库. 前言: 首先给大家梳理一下多用户名或者说多邮箱使用git的理解误区.我们需要知道的是我们的 ...

  4. 吉特日化MES配料工艺参数标准版-第二版

    作者:情缘 出处:http://www.cnblogs.com/qingyuan/ 关于作者:从事仓库,生产软件方面的开发,在项目管理以及企业经营方面寻求发展之路 版权声明:本文版权归作者和博客园共有 ...

  5. SpringBoot内容协商机制

    1.是什么? SpringBoot内容协商机制是一种实现了内容协商(Content Negotiation)的Web服务器,它可以根据客户端请求的不同,将响应返回给客户端. 在传统的Web服务器中,如 ...

  6. flask蓝图（这玩意就是django的子应用）

    蓝图的概念类似django的子应用,作用就是分模块开发,有关联的都放在一起. 蓝图的创建步骤: 新建一个包(一个包就是一个模块.等同于一个子应用) 在包的__init__.py中创建蓝图对象 . 蓝图 ...

  7. Spring源码学习之Web数据绑定器WebDataBinder

    WebDataBinder 1.描述 特殊的数据绑定器用于从web请求参数到JavaBean对象的数据绑定.专为web环境,但不依赖于Servlet API;作为更具体的DataBinder变体的基类 ...

  8. URL安全的Base64算法

    URL安全的Base64算法 base64是取3个字节(24位)的数据强行组成4个字节(32位)的数据做为一个分组,24位分成4个字节的话,每个字节分到6位,然后前面补两位0,然后这个字节的值位索引去 ...

  9. JavaFx之WebView（二十五）

    JavaFx之WebView(二十五) jfx的web引擎已经几百年没更新,早就放弃了,写写demo还是不错.jdk8u202还能跑vue 3.0项目 import javafx.applicatio ...

  10. rasa train nlu详解：1.1-train_nlu()函数

      本文使用<使用ResponseSelector实现校园招聘FAQ机器人>中的例子,主要详解介绍train_nlu()函数中变量的具体值. 一.rasa/model_training.p ...