Vue性能优化
今天来谈一谈Vue中一些性能优化的问题,仅仅是个人使用中的一些小心得,来,今天我一句废话不多说,直接上内容好吧
1.v-if和v-show的使用,
我们都知道这两个都可以控制显隐,那我们用哪个呢,个人觉得要从两个方面入手来确定使用哪个,
1.权限的问题,只要涉及到权限相关的展示用v-if比较好
2.切换地频率,如果频繁的切换我们用v-show,不频繁的切换用v-if
其实两者各有优缺,就看你是怎么选择了,用v-if能减少页面中的DOM总数,加快渲染的速度,而且我们要清楚一个事情
v-if是'真正的'条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建.
v-if也是惰性的,如果在初始渲染时条件为假,那么什么都不做- - 直到条件第一次为真的时候才会开始渲染条件块,相比之下,v-show
就简单得多- - 不管初始条件是什么,元素总会被渲染,并且只是简单的基于css进行切换.
2.使用动画时可以用CSS启动硬件加速,
CSS animations, transforms 以及 transitions 不会自动开启GPU加速,而是由浏览器的缓慢的软件渲染引擎来执行,那我们怎样才可以切换到GPU模式呢,很多浏览器提供了某些触发 的CSS规则,可以用transform: translateZ(0); 来开启硬件加速,transform: translate3d(0, 0, 0)也可以。
3.组件懒加载,
这个很有用的,例如,当我们在一个很长的页面时,用户可能只会去看前一两屏,那剩下没被用用户观看的组件也会被加载,这样就会浪费我们的资源,我们使用组件懒加载在阻止性能浪费
4.为item设置唯一key值,
方便Vuex的内部机制在循环时能够准确的找到该条列表数据
5.减少watch的数据,在有可能的前提下,减少没有必要的state数据
因为当watch的数据比较大的时候,会大量消耗性能,所以我们可以使用事件中央总线或者Vuex进行数据的变更操作
为什么要减少没有必要的state数据,这和Vue的响应式原理有关,Vue会使用 Object.defineProperty 把这些属性全部转为 getter/setter ,并建立相应的Watcher来监控,这就造成一个问题,当我们的state特别多时,对应的Watcher也就会特别多,容易造成卡顿,这也是为什么在大型项目(状态特别多)我们会选用React而不用Vue的原因
6.图片按需加载,这个算是基础操作了吧
7.SSR(服务端渲染)
如果项目比较大,首屏无论怎么做优化,都出现闪屏或者一阵黑屏的情况。可以考虑使用SSR(服务端渲染)
8.骨架屏加载
在页面加载资源较多,可能会出现白屏和闪屏的情况,体验不好,这个时候我们可以使用骨架屏
(骨架屏就是在页面内容未加载完成的时候,先使用一些图形进行占位,待内容加载完成之后再把它替换掉)
9.打包时的优化
有时候我们打完包之后发现包会很大,那怎么解决这个问题呢,其实很简单,在项目中,我们不是引入了诸如axios,vuex,vue-router等的包吗,那我们将这些包剔除出去,
换用cdn直接引入到我们项目的根目录的html当中,
注意在 webpack 里有个 externals配置,可以忽略不需要打包的库
目前的总结的就是这些,如果以后想起来还有别的,我会再回来添加的,在下告辞,不用想我,我去用个早膳,一会就回来好吧
Vue性能优化的更多相关文章
- Vue性能优化之组件按需加载(以及一些常见的性能优化方法)
关于Vue中的按需加载我就简单介绍一下:大概就是我们所有的东西都会在app.js里面,但是我们并不需要把所有的组件都一次性加载进来,我们可以在需要它的时候再将它加载进来,话不多说,开车! 1.webp ...
- 前端vue性能优化
一:代码层次优化 1.1.v-if 和 v-show 区分使用场景 v-if 是 真正 的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建:也是惰性的:如果在初始渲染时 ...
- 浅谈vue性能优化
基础优化 所谓的基础优化是任何 web 项目都要做的,并且是问题的根源.HTML,CSS,JS 是第一步要优化的点 分别对应到 .vue 文件内的,<template>,<style ...
- VUE性能优化总结
1.v-show,v-if 用哪个? 在我来看要分两个维度去思考问题: 第一个维度是权限问题,只要涉及到权限相关的展示无疑要用 v-if, 第二个维度在没有权限限制下根据用户点击的频次选择,频繁切换的 ...
- vue nextTick深入理解-vue性能优化、DOM更新时机、事件循环机制
一.定义[nextTick.事件循环] nextTick的由来: 由于VUE的数据驱动视图更新,是异步的,即修改数据的当下,视图不会立刻更新,而是等同一事件循环中的所有数据变化完成之后,再统一进行视图 ...
- 对vue nextTick深入理解-vue性能优化、DOM更新时机、事件循环机制
一.定义[nextTick.事件循环] nextTick的由来: 由于VUE的数据驱动视图更新,是异步的,即修改数据的当下,视图不会立刻更新,而是等同一事件循环中的所有数据变化完成之后,再统一进行视图 ...
- Vue 性能优化track-by
Vue 是一个MVVM框架 所谓mvvm就是model-->view,view-->model. vue帮助我们实现了自动绑定.省点我们用JQUERY,zpeto 去操作dom的麻烦. 主 ...
- vue性能优化1--懒加载
懒加载也叫延迟加载,即在需要的时候进行加载.随用随载.为什么需要懒加载?像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间 ...
- vue性能优化2--引入cdn
当我们加载页面时,需要将我们所需要的一些依赖加载到当前会话中然后再开始执行,如果我们首屏,模块比较多是,需要等待的时间会比较长,而且.浏览器内存最多执行四十个进程,需要等到加载完前面的才能执行后面的代 ...
随机推荐
- yesno孤立词识别kaldi脚本
path.sh主要设定路径等 export KALDI_ROOT=`pwd`/../../.. [ -f $KALDI_ROOT/tools/env.sh ] && . $KALDI_ ...
- SpringDataSolr 过滤(或者叫筛选)查询
// 被本类调用 private Map searchList(Map searchMap) { // 1.1关键字查询 SimpleHighlightQuery highlightQuery = n ...
- css插入背景图片底部有白边的解决方法
相信很多小伙伴遇到过用CSS插入背景图时,底部出现白边的情况,如下图: 个人总结了2个方法如下: 解决方法1:给图片都加上 vertical-align: middle属性.有时,移动端也会有类似 ...
- struts2框架学习笔记3:获取servletAPI
Struts2存在一个对象ActionContext(本质是Map),可以获得原生的request,response,ServletContext 还可以获得四大域对象(Map),以及param参数( ...
- git关于文件权限修改引起的冲突及忽略文件权限的办法
我们在使用git进行版本管理的时候,有时候只是修改了文件的权限,比如将pack.php修改为777,但其实文件内容并没有改变,但是git会认为此文件做了修改,原因是git把文件权限也算作文件差异的一部 ...
- Docker 部署Django项目
使用docker部署django项目也很简单,挺不错,分享下 环境 默认你已安装好docker环境 django项目大概结构 (p3s) [root@opsweb]# tree opsweb opsw ...
- DFSMN结构快速解读
参考文献如下: (1) Deep Feed-Forward Sequential Memory Networks for Speech Synthesis (2) Deep FSMN for Larg ...
- mysql 开发进阶篇系列 40 mysql日志之二进制日志下以及查询日志
一.binlog 二进制其它选项 在二进制日志记录了数据的变化过程,对于数据的完整性和安全性起着非常重要作用.在mysql中还提供了一些其它参数选项,来进行更小粒度的管理. 1.1 binlog-do ...
- PHP之高性能I/O框架:Libevent(三)
Swoole Swoole里也提供了一些直接操作底层epoll/kqueue事件循环的接口,可将其他扩展创建的socket.PHP代码中stream/socket扩展创建的socket等加入到Swoo ...
- Docker 本地导入镜像/保存镜像/载入镜像/删除镜像
1.Docker导入本地镜像 有时候我们自己在本地或者其它小伙伴电脑上拷贝了一份镜像,有了这个镜像之后,我们可以把本地的镜像导入,使用docker import 命令. 例如这里下载了一个 aliba ...