axemclion/Readme.md

Ariya Hidayat has written an excellent article on GPU Composited CSS and how it can be used to optimize web rendering performance.

The impact of adding CSS transforms is evident in developer timline and this experiment is a way to capture that information using browser-perf. The results from this experiment clearly indicate how certain CSS properties move rendering load to the GPU, and how that that impact the overall responsiveness of the page.

Pre-requisites

Ensure that you have node and npm installed
Ensure that you have Selenium running, or can connect to Sauce Labs
Dowload this gist using git clone https://gist.github.com/853d34ebd776047836f3.git
Install other dependencies using npm install

Experiment 1 - Impact of number of rectangles on the screen - Page

Run node index.js to get the data for the number for the specified number of rectangles. Remember to change the string 'addOne()' to values like addTen() or addHundred() for getting more rectangles on the screen, and seeing what the numbers for each look like.

Experiment 2 - Improvement when color is not changed - Change color vs Opacity Trick

The purpose of this experiment was to prove that the changing the color causes a paint. An effective way to achieve the same effect is to have 2 rectangles with alternative opacity.

Experiment 1

As expected, the number of composite layers, and the number of Layers change. All other things like amount of Javascript executed, paint time, etc seem to remain similar across the three cases

Metric	One	Ten	Hundred	Units	Source
CompositeLayers	20.00048828	58.99951172	171.0007324	ms	ChromeTimelineMetrics
CompositeLayers_avg	0.222227648	0.522119573	1.257358327	ms	ChromeTimelineMetrics
CompositeLayers_count	90	113	136	count	ChromeTimelineMetrics
Layers	7	17	106	count	RuntimePerfMetrics
Paint	0	2.7265625	277.9980469	ms	ChromeTimelineMetrics
Paint_avg	0	0.136328125	0.037915718	ms	ChromeTimelineMetrics
Paint_count	1	20	7332	count	ChromeTimelineMetrics

Experiment 2

In experiment 2, the higher number of Paint Counts and Composite Layers indicate the extra work that the GPU has to perform.

</tr>

Metric	Color Change	Opacity Change	Unit
CompositeLayers	33.99902344	10.00048828	ms
Paint_count	51	5	count
Layers	6	2	count

Here is the full data -

Experiment 1

