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. C语言有一分数序列: 2/1， 3 / 2,5/3,8/5,1 3/8,2 1/13... 求出这个数列得前20项之与。

    #include <stdio.h> void main() { int x, n = 20; double a = 2, b = 1, sws = 0; for (n; n >= ...

  2. centos7安装MySQL—以MySQL5.7.30为例

    centos7安装MySQL-以MySQL5.7.30为例 本文以MySQL5.7.30为例. 官网下载 进入MySQL官网:https://www.mysql.com/ 点击DOWNLOADS 点击 ...

  3. mysql--基础管理

    1.docker环境登录mysql PS C:\WINDOWS\system32> docker ps -aCONTAINER ID IMAGE COMMAND CREATED STATUS P ...

  4. 报错：bs4.FeatureNotFound: Couldn't find a tree builder with the features you requ

    安装 pip3 install lxml 即可

  5. Java数组最常用操作方法（Arrays类）

    最近在写代码的过程中发现我们很多地方都会处理数组,有时只是模糊的记得有API可以调用,每次都查文档很是费事儿,适当的总结希望提高开发速度 一.申明数组 数组的申明十分简单也十分的基础,注意第三种申明方 ...

  6. 重磅：谷歌发布最强大AI模型【Google Gemini】

    一.前言 北京时间 2023年12 月 13 日Google 发布了最新的 Gemini Pro模型,并且提供了 API 访问. 一个更好的消息是:Gemini Pro 可免费使用.赶紧体验起来吧~ ...

  7. django分页器使用

    https://docs.djangoproject.com/en/3.2/topics/pagination/ Django 提供了高级和低级方法来帮助您管理分页数据--即,分成多个页面的数据,并带 ...

  8. 安卓app填写域名和端口后点击保存没有反应（填错注册信息）

    解决方法:域名填写错误导致(仔细检查填写的域名和端口是否正常,注册的信息是否与填写的一致) ​ 域名是:3q9l302537.wicp.vip 中间有个字母 l 不是数字 1 填写成了:3q91302 ...

  9. 从零玩转第三方登录之WeChat公众号登陆-cong-ling-wan-zhuan-di-san-fang-deng-lu-zhi-wechat-gong-zhong-hao-deng-lu

    title: 从零玩转第三方登录之WeChat公众号登陆 date: 2022-09-03 16:32:57.876 updated: 2022-09-03 16:32:57.876 url: htt ...

  10. VisionPro学习笔记（6）——如何使用QuickBuild

    如果需要了解其他图像处理的文章,请移步小编的GitHub地址 传送门:请点击我 如果点击有误:https://github.com/LeBron-Jian/ComputerVisionPractice ...