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. matlab实现频谱感知-认知无线电

    1.前言 \(\quad\) 频谱感知的方法有很多,比如匹配滤波探测,能量检测,静态循环特征探测等方法,然后最近因为在用硬件做能量检测,所以本文主要是说了如何用matlab实现能量检测,它的大概流程就 ...

  2. 机器人的运动范围（dfs）（leetcode 4.8 每日打卡）

    地上有一个m行n列的方格,从坐标 [0,0] 到坐标 [m-1,n-1] .一个机器人从坐标 [0, 0] 的格子开始移动,它每次可以向左.右.上.下移动一格(不能移动到方格外),也不能进入行坐标和列 ...

  3. 震荡指标（一）RSI指标

    相对强弱指数RSI是根据一定时期内上涨点数和涨跌点数之和的比率制作出的一种技术曲线.能够反映出市场在一定时期内的景气程度.由威尔斯.威尔德(Welles Wilder)最早应用于期货买卖,后来人们发现 ...

  4. JAVAweek6

    本周学习 Java语言基础:运算符[有所区别] 算术运算符 +(3+2) - * / %(取余,模运算) +(连接符)(3+''2'') ++ -- class VarDemo { //算术运算符 p ...

  5. 【Javaweb】Servlet* | 请求重定向【🖤🖤】

    请求重定向的含义 请求重定向,是指客户端给服务器发请求,然后服务器告诉客户端说.我给你一些地址,你去新地址访问,叫请求重定向(因为之前的地址可能已经废弃). 请求重定向的实现代码 请求重定向的第一种方 ...

  6. Fragment动态添加与管理

    activity_main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout ...

  7. 切换容器引擎为containerd

    确保模块载入: # 永久生效 cat <<EOF | sudo tee /etc/modules-load.d/containerd.conf overlay br_netfilter E ...

  8. MySQL运维15-一主一从读写分离

    一.读写分离介绍 读写分离,是把数据库的读和写分开操作,以应对不同的数据库服务器.主数据库提供写操作,从数据库提供读操作,这样能有效的减轻单台数据库的压力. 二.一主一从原理 MySQL的主从复制是基 ...

  9. 若依集成knife4j实现swagger文档增强

    若依集成knife4j实现swagger文档增强 本期全是干货,这里我就当你用的非常熟练了,在ruoyi-admin模块中pom文件里加入以下依赖 注:引用knife4j-spring-boot-st ...

  10. HP LoadRunner 11.00安装+破解+汉化

    里面包含多个破解码,最高支持6.5w个并发: https://blog.csdn.net/xianjie0318/article/details/78625980