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. 大白话说Python+Flask入门（三）

    写在前面 今天状态很不好,我发现学这部分知识的时候,会出现溜号或者注意力无法集中的情况. 我能想到的是,大概率是这部分知识,应该是超出了我现在的水平了,也就是说我存在知识断层了,整体感觉真的是一知半解 ...

  2. 3种Sentinel自定义异常，你用过几种？

    Spring Cloud Alibaba Sentinel 是目前主流并开源的流量控制和系统保护组件,它提供了强大的限流.熔断.热点限流.授权限流和系统保护及监控等功能.使用它可以轻松的保护我们微服务 ...

  3. ASP.NET Core Web API设置响应输出的Json数据格式的两种方式

    前言 在ASP.NET Core Web API中设置响应输出Json数据格式有两种方式,可以通过添加System.Text.Json或Newtonsoft.JsonJSON序列化和反序列化库在应用程 ...

  4. Codeforces Round 903 (Div. 3)

    Codeforces Round 903 (Div. 3) A. Don't Try to Count 大概题意给你两个字符串a,b.a串可进行的操作为将整个a串复制到之前的a串后面(直接用a+a即可 ...

  5. 构建满足流批数据质量监控用火山引擎DataLeap

    更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 面对今日头条.抖音等不同产品线的复杂数据质量场景,火山引擎 DataLeap 数据质量平台如何满足多样的需求?本文 ...

  6. Pipeline模式应用

    本文记录Pipeline设计模式在业务流程编排中的应用 前言 Pipeline模式意为管道模式,又称为流水线模式.旨在通过预先设定好的一系列阶段来处理输入的数据,每个阶段的输出即是下一阶段的输入. 本 ...

  7. 基于.NET Core + Quartz.NET+ Vue + IView开箱即用的定时任务UI

    前言 定时任务调度应该是平时业务开发中比较常见的需求,比如说微信文章定时发布.定时更新某一个业务状态.定时删除一些冗余数据等等.今天给大家推荐一个基于.NET Core + Quartz.NET + ...

  8. 【matlab混沌理论】1.5.洛伦兹模型的分析

    洛伦兹方程用于生成y变量的图.这是对三种y初始条件敏感依赖的一个例子. 1.洛伦兹吸引子的y敏感依赖的着色图 input: % 洛伦兹方程用于生成y变量的图.x和z的初始条件保持不变,但y的初始条件在 ...

  9. 在蓝图中使用flask-restful

    flask-restful中的Api如果传递整个app对象,那么就是整个flask应用都被包装成restful. 但是,你可以只针对某个蓝图(django中的子应用)来进行包装,这样就只有某个蓝图才会 ...

  10. 【C++】关于全局变量和局部变量问题

    1 #include <iostream> 2 using namespace std; 3 4 void func(void); 5 6 static int count = 10; 7 ...