fetchStart	0	0	0	ms	NavTimingMetrics
domainLookupStart	4	3	7	ms	NavTimingMetrics
domainLookupEnd	16	28	5	ms	NavTimingMetrics
connectStart	0	0	0	ms	NavTimingMetrics
connectEnd	2	2	5	ms	NavTimingMetrics
requestStart	1	0	0	ms	NavTimingMetrics
responseStart	87	80	57	ms	NavTimingMetrics
domLoading	4	3	8	ms	NavTimingMetrics
domInteractive	100	91	53	ms	NavTimingMetrics
domContentLoadedEventStart	0	0	0	ms	NavTimingMetrics
domContentLoadedEventEnd	0	0	0	ms	NavTimingMetrics
domComplete	0	1	0	ms	NavTimingMetrics
loadEventStart	0	0	0	ms	NavTimingMetrics
loadEventEnd	0	0	0	ms	NavTimingMetrics
Program	544.0014648	651.0019531	1249.999268	ms	ChromeTimelineMetrics
Program_avg	0.782735921	0.841087795	1.390433001	ms	ChromeTimelineMetrics
Program_max	165	169.9997559	155.0002441	ms	ChromeTimelineMetrics
Program_count	695	774	899	count	ChromeTimelineMetrics
FireAnimationFrame	6	3.999511719	6.000488281	ms	ChromeTimelineMetrics
FireAnimationFrame_avg	0.0625	0.037378614	0.045458245	ms	ChromeTimelineMetrics
FireAnimationFrame_max	1	1.000244141	1.000244141	ms	ChromeTimelineMetrics
FireAnimationFrame_count	96	107	132	count	ChromeTimelineMetrics
FunctionCall	162.0012207	178.9978027	177.9992676	ms	ChromeTimelineMetrics
FunctionCall_avg	0.861708621	0.852370489	0.757443692	ms	ChromeTimelineMetrics
FunctionCall_max	26	29	24	ms	ChromeTimelineMetrics
FunctionCall_count	188	210	235	count	ChromeTimelineMetrics
CompositeLayers	20.00048828	58.99951172	171.0007324	ms	ChromeTimelineMetrics
CompositeLayers_avg	0.222227648	0.522119573	1.257358327	ms	ChromeTimelineMetrics
CompositeLayers_max	3	6	14.99975586	ms	ChromeTimelineMetrics
CompositeLayers_count	90	113	136	count	ChromeTimelineMetrics
TimerFire	24	45.99951172	44.00048828	ms	ChromeTimelineMetrics
TimerFire_avg	0.705882353	0.919990234	0.897969149	ms	ChromeTimelineMetrics
TimerFire_max	11	29	25	ms	ChromeTimelineMetrics
TimerFire_count	34	50	49	count	ChromeTimelineMetrics
RecalculateStyles	46.99975586	36.00048828	235.9975586	ms	ChromeTimelineMetrics
RecalculateStyles_avg	0.479589346	0.349519304	1.815365835	ms	ChromeTimelineMetrics
RecalculateStyles_max	8	4.000244141	5.000244141	ms	ChromeTimelineMetrics
RecalculateStyles_count	98	103	130	count	ChromeTimelineMetrics
Layout	32.00024414	29.99951172	23.99926758	ms	ChromeTimelineMetrics
Layout_avg	0.820519081	0.599990234	0.499984741	ms	ChromeTimelineMetrics
Layout_max	26	15	11	ms	ChromeTimelineMetrics
Layout_count	39	50	48	count	ChromeTimelineMetrics
GCEvent	36	18.00024414	16.00024414	ms	ChromeTimelineMetrics
GCEvent_avg	5.142857143	2.571463449	2.666707357	ms	ChromeTimelineMetrics
GCEvent_max	27	7.000244141	7	ms	ChromeTimelineMetrics
GCEvent_count	7	7	6	count	ChromeTimelineMetrics
ParseHTML	1.449951172	21.00024414	19.99951172	ms	ChromeTimelineMetrics
ParseHTML_avg	0.161105686	1.909113104	1.818137429	ms	ChromeTimelineMetrics
ParseHTML_max	0.557128906	14.00024414	12	ms	ChromeTimelineMetrics
ParseHTML_count	9	11	11	count	ChromeTimelineMetrics
PaintSetup	60.00024414	90.00415039	4.582519531	ms	ChromeTimelineMetrics
PaintSetup_avg	0.441178266	0.146110634	0.041659268	ms	ChromeTimelineMetrics
PaintSetup_max	16	16	1.0859375	ms	ChromeTimelineMetrics
PaintSetup_count	136	616	110	count	ChromeTimelineMetrics
Paint	0	2.7265625	277.9980469	ms	ChromeTimelineMetrics
Paint_avg	0	0.136328125	0.037915718	ms	ChromeTimelineMetrics
Paint_max	0	0.999023438	13	ms	ChromeTimelineMetrics
Paint_count	1	20	7332	count	ChromeTimelineMetrics
EvaluateScript	24.00024414	146	131	ms	ChromeTimelineMetrics
EvaluateScript_avg	2.181840376	146	131	ms	ChromeTimelineMetrics
EvaluateScript_max	15	146	131	ms	ChromeTimelineMetrics
EvaluateScript_count	11	1	1	count	ChromeTimelineMetrics
EventDispatch	141	35.99951172	31.00024414	ms	ChromeTimelineMetrics
EventDispatch_avg	141	5.99991862	5.166707357	ms	ChromeTimelineMetrics
EventDispatch_max	141	23.99975586	20.00024414	ms	ChromeTimelineMetrics
EventDispatch_count	1	6	6	count	ChromeTimelineMetrics
XHRReadyStateChange	34	1.000244141	2	ms	ChromeTimelineMetrics
XHRReadyStateChange_avg	5.666666667	0.111138238	0.222222222	ms	ChromeTimelineMetrics
XHRReadyStateChange_max	22.00024414	1.000244141	1	ms	ChromeTimelineMetrics
XHRReadyStateChange_count	6	9	9	count	ChromeTimelineMetrics
DecodeImage	0	0	0	ms	ChromeTimelineMetrics
DecodeImage_avg	0	0	0	ms	ChromeTimelineMetrics
DecodeImage_max	0	0	0	ms	ChromeTimelineMetrics
DecodeImage_count	9	1	1	count	ChromeTimelineMetrics
ResizeImage	0	0	0	ms	ChromeTimelineMetrics
ResizeImage_avg	0	0	0	ms	ChromeTimelineMetrics
ResizeImage_max	0	0	0	ms	ChromeTimelineMetrics
ResizeImage_count	2	2	2	count	ChromeTimelineMetrics
mean_frame_time	8.249948905	9.044228188	8.350725165	ms	ChromeTracingMetrics
jank	37.99233175	98.28513931	63.6345952	ms	ChromeTracingMetrics
mostly_smooth	3.715000033	4.818699968	2.092000008	percentile	ChromeTracingMetrics
Layers	7	17	106	count	RuntimePerfMetrics
PaintedArea_total	4512218	10029906	72008498	sq pixels	RuntimePerfMetrics
PaintedArea_avg	33178.07353	16282.31494	9821.126296	sqpixels	RuntimePerfMetrics
NodePerLayout_avg	45.05882353	36.92	40.5625	count	RuntimePerfMetrics
ExpensivePaints	0	0	0	count	RuntimePerfMetrics
GCInsideAnimation	0	0	0	count	RuntimePerfMetrics
ExpensiveEventHandlers	1	1	1	count	RuntimePerfMetrics

