biwin必赢在线官方手机版biwin必赢在线官方手机版


bwin登陆

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的数据

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

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

  7.SSR(服务端渲染)

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

  8.骨架屏加载

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

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

 

目前的总结的就是这些,如果以后想起来还有别的,我会再回来添加的,在下告辞,不用想我,我去用个早膳,一会就回来好吧

    

 

欢迎阅读本文章: 耿志鹏

必赢集团官方手机版

bwin登陆