刚开始接触vue觉得vue真是好,用起来好方便呀,与以往的用jquery类库写逻辑,简直方便的要死。网上也都是对vue的好评,但是呢我现在的感觉就是vue真坑,真垃圾。
     先说的我们项目遇到到问题。我们在开发一个语音聊天的软件,利用c++做的外壳,内部逻辑用前端代码完成。刚开始做技术选型的时候大家都很高兴用vue。项目完成后用户量增多导致特别的卡,input输入框打字的时候就会卡顿。而且软件的cpu占用达到了恐怖的30%,我们做的只是一个非常轻量级的语音软件。并没有多复杂的交互。cpu占用居然比我打开ps都高。后来经过一段时间的排查找到原因了,罪魁祸首就是vue框架。
      vue之所以会这么的烧cpu主要是它的数据模型。我们的网站也是用vue开发的但是没用脚手架。每个页面的data对象中参数不多,最多就几十个,整个数据量很小。而且浏览器的性能优化做的好,不存在卡顿现象。但是在语音软件中,一个房间列表的数据模型就上百个,一个房间中人数对应的数据模型,在人多的时候也达到了上百个。这只是一部分,还有聊天信息的数据模型,两百多条。一个data对象内部的所有key值加起来上万个。只要有一个改变,这拥有上万个key值的data对象就会从上至下从外到内遍历一遍,虽然它只有在某个值改变的时候才去操作对应的dom。但是数据模型的一遍又一遍刷新,检查,这已经是在严重的消耗性能了。而且我上面有个一秒中定时器,虽然只改变一个参数,但是我检测到整个数据模型在不停的刷,计算属性的方法和一些绑定属性的方法都在不停的调用。当然这个问题现在发现已经是没法解决了。网上看了很多vue优化方案都是治标不治本。
      后来没办法就把数据模型中的大的数组去掉,用自己写的原生方法处理,用的也是类似mvvm的思路。只是改变单个属性不会在导致所有属性的遍历。css的也做了一些优化,cpu下降了10%。也还好现在的用户量可以满足。
     我个人觉得vue做些简单的项目是很好的,很大程度上节省了代码量。但要做一个大型的项目,觉得并不合适。可以用vue的思路,自己在底层搭建mvvm架构,采用这种方式去写,性能上我觉得会有很大的提升,因为我真正尝试...,

vue性能的更多相关文章

  1. Vue 性能优化track-by

    Vue 是一个MVVM框架 所谓mvvm就是model-->view,view-->model. vue帮助我们实现了自动绑定.省点我们用JQUERY,zpeto 去操作dom的麻烦. 主 ...

  2. 浅谈vue性能优化

    基础优化 所谓的基础优化是任何 web 项目都要做的,并且是问题的根源.HTML,CSS,JS 是第一步要优化的点 分别对应到 .vue 文件内的,<template>,<style ...

  3. Vue性能优化

    今天来谈一谈Vue中一些性能优化的问题,仅仅是个人使用中的一些小心得,来,今天我一句废话不多说,直接上内容好吧 1.v-if和v-show的使用, 我们都知道这两个都可以控制显隐,那我们用哪个呢,个人 ...

  4. VUE性能优化总结

    1.v-show,v-if 用哪个? 在我来看要分两个维度去思考问题: 第一个维度是权限问题,只要涉及到权限相关的展示无疑要用 v-if, 第二个维度在没有权限限制下根据用户点击的频次选择,频繁切换的 ...

  5. vue nextTick深入理解-vue性能优化、DOM更新时机、事件循环机制

    一.定义[nextTick.事件循环] nextTick的由来: 由于VUE的数据驱动视图更新,是异步的,即修改数据的当下,视图不会立刻更新,而是等同一事件循环中的所有数据变化完成之后,再统一进行视图 ...

  6. Vue性能优化之组件按需加载(以及一些常见的性能优化方法)

    关于Vue中的按需加载我就简单介绍一下:大概就是我们所有的东西都会在app.js里面,但是我们并不需要把所有的组件都一次性加载进来,我们可以在需要它的时候再将它加载进来,话不多说,开车! 1.webp ...

  7. 对vue nextTick深入理解-vue性能优化、DOM更新时机、事件循环机制

    一.定义[nextTick.事件循环] nextTick的由来: 由于VUE的数据驱动视图更新,是异步的,即修改数据的当下,视图不会立刻更新,而是等同一事件循环中的所有数据变化完成之后,再统一进行视图 ...

  8. 前端vue性能优化

    一:代码层次优化 1.1.v-if 和 v-show 区分使用场景 v-if 是 真正 的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建:也是惰性的:如果在初始渲染时 ...

  9. vue性能优化2--引入cdn

    当我们加载页面时,需要将我们所需要的一些依赖加载到当前会话中然后再开始执行,如果我们首屏,模块比较多是,需要等待的时间会比较长,而且.浏览器内存最多执行四十个进程,需要等到加载完前面的才能执行后面的代 ...

