大屏显示性能问题

    大屏显示的定位就是在可视化大屏中显示数据和图表，大屏有可能会晚上关机早上开机，也可能一直在运转。时间一久，会导致页面卡顿，页面渲染不流畅，影响用户体验。

    1、大屏可能会循环显示成千上万条数据，甚至更多，如果将大批量的数据全部一次性加载轮播，肯定会造成内存占用过多，服务器负载过重。现在的前端解决方案一般在框架内实现。以vue为例，项目采用SPA单页面开发，只加载数据，而不需要刷新页面。返回的数据VUE 会通过Object.defineProperty进行劫持，来实现视图响应式数据的变化。A、大屏展示中的数据就是纯粹的数据展示，不会有数据改变，我们就不需要VUE劫持数据，可以减少组建初始化的时间。

实现方式如下

async initData(){
    const users = await axios.get('/users/list')
    this.users = Object.freeze(users)      
}

B、v-for 中避免使用会变化且不唯一的值做key值，v-for 避免与 v-if 同时使用。C、data中的数据VUE 会通过Object.defineProperty进行劫持VUE 会通过Object.defineProperty进行劫持，如果不需要监听的数据，可以不在data中声明。

  2、复杂的计算可以放到后端计算，前端只负责渲染。前端需要计算的数据可以把数据和计算分开，可以大大提高组件渲染的效率。

  3、渲染中，v-if 具有惰性，只有条件成立时才会去渲染。

  4、对于一些需要频繁过滤和查询的数据，使用Map或Set可以提高性能。

  5、页面中使用了addEventListener 时，在不需要时 使用removeEventListener,页面中使用了 setInterval 或者 setTimeout时，不需要时，使用clearInterval 或 clearTimeout进行清理，避免页面不必要的引用导致内存无法回收。同时我们设计对象时，要避免循环引用，导致内存无法回收。

  6、采用较新版本的浏览器，提高渲染的性能问题。

  7、在没有客户使用或者较少客户使用的时间段，通过v-if 触发组件的生命周期，在destroy中 对data中的数据置空，将addEventlistener监听的事件置空，将setInterval,setTimeout置空，将echarts对象置空，重新渲染组件。

8、W3c小组引入了Navigation Timing API，实现了自动、精准的页面性能打点，我们可以通过window.performance属性获取。

• performance.timing 接口（定义了从 navigationStart 至 loadEventEnd 的 21 个只读属性）

• performance.navigation（定义了当前文档的导航信息，比如是重载还是向前向后等）我们可以通过这些属性进行优化。可以使用谷歌的插件灯箱“lighthouse”,另外也可以嵌入一些第三方的性能监控软件，比如阿里的“岳鹰”。