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. Android反编译之修改应用包名

    前言 近期看B站数码区这条视频 [大米]破处理器,它能行吗?K50电竞版评测_哔哩哔哩_bilibili 时,发现了UP主的一个比较骚的操作: 嗯?apk文件可以直接拿来使用修改包名的?作为 Andr ...

  2. 普冉PY32系列(十二) 基于PY32F002A的6+1通道遥控小车III - 驱动篇

    目录 普冉PY32系列(一) PY32F0系列32位Cortex M0+ MCU简介 普冉PY32系列(二) Ubuntu GCC Toolchain和VSCode开发环境 普冉PY32系列(三) P ...

  3. 使用reposync工具将yum安装包保存到本地的方法

    使用reposync工具将yum安装包保存到本地的方法 版权声明:原创作品,谢绝转载!否则将追究法律责任. ----- 作者:kirin Anolis7/centos7 1.reposync 1.1. ...

  4. Vue入门（1）安装vue环境，创建Vue2 Vue3的项目并且安装IIS环境和发布到IIS

    Vue环境的搭建 一.     背景 vue的运行方式有两种 一种是在页面引用vue的js包, 一种是搭建脚手架来vue框架. 我们在这里使用的是第二种方式. 需要安装的软件 npm 16.13.1 ...

  5. 开源 Serverless 框架 Laf 性能优化实践

    介绍 Laf 是一个完全开源的 Serverless 框架,Laf 的 Node.js 运行时容器 (以下简称为 Runtime) 是 Laf 的函数执行环境,依托于 Express.js 框架.采用 ...

  6. 聊聊GLM基座模型的理论知识

    概述 大模型有两个流程:预训练和推理. 预训练是在某种神经网络模型架构上,导入大规模语料数据,通过一系列的神经网络隐藏层的矩阵计算.微分计算等,输出权重,学习率,模型参数等超参数信息. 推理是在预训练 ...

  7. Vue绑定Style和Class写法

    vue2写法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  8. 浅析 ArrayList

    by emanjusaka from https://www.emanjusaka.top/2023/12/java-arrayList 彼岸花开可奈何 本文欢迎分享与聚合,全文转载请留下原文地址. ...

  9. WinRM服务应用及配置说明

    一.什么是winRM服务 1.1.winRM服务介绍 Windows远程管理(WinRM)服务是Windows Server 2003 R2以上版本中一种新式的方便远程管理的服务.通过WinRM服务, ...

  10. Kafka 的基本使用

    Kafka 是一款分布式消息发布和订阅系统,最初的目的是作为一个日志提交系统来使用.现在,也可以作为一般的消息中间件来使用. 组件介绍 相关的组件介绍如下表所示: 组件 解释 Broker 实际 Ka ...