Skip to content

Commit

Permalink
Added benchmark for SSR (vuejs#2842)
Browse files Browse the repository at this point in the history
- Includes `renderToStream` and `renderToString`
- Added SSR benchmark README.md
- Added npm `bench:ssr` script
- Renders table with 1000 rows with 10 columns (10 thousand components)
  • Loading branch information
blake-newman authored and yyx990803 committed May 16, 2016
1 parent b67143a commit 4618914
Show file tree
Hide file tree
Showing 5 changed files with 142 additions and 1 deletion.
13 changes: 13 additions & 0 deletions benchmarks/ssr/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
# 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`.

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.

`renderToStream` pipes the content through a stream which gives massive performance benefits over renderToString. This can be observed through the benchmark.

### run

``` bash
npm run bench:ssr
```
86 changes: 86 additions & 0 deletions benchmarks/ssr/common.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
'use strict'

const compiler = require('../../dist/compiler.js')
const self = (global || root)

self.performance = {
now: function () {
var hrtime = process.hrtime()
return ((hrtime[0] * 1000000 + hrtime[1] / 1000) / 1000)
}
}

function generateGrid (rowCount, columnCount) {
var grid = []

for (var r = 0; r < rowCount; r++) {
var row = { id: r, items: [] }
for (var c = 0; c < columnCount; c++) {
row.items.push({ id: (r + '-' + c) })
}
grid.push(row)
}

return grid
}

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],
components: {
myTable: {
data: function () {
return {
grid: gridData
}
},
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>',
components: {
column: {
mixins: [perfMixin],
template: '<td class="item">{{ performance }}ms</td>'
}
}
}
}
}
}
}

function createCompiledOptions (options) {
const res = compiler.compileToFunctions(options.template, {
preserveWhitespace: false
})
Object.assign(options, res)
delete options.template
if (options.components) {
const keys = Object.keys(options.components)
let total = keys.length
while (total) {
const name = keys[total - 1]
options.components[name] = createCompiledOptions(options.components[name])
total--
}
}
return options
}

module.exports = createCompiledOptions(gridComponent)
26 changes: 26 additions & 0 deletions benchmarks/ssr/renderToStream.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
'use strict'

const Vue = require('../../dist/vue.common.js')
const createRenderer = require('../../dist/server-renderer.js')
const renderToStream = createRenderer().renderToStream
const gridComponent = require('./common.js')

console.log('--- renderToStream --- ')
const self = (global || root)
self.s = self.performance.now()

const stream = renderToStream(new Vue(gridComponent))
let str = ''
const stats = []
stream.on('data', chunk => {
str += chunk
stats.push(self.performance.now())
})
stream.on('end', () => {
stats.push(self.performance.now())
stats.forEach((val, index) => {
const type = index !== stats.length - 1 ? 'Chunk' : 'Complete'
console.log(type + ' time: ' + (val - self.s).toFixed(2) + 'ms')
})
console.log()
})
15 changes: 15 additions & 0 deletions benchmarks/ssr/renderToString.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
'use strict'

const Vue = require('../../dist/vue.common.js')
const createRenderer = require('../../dist/server-renderer.js')
const renderToString = createRenderer().renderToString
const gridComponent = require('./common.js')

console.log('--- renderToString --- ')
const self = (global || root)
self.s = self.performance.now()

renderToString(new Vue(gridComponent), () => {
console.log('Complete time: ' + (self.performance.now() - self.s).toFixed(2) + 'ms')
console.log()
})
3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,8 @@
"test:unit": "NODE_ENV=development karma start build/karma.unit.config.js",
"test:cover": "NODE_ENV=development karma start build/karma.cover.config.js",
"test:e2e": "npm run build -- vue.js && node test/e2e/runner.js",
"test:ssr": "npm run build -- vue.common.js,compiler.js,server-renderer.js && NODE_ENV=development VUE_ENV=server jasmine JASMINE_CONFIG_PATH=test/ssr/jasmine.json"
"test:ssr": "npm run build -- vue.common.js,compiler.js,server-renderer.js && NODE_ENV=development VUE_ENV=server jasmine JASMINE_CONFIG_PATH=test/ssr/jasmine.json",
"bench:ssr": "npm run build -- vue.common.js,compiler.js,server-renderer.js && NODE_ENV=production VUE_ENV=server node benchmarks/ssr/renderToString.js && NODE_ENV=production VUE_ENV=server node benchmarks/ssr/renderToStream.js"
},
"repository": {
"type": "git",
Expand Down

0 comments on commit 4618914

Please sign in to comment.