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. UIPath之Excel操作

    你的选择是做或不做,但不做就永远不会有机会. 一. UIPath操作Excel的两组方法 1. App Integration > Excel   特点: 对Excel里的操作必须包含在Exec ...

  2. python中面向对象有什么特点

    一:问题 python中面向对象有什么特点? 二:回答 python同其他面向对象语言一样,有3个特征:封装.继承.重写 简单理解就是:封装:把一系列属性和操作封装到一个方法里面,这样想要实现某种效果 ...

  3. Serializable是什么？为什么在Entity层要实现Serializable接口

    我在做房产信息管理系统时用到了Serializable接口 Serializable含义: 一个对象序列化的接口,一个类只有实现了Serializable接口,它的对象才能被序列化. Serializ ...

  4. 一文带你掌握C语言的循环结构

    C语言循环结构详解 在C语言中,循环结构是一种重要的控制结构,它允许我们重复执行一段代码,以达到特定的目的.循环结构可以帮助我们简化重复性的任务,提高代码的效率.本篇文章将深入探讨C语言中的循环结构, ...

  5. java-图片添加水印

    前言:    需求:需要在图片中添加水印,防止盗用   优缺点:     优点:保护版权,防止盗用     缺点 可能会影响图片的视觉效果:如果水印过大或过醒目,可能会影响图片的视觉效果. 可能会增加 ...

  6. MacOS｜matplotlib 无法显示中文 解决办法

    matplotlib 无法显示中文 解决办法 画图时,中文无法正常显示,如图 下载字体 点击这里获取字体 提取码: wnby 查看字体路径 在 python 环境中执行以下指令 import matp ...

  7. 吉特日化MES-业务架构第一版图

  8. 衡兰芷若成绝响,人间不见周海媚(4k修复基于PaddleGan)

    一代人有一代人的经典回忆,1994年由周海媚.马景涛.叶童主演的<神雕侠侣>曾经风靡一时,周海媚所诠释的周芷若凝聚了汉水之钟灵,峨嵋之毓秀,遇雪尤清,经霜更艳,俘获万千观众,成为了一代人的 ...

  9. Java8函数式编程应用

    我们经常提到,Java8是革命性的一个版本,原因就是正式引入了函数式编程,那Java的函数式编程在实际应用中到底有什么用呢?结合实际的应用,我整理出了函数式在Java的几个经典用途. 缓求值 惰性求值 ...

  10. 有了Excel和PPT，为什么我们还需要数据可视化工具？

    在当今信息时代,数据扮演着越来越重要的角色,而数据的可视化呈现正是一种强大的工具,能够帮助我们更好地理解和利用这些数据.虽然Excel和PPT在处理数据方面有着不可否认的作用,但在处理大规模.复杂数据 ...