add uptime bench

2024-11-22 04:39:46 +00:00 · 2016-07-30 20:16:43 -04:00 · 2016-07-30 20:16:43 -04:00 · 4f2537ab3d
commit 4f2537ab3d
parent b3cc0efc7b
1 changed files with 195 additions and 0 deletions
--- a/benchmarks/uptime/index.html
+++ b/benchmarks/uptime/index.html
@ -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>