Vue: How to optimize the v-for rendering performance for the first time

[yczz]

Use vue. Js wrote a date component, when processing date panel using the v - for, hair rendering is slow, little choice for any optimization method?

[yyx990803]

How many items are you rendering? What does the component look like? What does the array objects look like?

[yczz]

Date component panel, display the current month days and weeks, 48 object, 6 line 8, the code is as follows,I add 65 such components on the page, on the chrome case about 5 seconds time to render

html:

<tr v-for="row in dataPanel" track-by="$index">
    <td :class="{day:!node.isWeek,dow:node.isWeek,dateweek:node.isWeek,old:node.isOld,new:node.isNew,active:node.isActive}" v-for="node in row" track-by="$index">{{node.content}}
      </td>
</tr>

javascript:

for (var i = 0; i < 6; i++) {
        result[i] = [];
    for (var j = 0; j < 7; j++) {
        /**getDayContent return  
                             {
        isOld: false,
        isNew: false,
        isActive: false,
        isWeek: false,
        value: 15
        content: 15
         }**/
        result[i].push(this.getDayContent(obj));
    }
}

[yyx990803]

Why would this be slow? This takes less than 30ms on my machine.

[yczz]

I don't know, no complex logic code, I use chrome Timeline analysis see 80% time consumption in the execution of JavaScript code,full component code:

<style>
</style>

<template>
    <div class="datetimepicker dropdown-menu">
        <div @click.stop.prevent="datePanelHandle">
            <table class=" table-condensed">
                <thead>
                    <tr>
                        <th op="lastMonth" @selectstart.stop.prevent=""><i class="glyphicon glyphicon-arrow-left" op="lastMonth"></i></th>
                        <th colspan="6" op="openSelectMonth"><span class="title" op="openSelectMonth">{{year}}</span>年<span class="title" op="openSelectMonth">{{month}}</span>月</th>
                        <th op="nextMonth" @selectstart.stop.prevent=""><i class="glyphicon glyphicon-arrow-right" op="nextMonth"></i></th>
                    </tr>
                    <tr>
                        <th class="dow">周</th>
                        <th class="dow">一</th>
                        <th class="dow">二</th>
                        <th class="dow">三</th>
                        <th class="dow">四</th>
                        <th class="dow">五</th>
                        <th class="dow">六</th>
                        <th class="dow">日</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="row in dataPanel" track-by="$index">
                        <td :class="{day:!node.isWeek,dow:node.isWeek,dateweek:node.isWeek,old:node.isOld,new:node.isNew,active:node.isActive}" v-for="node in row" track-by="$index" op="selectDate" data="{{node.value}}">{{node.content}}</td>
                    </tr>
                </tbody>
                <tbody v-show="currMode!='date'">
                    <tr>
                        <th colspan="8" class="time" op="openSelectTime"><span class="title" op="openSelectTime">{{hour}}</span>时<span class="title" op="openSelectTime">{{minute}}</span>分<span v-show="currMode=='datesecond'"><span class="title" op="openSelectTime">{{second}}</span>秒</span>
                        </th>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <th colspan="8">
                            <button type="button" class="btn btn-success btn-sm" v-show="currMode=='datetime'" op="ok"> 确 定 </button>
                            <button type="button" class="btn btn-warning btn-sm" op="clear"> 清 空 </button>
                            <button type="button" class="btn btn-success btn-sm" v-show="currMode=='date'" op="today"> 今 天 </button>
                            <button type="button" class="btn btn-success btn-sm" v-show="currMode=='datetime'" op="today"> 现 在 </button>
                        </th>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
</template>

