Evan You
8 years ago
1 changed files with 195 additions and 0 deletions
@ -0,0 +1,195 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="en"> |
||||
|
<head> |
||||
|
<meta charset="utf-8"> |
||||
|
<title>Vue benchmark</title> |
||||
|
<style type="text/css"> |
||||
|
html, body { |
||||
|
margin: 0; |
||||
|
padding: 0; |
||||
|
font-family: sans-serif; |
||||
|
} |
||||
|
|
||||
|
#fps { |
||||
|
position: fixed; |
||||
|
top: 0px; |
||||
|
right: 0px; |
||||
|
padding: 32px; |
||||
|
font-size: 32px; |
||||
|
text-align: right; |
||||
|
} |
||||
|
|
||||
|
* { |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
.server-uptime { |
||||
|
display: block; |
||||
|
overflow: hidden; |
||||
|
margin: 0 auto; |
||||
|
width: 50%; |
||||
|
} |
||||
|
|
||||
|
.server-uptime + .server-uptime { |
||||
|
margin: 20px auto 0 auto; |
||||
|
border-top: 1px solid #999; |
||||
|
} |
||||
|
|
||||
|
.days { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
flex-flow: wrap; |
||||
|
} |
||||
|
|
||||
|
.uptime-day { |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
span.uptime-day-status { |
||||
|
width: 10px; |
||||
|
height: 10px; |
||||
|
margin: 1px; |
||||
|
} |
||||
|
|
||||
|
.hover { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
.uptime-day-status:hover + .hover { |
||||
|
display: flex; |
||||
|
position: absolute; |
||||
|
margin-top: -35px; |
||||
|
margin-left: -30px; |
||||
|
border-radius: 4px; |
||||
|
color: #eee; |
||||
|
background-color: #333; |
||||
|
padding: 10px; |
||||
|
font-size: 11px; |
||||
|
} |
||||
|
</style> |
||||
|
</head> |
||||
|
<body> |
||||
|
<div id="app"> |
||||
|
<p>FPS: {{ fps }}</p> |
||||
|
<button @click="toggle">{{ playing ? 'pause' : 'play' }}</button> |
||||
|
<server-uptime |
||||
|
v-for="server in servers" |
||||
|
:key="server.name" |
||||
|
:name="server.name" |
||||
|
:days="server.days"> |
||||
|
</server-uptime> |
||||
|
</div> |
||||
|
<script src="../../dist/vue.min.js"></script> |
||||
|
<script> |
||||
|
Vue.component('uptime-day', { |
||||
|
props: ['day'], |
||||
|
template: ` |
||||
|
<div class="uptime-day"> |
||||
|
<span class="uptime-day-status" :style="{ backgroundColor: day.up ? '#8cc665' : '#ccc' }"></span> |
||||
|
<span class="hover">{{day.number}}: {{day.up ? 'Servers operational!' : 'Red alert!'}}</span> |
||||
|
</div> |
||||
|
` |
||||
|
}) |
||||
|
|
||||
|
Vue.component('server-uptime', { |
||||
|
props: ['name', 'days'], |
||||
|
computed: { |
||||
|
upDays () { |
||||
|
return this.days.reduce(function (upDays, day) { |
||||
|
return upDays += (day.up ? 1 : 0) |
||||
|
}, 0) |
||||
|
}, |
||||
|
maxStreak () { |
||||
|
var streak = this.days.reduce(([max, streak], day) => { |
||||
|
if (day.up && streak + 1 > max) { |
||||
|
return [streak + 1, streak + 1] |
||||
|
} else if (day.up) { |
||||
|
return [max, streak + 1] |
||||
|
} else { |
||||
|
return [max, 0] |
||||
|
} |
||||
|
}, [0, 0]) |
||||
|
|
||||
|
return streak.max |
||||
|
} |
||||
|
}, |
||||
|
template: ` |
||||
|
<div class="server-uptime"> |
||||
|
<h1>{{name}}</h1> |
||||
|
<h2>{{upDays}} Days Up</h2> |
||||
|
<h2>Biggest Streak: {{maxStreak}}</h2> |
||||
|
<div class="days"> |
||||
|
<uptime-day |
||||
|
v-for="day in days" |
||||
|
:key="day.number" |
||||
|
:day="day"> |
||||
|
</uptime-day> |
||||
|
</div> |
||||
|
</div> |
||||
|
` |
||||
|
}) |
||||
|
|
||||
|
function generateServer (name) { |
||||
|
var days = [] |
||||
|
for (var i=0; i<=364; i++) { |
||||
|
var up = Math.random() > 0.2 |
||||
|
days.push({ number: i, up }) |
||||
|
} |
||||
|
return { name, days } |
||||
|
} |
||||
|
|
||||
|
function generateServers () { |
||||
|
return [ |
||||
|
generateServer("Stefan's Server"), |
||||
|
generateServer("Godfrey's Server"), |
||||
|
generateServer("Yehuda's Server") |
||||
|
] |
||||
|
} |
||||
|
|
||||
|
var s = window.performance.now() |
||||
|
var app = new Vue({ |
||||
|
el: '#app', |
||||
|
data: { |
||||
|
fps: 0, |
||||
|
playing: false, |
||||
|
servers: Object.freeze(generateServers()) |
||||
|
}, |
||||
|
methods: { |
||||
|
toggle () { |
||||
|
this.playing = !this.playing |
||||
|
if (this.playing) { |
||||
|
update() |
||||
|
} else { |
||||
|
cancelAnimationFrame(loop) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
console.log('initial render: ' + (window.performance.now() - s) + 'ms') |
||||
|
|
||||
|
var fpsMeter = { |
||||
|
alpha: 2/121, |
||||
|
lastValue: null, |
||||
|
push (dataPoint) { |
||||
|
if (this.lastValue) { |
||||
|
return this.lastValue = this.lastValue + this.alpha * (dataPoint - this.lastValue) |
||||
|
} else { |
||||
|
return this.lastValue = dataPoint |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
var loop |
||||
|
var lastFrame = null |
||||
|
function update () { |
||||
|
var thisFrame = window.performance.now() |
||||
|
if (lastFrame) { |
||||
|
app.fps = Math.round(fpsMeter.push(1000 / (thisFrame - lastFrame))) |
||||
|
} |
||||
|
app.servers = Object.freeze(generateServers()) |
||||
|
loop = requestAnimationFrame(update) |
||||
|
lastFrame = thisFrame |
||||
|
} |
||||
|
</script> |
||||
|
</body> |
||||
|
</html> |
||||
Loading…
Reference in new issue