test/vue
1
0
Fork 0
mirror of https://gitee.com/vuejs/vue.git synced 2024-12-02 12:07:39 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

improve svg dots benchmark

Browse Source
This commit is contained in:
Evan You 2016-04-18 01:26:58 -04:00
parent bf39f1973c
commit 4fecfe2d8a
1 changed files with 47 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
benchmarks/svg/index.html
View File

@ -2,54 +2,70 @@
<html lang="en">
<head>
<title>vue.js version</title>
<script src="https://cdn.jsdelivr.net/stats.js/r11/stats.min.js"></script>
<script src="../../dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/stats.js/r11/stats.min.js"></script>
<script src="../../dist/vue.js"></script>
<style>
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
svg {
width: 800px;
height: 600px;
}
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
svg {
width: 800px;
height: 600px;
}
</style>
</head>
<body>
<div id="app">
<svg>
<circle v-for='point in points' :cx='point.x' :cy='point.y' r='2px' fill='#FC309D'></circle>
</svg>
</div>
<h1>Animating 1000 SVG dots</h1>
<div id="app">
<p>
<button @click="toggleOptimization">
{{ optimized ? 'disable' : 'enable' }} optimization (Object.freeze)
</button>
</p>
<svg>
<circle v-for='point in model.points' :cx='point.x' :cy='point.y' r='2px' fill='#FC309D'></circle>
</svg>
</div>
<script type="text/javascript" charset="utf-8">
var stats = new Stats();
stats.setMode(0); // 0: fps, 1: ms, 2: mb
// align top-left
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
document.body.appendChild( stats.domElement );
var stats = new Stats()
stats.setMode(0)
stats.domElement.style.position = 'absolute'
stats.domElement.style.right = '0px'
stats.domElement.style.top = '0px'
document.body.appendChild(stats.domElement)
var WIDTH = 800
var HEIGHT = 600
var model = createModel(1000);
new Vue({
el: '#app',
data: model,
data: {
model: createModel(1000),
optimized: false
},
created: function () {
var self = this
self.raf = window.requestAnimationFrame(render)
requestAnimationFrame(render)
stats.begin()
function render () {
stats.end()
stats.begin()
self.raf = window.requestAnimationFrame(render)
self.step()
requestAnimationFrame(render)
self.model.step()
if (self.optimized) {
self.$forceUpdate()
}
}
},
methods: {
toggleOptimization: function () {
this.model = this.optimized
? createModel(1000)
: Object.freeze(createModel(1000))
this.optimized = !this.optimized
}
}
});
@ -72,7 +88,6 @@ function createModel (count) {
function step () {
points.forEach(move)
// move(points[0])
}
function move (p) {