Vuejs人力时间组件占用太多CPU

如何解决Vuejs人力时间组件占用太多CPU

这是一个简单的组件，可将时间戳转换为相对时间文本：

Vue.component('human-time',{
  props: ['time'],methods: {
    format(time){ 
      const formats = [
        [60,'seconds',1],[120,'1 minute'],[3600,'minutes',60],[7200,'1 hour'],[86400,'hours',3600],[172800,'1 day'],[604800,'days',86400],[1209600,'1 week'],[2419200,'weeks',604800],[4838400,'1 month'],[29030400,'months',2419200],[58060800,'1 year'],[2903040000,'years',29030400]
      ];

      time = +new Date(time);

      let s = (+new Date() - time) / 1000;
      if(s === 0)
        return 'Just now';

      if(s < 0)
        s = Math.abs(s);

      for(const[limit,text,one] of formats)
        if(s < limit)
          return one ? Math.floor(s / one) + ' ' + text : text;

      return time;    
    }

  },render(createElement){

    // update human time every second
    this.intv = setInterval(() => this.$el.textContent = this.format(this.time),1000);

    const localTime = (new Date(this.time)).toString();
    return createElement('time',{ attrs : { datetime: this.time,title: localTime }},this.format(this.time));
  },beforeDestroy(){
    clearInterval(this.intv);
  }

});

用法是这样的：

<human-time :time="entry.time"></human-time>

问题在于，在许多条目（超过500个）上，它会使浏览器（仅Chrome）使用大量CPU。 我怀疑这是因为Chrome无法处理那么多计时器。关于如何解决此问题，同时保持相对时间不断更新的任何建议？

解决方法

以下是一些改进：

1. 将setInterval从render()移到mounted()，因为每次进行更新都会导致产生大量render()时调用interval。详细检查Vue: Life cycle diagram。

2. 添加一个数据属性以节省当前的格式化时间，因此您无需通过this.$el.textContent手动更改Dom文本内容。

3. 添加一只手表以将最新的道具= time同步到数据属性= current

PS：：我在render()中添加了一个console.log，然后您将看到为什么将setInterval放入{ {1}}。

render()

Vue.component('human-time',{
  props: ['time'],methods: {
    format(time){ 
      const formats = [
        [60,'seconds',1],[120,'1 minute'],[3600,'minutes',60],[7200,'1 hour'],[86400,'hours',3600],[172800,'1 day'],[604800,'days',86400],[1209600,'1 week'],[2419200,'weeks',604800],[4838400,'1 month'],[29030400,'months',2419200],[58060800,'1 year'],[2903040000,'years',29030400]
      ];

      time = +new Date(time);

      let s = (+new Date() - time) / 1000;
      if(s === 0)
        return 'Just now';

      if(s < 0)
        s = Math.abs(s);

      for(const[limit,text,one] of formats)
        if(s < limit)
          return one ? Math.floor(s / one) + ' ' + text : text;

      return time;    
    }

  },data () {
    return {
      current: this.format(this.time)
    }
  },watch: {
    time: function (newVal) {
      this.current = this.format(newVal)
    }
  },mounted () {
    this.intv = setInterval(() => this.current = this.format(this.time),1000);
  },render(createElement){

    // update human time every second
    
    console.log('ex: rendering')
    const localTime = (new Date(this.time)).toString();
    return createElement('span',{ attrs : { datetime: this.time,title: localTime }},this.current);
  },beforeDestroy(){
    clearInterval(this.intv);
  }

})

new Vue ({
  el:'#app'
})