<script>
    var calenderMixin = require("./calenderMixin.vue");
    export
    default {
        mixins: [UUI.uuiMixin, calenderMixin],
        props: {
            //组件类型
            uiType: {
                type: String,
                default: "udatetime"
            },
            //组件描述
            label: {
                type: String,
                default: ""
            },
            //Calender功能模式，可选值有：date、datetime、datesecond、year、quarter、month、week
            mode: {
                type: String,
                default: "date"
            },
            currMode: {
                type: String,
                default: "date"
            }
        },
        computed: {
            //日期选择面板
            dataPanel: function() {
                //总共显示42天
                var allDayCount = 42;
                var result = [];
                var date = new UUI.Date(this.year + "-" + this.zeroPad(this.month) + "-01");
                //第一天星期几
                var firstDay = date.getDay();
                //当前月
                var currMonth = date.getMonth();
                //当前年
                var currYear = date.getFullYear();
                //当前月总天数
                var currDayBycurMonth = date.getMonthDayNum();
                //上个月的年
                var beforeYear = date.getMonth() == 1 ? date.getFullYear() - 1 : date.getFullYear();
                //上个月
                var beforeMonth = date.getMonth() == 1 ? 12 : date.getMonth() - 1;
                //上个月总天数
                var beforeMonthDay = UUI.Date.getMonthDayNum(beforeYear, beforeMonth);
                //下个月年
                var nextYear = date.getMonth() == 12 ? date.getFullYear() + 1 : date.getFullYear();
                //下个月
                var nextMonth = date.getMonth() == 12 ? 1 : date.getMonth() + 1;
                //上个月显示天数
                var oldDay = firstDay - 1;
                if (firstDay == 1) {
                    oldDay = 7;
                } else if (firstDay == 0) {
                    oldDay = 6;
                }
                //下个月显示天数
                var newDay = allDayCount - currDayBycurMonth - oldDay;
                for (var i = 0; i < 6; i++) {
                    result[i] = [];
                    for (var j = 0; j < 7; j++) {
                        var obj = {
                            beforeMonthDay: beforeMonthDay,
                            currDayBycurMonth: currDayBycurMonth,
                            beforeMonth: beforeMonth,
                            currMonth: currMonth,
                            nextMonth: nextMonth,
                            beforeYear: beforeYear,
                            currYear: currYear,
                            nextYear: nextYear,
                            oldDay: oldDay,
                            newDay: newDay,
                            i: i,
                            j: j
                        }
                        result[i].push(this.getDayContent(obj));
                    }
                }
                //添加周信息
                this.addWeek(result);
                return result;
            }
        },
        methods: {
            //日期面板单击
            datePanelHandle: function(event) {
                var op = jQuery(event.target).attr("op");
                var data = jQuery(event.target).attr("data");
                var currDate = new UUI.Date(this.year + "-" + this.zeroPad(this.month) + "-01");
                if (op == "lastMonth") {
                    currDate.addMonth(-1)
                    this.year = currDate.getFullYear();
                    this.month = currDate.getMonth();
                } else if (op == "nextMonth") {
                    currDate.addMonth(1)
                    this.year = currDate.getFullYear();
                    this.month = currDate.getMonth();
                } else if (op == "selectDate") {
                    if (this.mode == "date") {
                        this.dataValue = new UUI.Date(data);
                        this.$parent.initPanel();
                        this.isOpen = false;
                    } else {
                        this.selectDate = data;
                    }
                } else if (op == "ok") {
                    this.dataValue = new UUI.Date(this.selectDate + " " + this.zeroPad(this.hour) + ":" + this.zeroPad(this.minute) + ":" + this.zeroPad(this.second));
                    this.isOpen = false;
                } else if (op == "clear") {
                    this.dataValue = null;
                    this.isOpen = false;
                } else if (op == "today") {
                    this.dataValue = new UUI.Date();
                    this.isOpen = false;
                } else if (op == "openSelectMonth") {
                    this.currMode = "selectYearMonth";
                } else if (op == "openSelectTime") {
                    this.currMode = "time";
                }
            },
            //获取日期内容
            getDayContent: function(obj) {
                var result = {
                    isOld: false,
                    isNew: false,
                    isActive: false,
                    year: 0,
                    month: 0,
                    content: 0
                };
                var count = (obj.i * 7) + (obj.j + 1);
                if (count <= obj.oldDay) {
                    result = {
                        isOld: true,
                        isNew: false,
                        isActive: false,
                        isWeek: false,
                        value: obj.beforeYear + "-" + this.zeroPad(obj.beforeMonth) + "-" + this.zeroPad(obj.beforeMonthDay - obj.oldDay + count),
                        content: obj.beforeMonthDay - obj.oldDay + count
                    };
                } else if (count > (obj.oldDay + obj.currDayBycurMonth)) {
                    result = {
                        isOld: false,
                        isNew: true,
                        isActive: false,
                        isWeek: false,
                        value: obj.nextYear + "-" + this.zeroPad(obj.nextMonth) + "-" + this.zeroPad(count - (obj.oldDay + obj.currDayBycurMonth)),
                        content: count - (obj.oldDay + obj.currDayBycurMonth)
                    };
                } else {
                    result = {
                        isOld: false,
                        isNew: false,
                        isActive: false,
                        isWeek: false,
                        value: obj.currYear + "-" + this.zeroPad(obj.currMonth) + "-" + this.zeroPad(count - obj.oldDay),
                        content: count - obj.oldDay
                    };
                }
                if (this.selectDate == result.value) {
                    result.isActive = true;
                }
                return result;
            },
            //添加周信息
            addWeek: function(ar) {
                for (var i = 0; i < 6; i++) {
                    var day1 = ar[i][0];
                    var date = day1.value.split("-");
                    ar[i].unshift({
                        isOld: false,
                        isNew: false,
                        isActive: false,
                        isWeek: true,
                        value: day1.value,
                        content: UUI.Date.getWeek(date[0], date[1], date[2])
                    });
                }
            }
        }
    }
</script>

[yyx990803]

I'm sorry, but this is simply not enough information... if you want me to help you, you should at least provide a live reproduction. I don't have time to guess how your component works to actually test it.

[yyx990803]

Closing, but feel free to follow up.

[yczz]

Thank you for your reply, I now is propaganda is not loading date for the first time a panel, input gains focus when the rendering

[oubushixb]

两个中国人犯得着说英语吗。。。

[wyntau]

@oubushixb 因为可能还会有其他国家的朋友来看到这个问题. 不是每个人都会中文, 但是基本能上Github的人都会英文的

[oubushixb]

@Treri you are right.

[bluemsn]

vue: 1.0.26
android: xiaomi 4
ios iPhone6

I encountered the same problem, I was in android phone, the phone kernel is uc
I rendered 100 cell, there are about 1000 nodes, very slow, about 5000ms; but essentially ios can be completed within the 1000s,
Under android, rendering 10 cell, about 100 nodes, approximately around 1000ms,

Uc browser may be reasons for the slow?

But I use zeptojs create 100 cell approximately 1000 nodes sequentially append to go, takes about 800ms