Experiment 2

</tr>
<tr>
	<td>CompositeLayers_avg</td>
	<td>0.361691739</td>
	<td>0.113641912</td>
	<td>ms</td>

</tr>
<tr>
	<td>CompositeLayers_count</td>
	<td>94</td>
	<td>88</td>
	<td>count</td>

</tr>
<tr>
	<td>CompositeLayers_max</td>
	<td>7</td>
	<td>4.000244141</td>
	<td>ms</td>

</tr>
<tr>
	<td>EvaluateScript</td>
	<td>142.9997559</td>
	<td>129.9997559</td>
	<td>ms</td>

</tr>
<tr>
	<td>EvaluateScript_avg</td>
	<td>142.9997559</td>
	<td>129.9997559</td>
	<td>ms</td>

</tr>
<tr>
	<td>EvaluateScript_count</td>
	<td>1</td>
	<td>1</td>
	<td>count</td>

</tr>
<tr>
	<td>EvaluateScript_max</td>
	<td>142.9997559</td>
	<td>129.9997559</td>
	<td>ms</td>

</tr>
<tr>
	<td>EventDispatch</td>
	<td>30.00024414</td>
	<td>31</td>
	<td>ms</td>

</tr>
<tr>
	<td>EventDispatch_avg</td>
	<td>5.00004069</td>
	<td>5.166666667</td>
	<td>ms</td>

</tr>
<tr>
	<td>EventDispatch_count</td>
	<td>6</td>
	<td>6</td>
	<td>count</td>

</tr>
<tr>
	<td>EventDispatch_max</td>
	<td>16.99975586</td>
	<td>20</td>
	<td>ms</td>

</tr>
<tr>
	<td>FireAnimationFrame</td>
	<td>2</td>
	<td>10.00024414</td>
	<td>ms</td>

