Improve graphs
This commit is contained in:
parent
9ee904fdc0
commit
ac36db45f7
|
@ -15,6 +15,8 @@ Available as:
|
|||
|
||||
## Performance
|
||||
|
||||
Speed and effectiveness of Node.js version compared to other JS minifiers.
|
||||
|
||||
![Chart showing speed of HTML minifiers](./bench/speed.png) ![Chart showing effectiveness of HTML minifiers](./bench/minification.png)
|
||||
|
||||
## Usage
|
||||
|
|
|
@ -15,7 +15,7 @@ const tests = fs.readdirSync(testsDir).map(name => ({
|
|||
}));
|
||||
|
||||
const programs = {
|
||||
'hyperbuild-nodejs': content => hyperbuild.minify(Buffer.from(content)),
|
||||
'hyperbuild-nodejs': content => hyperbuild.minify_in_place(Buffer.from(content)),
|
||||
'html-minifier': content => htmlMinifier.minify(content, {
|
||||
caseSensitive: false,
|
||||
collapseBooleanAttributes: true,
|
||||
|
@ -67,42 +67,44 @@ const colours = [
|
|||
borderColor: '#4bc0c0',
|
||||
},
|
||||
];
|
||||
const renderChart = async (file, title, cfg) => {
|
||||
const chart = new chartjs(435, 320);
|
||||
await chart.drawChart({
|
||||
...cfg,
|
||||
options: {
|
||||
title: {
|
||||
display: true,
|
||||
text: title,
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
barPercentage: 0.5,
|
||||
gridLines: {
|
||||
color: '#ccc',
|
||||
},
|
||||
ticks: {
|
||||
fontColor: '#222',
|
||||
},
|
||||
}],
|
||||
yAxes: [{
|
||||
gridLines: {
|
||||
color: '#666',
|
||||
},
|
||||
ticks: {
|
||||
fontColor: '#222',
|
||||
},
|
||||
}],
|
||||
},
|
||||
legend: {
|
||||
labels: {
|
||||
fontFamily: 'Ubuntu, sans-serif',
|
||||
fontColor: '#000',
|
||||
const chartOptions = (title, displayLegend, yTick = t => t) => ({
|
||||
options: {
|
||||
title: {
|
||||
display: true,
|
||||
text: title,
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
barPercentage: 0.5,
|
||||
gridLines: {
|
||||
color: '#ccc',
|
||||
},
|
||||
ticks: {
|
||||
fontColor: '#222',
|
||||
},
|
||||
}],
|
||||
yAxes: [{
|
||||
gridLines: {
|
||||
color: '#666',
|
||||
},
|
||||
ticks: {
|
||||
callback: yTick,
|
||||
fontColor: '#222',
|
||||
},
|
||||
}],
|
||||
},
|
||||
legend: {
|
||||
display: displayLegend,
|
||||
labels: {
|
||||
fontFamily: 'Ubuntu, sans-serif',
|
||||
fontColor: '#000',
|
||||
},
|
||||
},
|
||||
});
|
||||
},
|
||||
});
|
||||
const renderChart = async (file, cfg) => {
|
||||
const chart = new chartjs(435, 320);
|
||||
await chart.drawChart(cfg);
|
||||
await chart.writeImageToFile('image/png', path.join(__dirname, `${file}.png`));
|
||||
};
|
||||
|
||||
|
@ -154,21 +156,21 @@ suite
|
|||
count: b.count,
|
||||
ops: b.hz,
|
||||
})).sort((a, b) => a.hz - b.hz);
|
||||
await renderChart('speed', 'Minification speed', {
|
||||
await renderChart('speed', {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: speedResults.map(r => r.name),
|
||||
datasets: [{
|
||||
label: 'Operations per second',
|
||||
...colours[0],
|
||||
data: speedResults.map(r => r.ops),
|
||||
}],
|
||||
},
|
||||
...chartOptions('Operations per second (higher is better)', false),
|
||||
});
|
||||
|
||||
const testNames = Object.keys(sizes);
|
||||
const programNames = Object.keys(programs);
|
||||
await renderChart('minification', 'Relative minified HTML file size', {
|
||||
await renderChart('minification', {
|
||||
type: 'bar',
|
||||
scaleFontColor: 'red',
|
||||
data: {
|
||||
|
@ -176,9 +178,10 @@ suite
|
|||
datasets: programNames.map((program, i) => ({
|
||||
label: program,
|
||||
...colours[i],
|
||||
data: testNames.map(test => sizes[test][program].relative),
|
||||
data: testNames.map(test => sizes[test][program].relative * 100),
|
||||
})),
|
||||
},
|
||||
...chartOptions('Relative minified HTML file size (lower is better)', true, tick => `${tick}%`),
|
||||
});
|
||||
})
|
||||
.run({'async': true});
|
||||
|
|
Binary file not shown.
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 34 KiB |
BIN
bench/speed.png
BIN
bench/speed.png
Binary file not shown.
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
Loading…
Reference in New Issue