This specific component is designed to convert a timestamp into relative time text:
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);
}
});
To use this component, simply include it like this:
<human-time :time="entry.time"></human-time>
The issue arises when there are numerous entries (500+) causing excessive CPU usage in Chrome. This could be due to Chrome struggling with a large number of timers. Do you have any recommendations on how to address this problem while maintaining the real-time updates for relative time?