随机推荐

  1. Windows下安装配置MongoDB

    Windows下安装配置MongoDB 一,介绍 MongoDB 是由C++语言编写的,是一个基于分布式文件存储的开源数据库系统.在高负载的情况下,添加更多的节点,可以保证服务器性能. MongoDB ...

  2. mysql一个非常实用解决sql查询优化的函数explain

    前言: 项目中有个表有几万条数据,然后还要关联其他表,查询条件也有点多,再没有其他查询条件下,默认时间查询条件如果是查一年的数据的话,查询时间那是慢得可怕. 找总监去优化sql,看他用了一个sql函数 ...

  3. MySQL中怎么对varchar类型排序问题(转)

    在mysql默认order by 只对数字与日期类型可以排序,但对于varchar字符型类型排序好像没有用了,下面我来给各位同学介绍varchar类型排序问题如何解决.   今天在对国家电话号码表进行 ...

  4. Spring MVC 使用介绍(十四)文件上传下载

    一.概述 文件上传时,http请求头Content-Type须为multipart/form-data,有两种实现方式: 1.基于FormData对象,该方式简单灵活 2.基于<form> ...

  5. react 16 ssr的重构踩坑

    ssr 服务端不能识别前端的window.特别是首屏渲染的数据需要用到window对象(比如href += location.search); 服务端不能加载图片,css文件. require.ext ...

  6. 20175221 《Java程序设计》第8周学习总结

    20175221   <Java程序设计>第8周学习总结 教材学习内容总结 第十五章主要内容有:泛型.链表.堆栈.散列映射.树集以及树映射. 泛型: 声明:可以使用class名称<泛 ...

  7. myeclipse使用maven整合ssh配置

    最近写项目,由于公司需求,使用myeclispe来开发maven项目,关于maven就不再介绍,无论是jar包管理功能,还是作为版本构建工具,优点自然是很多,下面先贴出所需要的配置文件. maven所 ...

  8. 对于Sobel算子的学习

    本来想说很多目前对于 Sobel 算子的认识,但最终还是觉得对于其掌握程度太低,没有一个系统的理解,远不足以写博客,但为了12月不至于零输出,还是决定把自己学习过程中找到的相关资料进行分享. 等到一月 ...

  9. 【Unity游戏开发】你真的了解UGUI中的IPointerClickHandler吗?

    一.引子 马三在最近的开发工作中遇到了一个比较有意思的bug:“TableViewCell上面的某些自定义UI组件不能响应点击事件,并且它的父容器TableView也不能响应点击事件,但是TableV ...

  10. CSS定位 深入理解定位(position)的偏移

    前言 CSS有三种基本的布局机制:普通流.浮动和绝对定位.利用定位,可以准确地定义元素框相对于其正常位置应该出现的位置,或者相对于父元素.另一个元素甚至浏览器窗口本身的位置.但元素究竟如何定位,定位到 ...