update ssr benchmark

benchmarks/ssr/README.md

@@ -1,10 +1,10 @@
 # Vue.js SSR benchmark
 
-This benchmark renders a table of 1000 rows with 10 columns (10 thousand components). This benchmark is to demonstrate the overall speeds of Vue.js SSR and time to content comparison between `renderToString` and `renderToStream`.
+This benchmark renders a table of 1000 rows with 10 columns (10k components), with around 30k normal elements on the page. Note this is not something likely to be seen in a typical app. This benchmark is mostly for stress/regression testing and comparing between `renderToString` and `renderToStream`.
 
-To view the results follow the run section. Note that the overall completion time for the results are variable, this is due to other system related variants at run time (available memory, processing ect). In ideal circumstances both should finish within equal times.
+To view the results follow the run section. Note that the overall completion time for the results are variable, this is due to other system related variants at run time (available memory, processing ect). In ideal circumstances both should finish within similar results.
 
-`renderToStream` pipes the content through a stream which gives massive performance benefits over renderToString. This can be observed through the benchmark.
+`renderToStream` pipes the content through a stream which provides considerable performance benefits (faster time-to-first-byte and non-event-loop-blocking) over renderToString. This can be observed through the benchmark.
 
 ### run
 

benchmarks/ssr/common.js

@@ -26,20 +26,8 @@ function generateGrid (rowCount, columnCount) {
 
 const gridData = generateGrid(1000, 10)
 
-var perfMixin = {
-  computed: {
-    performance: {
-      cached: false,
-      get: function () {
-        return (self.performance.now() - self.s).toFixed(2)
-      }
-    }
-  }
-}
-
 var gridComponent = {
-  template: '<div><h1>{{ performance }}ms</h1><my-table></my-table></div>',
-  mixins: [perfMixin],
+  template: '<div><h1>{{ Math.random() }}</h1><my-table></my-table></div>',
   components: {
     myTable: {
       data: function () {
@@ -47,16 +35,22 @@ var gridComponent = {
           grid: gridData
         }
       },
+      // template: '<table><tr v-for="row in grid"><th>123</th><td v-for="item in row.items">{{ item.id }}</td></tr></table>',
       template: '<table width="100%" cellspacing="2"><row v-for="row in grid" :row="row"></row></table>',
       components: {
         row: {
           props: ['row'],
-          mixins: [perfMixin],
-          template: '<tr><th>{{ performance }}ms</th><column v-for="item in row.items"></column></tr>',
+          template: '<tr><th>{{ Math.random() }}</th><column v-for="item in row.items"></column></tr>',
           components: {
             column: {
-              mixins: [perfMixin],
-              template: '<td class="item">{{ performance }}ms</td>'
+              template: '<td class="item">' +
+                // 25 plain elements for each cell
+                '<ul class="yoyo">' +
+                  '<li class="hihi" v-for="i in 5">' +
+                    '<span v-for="i in 5">fsefs</span>' +
+                    '</li>' +
+                '</ul>' +
+              '</td>'
             }
           }
         }