</tr>
<tr>
	<td>FireAnimationFrame_avg</td>
	<td>0.021978022</td>
	<td>0.117649931</td>
	<td>ms</td>

</tr>
<tr>
	<td>FireAnimationFrame_count</td>
	<td>91</td>
	<td>85</td>
	<td>count</td>

</tr>
<tr>
	<td>FireAnimationFrame_max</td>
	<td>1</td>
	<td>1.000244141</td>
	<td>ms</td>

</tr>
<tr>
	<td>FunctionCall</td>
	<td>134.0009766</td>
	<td>147.0024414</td>
	<td>ms</td>

</tr>
<tr>
	<td>FunctionCall_avg</td>
	<td>0.937069766</td>
	<td>1.080900304</td>
	<td>ms</td>

</tr>
<tr>
	<td>FunctionCall_count</td>
	<td>143</td>
	<td>136</td>
	<td>count</td>

</tr>
<tr>
	<td>FunctionCall_max</td>
	<td>20.99975586</td>
	<td>23</td>
	<td>ms</td>

</tr>
<tr>
	<td>GCEvent</td>
	<td>16.00048828</td>
	<td>29.99951172</td>
	<td>ms</td>

</tr>
<tr>
	<td>GCEvent_avg</td>
	<td>2.666748047</td>
	<td>5.999902344</td>
	<td>ms</td>

</tr>
<tr>
	<td>GCEvent_count</td>
	<td>6</td>
	<td>5</td>
	<td>count</td>

</tr>
<tr>
	<td>GCEvent_max</td>
	<td>8</td>
	<td>25</td>
	<td>ms</td>

</tr>
<tr>
	<td>Layout</td>
	<td>14.99951172</td>
	<td>22</td>
	<td>ms</td>

</tr>
<tr>
	<td>Layout_avg</td>
	<td>1.24995931</td>
	<td>2.2</td>
	<td>ms</td>

</tr>
<tr>
	<td>Layout_count</td>
	<td>12</td>
	<td>10</td>
	<td>count</td>

</tr>
<tr>
	<td>Layout_max</td>
	<td>7.999755859</td>
	<td>12</td>
	<td>ms</td>

</tr>
<tr>
	<td>Paint</td>
	<td>42</td>
	<td>19.99975586</td>
	<td>ms</td>

</tr>
<tr>
	<td>Paint_avg</td>
	<td>0.823529412</td>
	<td>3.999951172</td>
	<td>ms</td>

</tr>
<tr>
	<td>Paint_count</td>
	<td>51</td>
	<td>5</td>
	<td>count</td>

</tr>
<tr>
	<td>Paint_max</td>
	<td>17.99975586</td>
	<td>13</td>
	<td>ms</td>

</tr>
<tr>
	<td>PaintSetup</td>
	<td>2.028808594</td>
	<td>1.038818359</td>
	<td>ms</td>

</tr>
<tr>
	<td>PaintSetup_avg</td>
	<td>0.225423177</td>
	<td>0.25970459</td>
	<td>ms</td>

</tr>
<tr>
	<td>PaintSetup_count</td>
	<td>9</td>
	<td>4</td>
	<td>count</td>

</tr>
<tr>
	<td>PaintSetup_max</td>
	<td>0.994140625</td>
	<td>0.740966797</td>
	<td>ms</td>

</tr>
<tr>
	<td>ParseHTML</td>
	<td>24</td>
	<td>20.99951172</td>
	<td>ms</td>

</tr>
<tr>
	<td>ParseHTML_avg</td>
	<td>2.181818182</td>
	<td>1.90904652</td>
	<td>ms</td>

</tr>
<tr>
	<td>ParseHTML_count</td>
	<td>11</td>
	<td>11</td>
	<td>count</td>

</tr>
<tr>
	<td>ParseHTML_max</td>
	<td>15.00024414</td>
	<td>13</td>
	<td>ms</td>

</tr>
<tr>
	<td>Program</td>
	<td>479.0021973</td>
	<td>474.001709</td>
	<td>ms</td>

</tr>
<tr>
	<td>Program_avg</td>
	<td>0.8330473</td>
	<td>0.793972712</td>
	<td>ms</td>

</tr>
<tr>
	<td>Program_count</td>
	<td>575</td>
	<td>597</td>
	<td>count</td>

</tr>
<tr>
	<td>Program_max</td>
	<td>168.9997559</td>
	<td>152</td>
	<td>ms</td>

</tr>
<tr>
	<td>RecalculateStyles</td>
	<td>17.00097656</td>
	<td>17.99926758</td>
	<td>ms</td>

</tr>
<tr>
	<td>RecalculateStyles_avg</td>
	<td>0.309108665</td>
	<td>0.183665996</td>
	<td>ms</td>

</tr>
<tr>
	<td>RecalculateStyles_count</td>
	<td>55</td>
	<td>98</td>
	<td>count</td>

</tr>
<tr>
	<td>RecalculateStyles_max</td>
	<td>3</td>
	<td>3</td>
	<td>ms</td>

</tr>
<tr>
	<td>TimerFire</td>
	<td>24.99975586</td>
	<td>25.00048828</td>
	<td>ms</td>

</tr>
<tr>
	<td>TimerFire_avg</td>
	<td>4.999951172</td>
	<td>6.25012207</td>
	<td>ms</td>

</tr>
<tr>
	<td>TimerFire_count</td>
	<td>5</td>
	<td>4</td>
	<td>count</td>

</tr>
<tr>
	<td>TimerFire_max</td>
	<td>20.99975586</td>
	<td>23</td>
	<td>ms</td>

</tr>
<tr>
	<td>XHRReadyStateChange</td>
	<td>3.000244141</td>
	<td>1</td>
	<td>ms</td>

</tr>
<tr>
	<td>XHRReadyStateChange_avg</td>
	<td>0.33336046</td>
	<td>0.111111111</td>
	<td>ms</td>

</tr>
<tr>
	<td>XHRReadyStateChange_count</td>
	<td>9</td>
	<td>9</td>
	<td>count</td>

</tr>
<tr>
	<td>XHRReadyStateChange_max</td>
	<td>1.000244141</td>
	<td>1</td>
	<td>ms</td>

</tr>
<tr>
	<td>jank</td>
	<td>29.40688608</td>
	<td>42.37636342</td>
	<td>ms</td>

</tr>
<tr>
	<td>mean_frame_time</td>
	<td>8.288616162</td>
	<td>8.029944445</td>
	<td>ms</td>

</tr>
<tr>
	<td>mostly_smooth</td>
	<td>17.62239996</td>
	<td>16.05000001</td>
	<td>percentile</td>

</tr>
<tr>
	<td>connectEnd</td>
	<td>2</td>
	<td>2</td>
	<td>ms</td>

</tr>
<tr>
	<td>connectStart</td>
	<td>0</td>
	<td>0</td>
	<td>ms</td>

</tr>
<tr>
	<td>domainLookupEnd</td>
	<td>1</td>
	<td>83</td>
	<td>ms</td>

</tr>
<tr>
	<td>domainLookupStart</td>
	<td>57</td>
	<td>63</td>
	<td>ms</td>

</tr>
<tr>
	<td>domComplete</td>
	<td>1083</td>
	<td>1737</td>
	<td>ms</td>

</tr>
<tr>
	<td>domContentLoadedEventEnd</td>
	<td>2</td>
	<td>3</td>
	<td>ms</td>

</tr>
<tr>
	<td>domContentLoadedEventStart</td>
	<td>0</td>
	<td>0</td>
	<td>ms</td>

</tr>
<tr>
	<td>domInteractive</td>
	<td>1623</td>
	<td>216</td>
	<td>ms</td>

</tr>
<tr>
	<td>domLoading</td>
	<td>7</td>
	<td>20</td>
	<td>ms</td>

</tr>
<tr>
	<td>fetchStart</td>
	<td>152</td>
	<td>81</td>
	<td>ms</td>

</tr>
<tr>
	<td>firstPaint</td>
	<td>5283.99992</td>
	<td>315.9999847</td>
	<td>ms</td>

</tr>
<tr>
	<td>loadEventEnd</td>
	<td>0</td>
	<td>0</td>
	<td>ms</td>

</tr>
<tr>
	<td>loadEventStart</td>
	<td>0</td>
	<td>0</td>
	<td>ms</td>

</tr>
<tr>
	<td>requestStart</td>
	<td>0</td>
	<td>0</td>
	<td>ms</td>

</tr>
<tr>
	<td>responseStart</td>
	<td>5149</td>
	<td>96</td>
	<td>ms</td>

</tr>
<tr>
	<td>droppedFrameCount</td>
	<td>8</td>
	<td>11</td>
	<td>count</td>
	
</tr>
<tr>
	<td>meanFrameTime</td>
	<td>17.79310345</td>
	<td>18.51851852</td>
	<td>ms</td>
	
</tr>
<tr>
	<td>numAnimationFrames</td>
	<td>86</td>
	<td>80</td>
	<td>count</td>
	
</tr>
<tr>
	<td>numFramesSentToScreen</td>
	<td>86</td>
	<td>80</td>
	<td>count</td>
	
</tr>
<tr>
	<td>ExpensiveEventHandlers</td>
	<td>1</td>
	<td>1</td>
	<td>count</td>

</tr>
<tr>
	<td>ExpensivePaints</td>
	<td>1</td>
	<td>0</td>
	<td>count</td>

</tr>
<tr>
	<td>GCInsideAnimation</td>
	<td>0</td>
	<td>0</td>
	<td>count</td>

</tr>
<tr>
	<td>Layers</td>
	<td>6</td>
	<td>2</td>
	<td>count</td>

</tr>
<tr>
	<td>NodePerLayout_avg</td>
	<td>66.66666667</td>
	<td>74.5</td>
	<td>count</td>

</tr>
<tr>
	<td>PaintedArea_avg</td>
	<td>9480.235294</td>
	<td>4950</td>
	<td>sq pixels</td>

</tr>
<tr>
	<td>PaintedArea_total</td>
	<td>483492</td>
	<td>24750</td>
	<td>sq pixels</td>
</tr>

Metric	Color Change	Opacity Change	Unit
CompositeLayers	33.99902344	10.00048828	ms

	// Experiment 2 - Changing color using opacity

	var colorChange = 'http://codepen.io/ariya/full/xuwgy';
	var opacityChange = 'http://codepen.io/ariya/full/ofDIh';

	require('browser-perf')(opacityChange, function(err, data) {
	if (err) {
	console.log(err);
	} else {
	console.log('Results');
	for (var key in data[0]) {
	var val = data[0][key];
	console.log([key, val.value, val.unit, val.source].join());
	}
	}
	}, {
	browsers: 'chrome',
	actions: function(browser) {
	return browser.sleep(500);
	},
	log: console.log,
	debug: true
	});

	require('browser-perf')('http://codepen.io/ariya/full/xuwgy', function(err, data) {
	if (err) {
	console.log(err);
	} else {
	console.log('Results');
	for (var key in data[0]) {
	var val = data[0][key];
	console.log([key, val.value, val.unit, val.source].join());
	}
	}
	}, {
	browsers: 'chrome',
	actions: function(browser) {
	return browser.frame('result').then(function() {
	return browser.execute('addOne()');
	}).then(function() {
	return browser.sleep(500);
	});
	},
	log: console.log,
	debug: true
	});

	{
	"name": "GpuCompositiedcss",
	"version": "0.0.0",
	"main": "index.js",
	"license": "Apache 2.0",
	"dependencies": {
	"browser-perf": "^0.1.13"
	}
	}