Evan You
9 years ago
1 changed files with 101 additions and 92 deletions
@ -1,102 +1,111 @@ |
|||||
<script src="https://cdn.jsdelivr.net/lodash/4.10.0/lodash.min.js"></script> |
<!DOCTYPE html> |
||||
<script src="../../dist/vue.min.js"></script> |
<html lang="en"> |
||||
<style> |
<head> |
||||
.danger { |
<meta charset="utf-8"> |
||||
background-color: red; |
<title>Vue benchmark</title> |
||||
} |
</head> |
||||
</style> |
<body> |
||||
|
<script src="https://cdn.jsdelivr.net/lodash/4.10.0/lodash.min.js"></script> |
||||
<script type="text/x-template" id="t"> |
<script src="../../dist/vue.min.js"></script> |
||||
<div> |
<style> |
||||
<h1>{{ total }} Components</h1> |
.danger { |
||||
<p>{{ action }} took {{time}}ms.</p> |
background-color: red; |
||||
<button @click="shuffle">shuffle</button> |
} |
||||
<button @click="add">add</button> |
</style> |
||||
<table class="table table-hover table-striped test-data"> |
|
||||
<row v-for="item in items" track-by="id" |
|
||||
:class="{ danger: item.id === selected }" |
|
||||
:item="item" |
|
||||
@select="select(item)" |
|
||||
@remove="remove(item)"> |
|
||||
</row> |
|
||||
</table> |
|
||||
</div> |
|
||||
</script> |
|
||||
|
|
||||
<script type="text/x-template" id="row"> |
<script type="text/x-template" id="t"> |
||||
<tr> |
<div> |
||||
<td class="col-md-1">{{item.id}}</td> |
<h1>{{ total }} Components</h1> |
||||
<td class="col-md-4"> |
<p>{{ action }} took {{time}}ms.</p> |
||||
<a @click="$emit('select')">{{item.label}}</a> |
<button @click="shuffle">shuffle</button> |
||||
</td> |
<button @click="add">add</button> |
||||
<td class="col-md-1"> |
<table class="table table-hover table-striped test-data"> |
||||
<button @click="$emit('remove')">remove</button> |
<row v-for="item in items" track-by="id" |
||||
</td> |
:class="{ danger: item.id === selected }" |
||||
</tr> |
:item="item" |
||||
</script> |
@select="select(item)" |
||||
|
@remove="remove(item)"> |
||||
|
</row> |
||||
|
</table> |
||||
|
</div> |
||||
|
</script> |
||||
|
|
||||
<div id="el"> |
<script type="text/x-template" id="row"> |
||||
</div> |
<tr> |
||||
|
<td class="col-md-1">{{item.id}}</td> |
||||
|
<td class="col-md-4"> |
||||
|
<a @click="$emit('select')">{{item.label}}</a> |
||||
|
</td> |
||||
|
<td class="col-md-1"> |
||||
|
<button @click="$emit('remove')">remove</button> |
||||
|
</td> |
||||
|
</tr> |
||||
|
</script> |
||||
|
|
||||
<script> |
<div id="el"> |
||||
var total = 1000 |
</div> |
||||
var items = [] |
|
||||
for (var i = 0; i < total; i++) { |
|
||||
items.push({ |
|
||||
id: i, |
|
||||
label: String(Math.random()).slice(0, 5) |
|
||||
}) |
|
||||
} |
|
||||
|
|
||||
var s = window.performance.now() |
<script> |
||||
console.profile('render') |
var total = 1000 |
||||
var vm = new Vue({ |
var items = [] |
||||
el: '#el', |
for (var i = 0; i < total; i++) { |
||||
template: '#t', |
items.push({ |
||||
data: { |
id: i, |
||||
total: total, |
|
||||
time: 0, |
|
||||
action: 'Render', |
|
||||
items: items, |
|
||||
selected: null |
|
||||
}, |
|
||||
methods: { |
|
||||
shuffle: monitor('shuffle', function () { |
|
||||
this.items = _.shuffle(this.items) |
|
||||
}), |
|
||||
add: monitor('add', function () { |
|
||||
this.items.push({ |
|
||||
id: total++, |
|
||||
label: String(Math.random()).slice(0, 5) |
label: String(Math.random()).slice(0, 5) |
||||
}) |
}) |
||||
}), |
|
||||
select: monitor('select', function (item) { |
|
||||
this.selected = item.id |
|
||||
}), |
|
||||
remove: monitor('remove', function (item) { |
|
||||
this.items.splice(this.items.indexOf(item), 1) |
|
||||
}) |
|
||||
}, |
|
||||
components: { |
|
||||
row: { |
|
||||
props: ['item'], |
|
||||
template: '#row' |
|
||||
} |
} |
||||
} |
|
||||
}) |
|
||||
setTimeout(function () { |
|
||||
vm.time = window.performance.now() - s |
|
||||
console.profileEnd('render') |
|
||||
}, 0) |
|
||||
|
|
||||
function monitor (action, fn) { |
|
||||
return function () { |
|
||||
var s = window.performance.now() |
var s = window.performance.now() |
||||
fn.apply(this, arguments) |
console.profile('render') |
||||
Vue.nextTick(function () { |
var vm = new Vue({ |
||||
vm.action = action |
el: '#el', |
||||
vm.time = window.performance.now() - s |
template: '#t', |
||||
|
data: { |
||||
|
total: total, |
||||
|
time: 0, |
||||
|
action: 'Render', |
||||
|
items: items, |
||||
|
selected: null |
||||
|
}, |
||||
|
methods: { |
||||
|
shuffle: monitor('shuffle', function () { |
||||
|
this.items = _.shuffle(this.items) |
||||
|
}), |
||||
|
add: monitor('add', function () { |
||||
|
this.items.push({ |
||||
|
id: total++, |
||||
|
label: String(Math.random()).slice(0, 5) |
||||
|
}) |
||||
|
}), |
||||
|
select: monitor('select', function (item) { |
||||
|
this.selected = item.id |
||||
|
}), |
||||
|
remove: monitor('remove', function (item) { |
||||
|
this.items.splice(this.items.indexOf(item), 1) |
||||
|
}) |
||||
|
}, |
||||
|
components: { |
||||
|
row: { |
||||
|
props: ['item'], |
||||
|
template: '#row' |
||||
|
} |
||||
|
} |
||||
}) |
}) |
||||
} |
setTimeout(function () { |
||||
} |
vm.time = window.performance.now() - s |
||||
</script> |
console.profileEnd('render') |
||||
|
}, 0) |
||||
|
|
||||
|
function monitor (action, fn) { |
||||
|
return function () { |
||||
|
var s = window.performance.now() |
||||
|
fn.apply(this, arguments) |
||||
|
Vue.nextTick(function () { |
||||
|
vm.action = action |
||||
|
vm.time = window.performance.now() - s |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
</body> |
||||
|
</html> |
||||
|
|||||
Loading…
Reference in new issue