-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added benchmark for SSR (vuejs#2842)
- 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
1 parent
b67143a
commit 4618914
Showing
5 changed files
with
142 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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() | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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() | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters