perf/index1.4.html

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="../dist/1.4.js"></script>
        <script>
            var vm = avalon.define({
                $id: 'for0',
                header: ['name', 'age', 'sex'],
                list: [],
                order: function () {
                    return ["name", "age", "sex"]
                }
            })
            var sexMap = {
                'true': "男",
                'false': "女"
            }
            avalon.config.debug = false
            function genData(n) {
                var ret = []
                for (var i = 0; i < n; i++) {
                    ret.push({
                        name: Math.random(),
                        age: 3 + Math.ceil((Math.random() * 30)),
                        sex: sexMap[1 - Math.random() > 0.5],
                        desc: Math.random()
                    })
                }
                return ret
            }

            var array = []
            var id = setInterval(function () {
                var t1 = Date.now()
                vm.list = genData(1000)
                var cost = Date.now() - t1
                array.push(cost)
                console.log('total ', cost, ' ms', array.length)
                if (array.length > 60) {
                    console.log('平均耗时 ' + (array.reduce(function (a, b) {
                        return a + b
                    }, 0)) / 60 + ' ms!!!')
                    array.shift()
                    console.log('更新平均耗时', array.reduce(function (a, b) {
                        return a + b
                    }, 0) / array.length, 'ms')
                    clearInterval(id)
                }
            }, 50)

        </script>
    </head>

    <body>


        <div ms-controller='for0' >
            <table border="1">
                <tr><th ms-repeat-el='header'>{{el}}</th></tr>
                <tr ms-repeat-tr='list'>
                    <td ms-repeat='tr' data-with-sorted="order" ms-attr-align="$key === 'age' ?'left':'right'" >{{$val}}</td>
                </tr>
            </table>

        </div>

    </body>
</html>