文档章节

Vue性能优化

雨落秋垣
 雨落秋垣
发布于 2018/11/30 15:33
字数 864
阅读 127
收藏 0

今天来谈一谈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的数据,

    因为当watch的数据比较大的时候,会大量消耗性能,所以我们可以使用事件中央总线或者Vuex进行数据的变更操作

  6.图片按需加载,这个算是基础操作了吧

  7.SSR(服务端渲染)

    如果项目比较大,首屏无论怎么做优化,都出现闪屏或者一阵黑屏的情况。可以考虑使用SSR(服务端渲染)

  8.骨架屏加载

    在页面加载资源较多,可能会出现白屏和闪屏的情况,体验不好,这个时候我们可以使用骨架屏

    (骨架屏就是在页面内容未加载完成的时候,先使用一些图形进行占位,待内容加载完成之后再把它替换掉)

 

目前的总结的就是这些,如果以后想起来还有别的,我会再回来添加的

© 著作权归作者所有

雨落秋垣

雨落秋垣

粉丝 31
博文 8
码字总数 10382
作品 3
深圳
前端工程师
私信 提问
vue和react的区别之我见

react和vue都是做组件化的,整体的功能都类似,但是他们的设计思路是有很多不同的。使用react和vue,主要是理解他们的设计思路的不同。 1.数据是不是可变的 react整体是函数式的思想,把组件...

凌霄光
2018/08/26
0
0
Vue常用经典开源项目汇总参考-海量

Vue常用经典开源项目汇总参考-海量   Vue是什么?   Vue.js(读音 /vju/, 类似于 view) 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。...

80368704
2018/06/29
0
0
深入浅出 - vue之深入响应式原理

高质量文章 谈,前端框架的『御剑之道』 2018你应该知道的Web性能信息采集指南 嗨,送你一张Web性能优化地图 为什么Vue使用异步更新队列? 聊聊我对现代前端框架的认知 深入浅出 - vue变化侦...

大灰狼的小绵羊哥哥
2018/11/18
0
0
[持续更新] VueConf 大会现场笔记

活动很赞,人很多,氛围非常好! 一、Vue 2017 现状与发展 By 尤雨溪 Evan You @ Vue 起源 2013 年 6 月:First Commit (Seed) 2013 年 12 月:第一次将项目名字 Vue 2014 年 2 月:第一次公...

阴明
2018/10/29
0
0
VuePress 1.0.0-alpha.30 发布,基于 Vue 的静态网站生成器

Features $core: 添加 参数,可以自动打开浏览器 (close: #1100)(#1109) (550317e) $core: 重启链接滚动到锚点的行为(close: #1107)(#1108) (7ad0a42) 变化 $core: 移除 并且重新定义滚动行...

程六金
2018/12/20
950
0

没有更多内容

加载失败,请刷新页面

加载更多

springboot2.0 maven打包分离lib,resources

springboot将工程打包成jar包后,会出现获取classpath下的文件出现测试环境正常而生产环境文件找不到的问题,这是因为 1、在调试过程中,文件是真实存在于磁盘的某个目录。此时通过获取文件路...

陈俊凯
今天
7
0
BootStrap

一、BootStrap 简洁、直观、强悍的前端开发框架,让web开发更加迅速、简单 中文镜像网站:http://www.bootcss.com 用于开发响应式布局、移动设备优先的WEB项目 1、使用boot 创建文件夹,在文...

wytao1995
今天
10
0
小知识:讲述Linux命令别名与资源文件的区别

别名 别名是命令的快捷方式。为那些需要经常执行,但需要很长时间输入的长命令创建快捷方式很有用。语法是: alias ppp='ping www.baidu.com' 它们并不总是用来缩短长命令。重要的是,你将它...

老孟的Linux私房菜
今天
12
0
《JAVA核心知识》学习笔记(6. Spring 原理)-5

它是一个全面的、企业应用开发一站式的解决方案,贯穿表现层、业务层、持久层。但是 Spring 仍然可以和其他的框架无缝整合。 6.1.1. Spring 特点 6.1.1.1. 轻量级 6.1.1.2. 控制反转 6.1.1....

Shingfi
今天
8
0
Excel导入数据库数据+Excel导入网页数据【实时追踪】

1.Excel导入数据库数据:数据选项卡------>导入数据 2.Excel导入网页数据【实时追踪】:

东方墨天
今天
11
1

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部