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. cookie和session的区别？一文讲透

    一.问题 cookie和session的区别? 二.回答 1.总结如下- cookie: - cookie存储于客户端本地,即浏览器缓存 - cookie存储着sessionId,作为后台sessio ...

  2. 倒计时4天！解锁《2023 .NET Conf China》 云原生分会场精彩议程

    .NET Conf China 2023 定于 12 月16 日于北京举办为期一天的技术交流,届时会有.NET 领域专家与大家一同庆祝 .NET 8 的发布和回顾过去一年来 .NET 在中国的发展成果 ...

  3. PyTorch 中自定义数据集的读取方法

    显然我们在学习深度学习时,不能只局限于通过使用官方提供的MNSIT.CIFAR-10.CIFAR-100这样的数据集,很多时候我们还是需要根据自己遇到的实际问题自己去搜集数据,然后制作数据集(收集数据 ...

  4. 文心一言 VS 讯飞星火 VS chatgpt （164）-- 算法导论13.1 4题

    四.用go语言,假设将一棵红黑树的每一个红结点"吸收"到它的黑色父结点中,使得红结点的子结点变成黑色父结点的子结点(忽略关键字的变化).当一个黑结点的所有红色子结点都被吸收后,它可 ...

  5. 23年底，我出齐了Spring boot,Spring cloud和案例方面的书，正在写一本面试书（代年终总结）

    年末了,再来总结一下吧,希望本人明年的年终总结文还能在博客园发. 这次总结的主题是本人出的java书.这几年本人出了不少书,其中有python.redis和Java方面的. 姑且不说其它,java方面 ...

  6. Python笔记二之多线程

    本文首发于公众号:Hunter后端 原文链接:Python笔记二之多线程 这一篇笔记介绍一下在 Python 中使用多线程. 注意:以下的操作都是在 Python 3.8 版本中试验,不同版本可能有不 ...

  7. 丝丝入扣,毫不违和,AI一键换脸和微调,基于Rope-Ruby,2024最新整合包

    AI换脸已经不是什么时新的技术了,从DeepFace到Facesweap,再到Roop.AI换脸技术中出现了一种名为"一键换脸"的方法,它不需要训练模型.这种方法利用了名为&quo ...

  8. 修改Ubuntu登录欢迎界面

    查看登录效果 run-parts /etc/update-motd.d ubuntu 与别的linux不同,直接修改/etc/motd文件重登录后无效.因为这里/etc/motd是一个符号链接,指向/ ...

  9. Spring MVC 源码解析

    本文的 MVC 基于传统的 Servlet 应用,所使用的 Spring Web 的环境为 Spring Boot 2.5.2 静态资源的加载 参考 Spring Boot 中给出的文档,原文如下: ...

  10. Blazor入门100天 : 身份验证和授权之 OpenID 与 OAuth2

    目录: OpenID 与 OAuth2 基础知识 Blazor wasm Gitee 码云登录 Blazor wasm GitHub 登录 Blazor wasm Google 登录 Blazor w ...