1. 
       
       
       
       
       

  2. 
       
       
       


    狗万官网酒店 > 狗万官网下载 > 如何测量vue运用运行时的特性_vue.js

    如何测量vue运用运行时的特性_vue.js

    来源: 2019-08-04 19:43 我来投稿 参与评论
    这篇文章主要介绍了如何测量vue运用运行时的特性,文中通过示范代码介绍的独特详细,对大家的上学或者工作具有原则性的参考学习价值,,要求的爱人可以参考下

    在上一篇文章中,咱讨论了如何加强大型数据的特性。但是我们还没有测量它提高了好多。

    咱可以利用Chrome DevTools 的特性选项来促成这一点。但是为了获取准确数据,咱必须在Vue上激活性能模式。

    咱可以在main.js或者插件中设置全局变量,代码如下:

    Vue.config.performance = true;

    如果你设置了科学的 NODE_ENV 条件容量,这就是说可以利用非生产环境做判断。

    const isDev = process.env.NODE_ENV !== "production";
    Vue.config.performance = isDev;

    这将在Vue其中激活标记组件性能的User Timing API

    上一篇文章内容,我已经在codesandbox上创立了代码。开辟 Chrome DevTools 阴之 performance 选择并且点击重新加载按钮。

    这将记录页面加载性能。同时,谢谢你在main.js中的Vue.config.performance安装,本条设置会使你在统计材料能够看到User Timing有些。

    在手里,你会发现3个指标:

  3. Init:创造组件实例需要的年月
  4. Render:创造VDom组织需要的年月
  5. Patch:把VDom运用到实际Dom的年月
  6. 归来上一篇文章好奇(性能提高了好多)的中央,结果是:正常的组件需要417毫秒初始化:

    而利用Object.freeze阻碍了公认反应则只要求3.9毫秒:

    当然,每次运行的结果都会有小的变通,但是,仍然有特殊巨大的特性差别。鉴于在创立组件的时光会有默认反应的题目,你可以通过Init(初始化指标)总的来看阻止了公认反应和没有阻止的差别。

    就是这样!

    我之明白

    vue品种,咱可以通过在全局main.js安装Vue.config.performance为true来开启性能检测,可以通过环境容量来分别是否需要开启,接下来就足以通过Chrome DevTools阴之 performance 选择去看统计的特性数据。

    末了

    水平有限,难免有错漏之处,望各位大大轻喷的同时能够指出,跪谢!

    上述就是本文的方方面面内容,瞩望对大家的上学有所帮助,也愿意大家多多支持脚本的师。

    义务编辑:狗万官网酒店
     
     
    0% (0)
     
     
    0% (0)
    机长评论( ) 请自觉遵守互联网相关的富民政策法规,不准发布色情、暴力、反动的议论。
    地名: 匿名?