|
|
@@ -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>
|
Evan You