Skip to content

Commit bca1af9

Browse files
javifernandezjavifernandez
committed
Added some performance tools and resources.
1 parent 4a631a8 commit bca1af9

File tree

3 files changed

+177
-0
lines changed

3 files changed

+177
-0
lines changed

‎performance/flexVSGrid/create-test.py

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
#!/usr/bin/python
2+
3+
import getopt, sys
4+
5+
def main():
6+
7+
limit = int(sys.argv[1])
8+
className = sys.argv[2]
9+
start = 100
10+
increment = 100
11+
fileNamePrefix = 'test-%s' % className
12+
testSuite = 'standalone'
13+
typeOfTest = 'HTML'
14+
15+
opts, args = getopt.getopt(sys.argv[3:],"h:s:i:p:u:t:", ["help","start=","inc=",
16+
"prefix=","suite=","type"])
17+
for o, a in opts:
18+
if o in ("-s", "--start"):
19+
start = int(a)
20+
if o in ("-i", "--inc"):
21+
increment = int(a)
22+
if o in ("-u", "--suit"):
23+
testSuite = str(a)
24+
if o in ("-st", "--type"):
25+
typeOfTest = str(a)
26+
if o in ("-p", "--prefix"):
27+
fileNamePrefix = str(a)
28+
29+
if (10000 < limit or limit < 0) or \
30+
(className and className not in ('grid', 'flex')) or \
31+
(testSuite and testSuite not in ('standalone', 'chrome', 'webkit')) or \
32+
(typeOfTest and typeOfTest not in ('HTML', 'JS')) or \
33+
(start < 0 or start > limit) or (increment < 0 or increment > 500):
34+
usage()
35+
36+
createTestFiles(fileNamePrefix, className, limit, testSuite, typeOfTest, start, increment)
37+
38+
39+
def createTestFiles(fileNamePrefix, className, limit, testSuite, typeOfTest, start, increment):
40+
41+
for i in range (start, limit+1, increment):
42+
43+
f = open(fileNamePrefix + '-%04d.html' % i, 'w')
44+
f.write('<!DOCTYPE html>\n')
45+
f.write('<html>\n')
46+
f.write(' <head>\n')
47+
f.write(' <title>Comparison of layout performance between Flexbox and Grid layout</title>\n')
48+
f.write(' <link rel="stylesheet" href="resources/create-flex-VS-grid-tests.css" TYPE="text/css"></link>\n')
49+
if testSuite in ('chrome', 'webkit'):
50+
f.write(' <script src="../../resources/runner.js"></script>')
51+
if typeOfTest is 'JS':
52+
f.write(' <script src=\"resources/create-flex-VS-grid-tests.js\"></script>\n')
53+
f.write(' </head>\n')
54+
f.write(' <body>\n')
55+
if typeOfTest is 'HTML':
56+
staticHTMLBody(f, className, i)
57+
if testSuite in ('chrome', 'webkit'):
58+
performanceTestSuiteScript(f)
59+
elif typeOfTest in ('chrome', 'webkit'):
60+
preformanceSuiteJSBody(f, className, i)
61+
else:
62+
standaloneJSBody(f, className, i)
63+
f.write(' </body>\n')
64+
f.write('</html>\n')
65+
66+
67+
def staticHTMLBody(f, className, numberOfElements):
68+
69+
for i in range(0, numberOfElements):
70+
f.write(' <div class="%s">\n' % className)
71+
f.write(' <div class="i1">Item 1</div>\n')
72+
f.write(' <div class="i2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>\n')
73+
f.write(' <div class="i3">Item 3 longer</div>\n')
74+
f.write(' </div>\n')
75+
76+
77+
def standaloneJSBody(f, className, numberOfElements):
78+
79+
f.write(' <script>\n')
80+
f.write(' window.testFunction = createFlexVSGridTestFunction(%d, "%s");</script>\n' % (numberOfElements, className))
81+
f.write(' testFunction();')
82+
f.write(' </script>\n')
83+
84+
85+
def preformanceSuiteJSBody(f, className, numberOfElements):
86+
87+
f.write(' <script>\n')
88+
f.write(' PerfTestRunner.measureTime({\n')
89+
f.write(' description: "Measure layout performance of 200 grid blocks.",\n')
90+
f.write(' run: createFlexVSGridTestFunction(%d, "%s")\n' % (numberOfElements, className))
91+
f.write(' });\n')
92+
f.write(' </script>\n')
93+
94+
95+
def preformanceSuiteScript(f, className, numberOfElements):
96+
97+
f.write(' <script>\n')
98+
f.write(' var index = 0;\n')
99+
f.write(' PerfTestRunner.measureTime({\n')
100+
f.write(' description: "Measure layout performance of 200 grid blocks.",\n')
101+
f.write(' run: function() {\n')
102+
f.write(' document.body.style.width = ++index % 2 ? "99%" : "98%";\n')
103+
f.write(' PerfTestRunner.forceLayoutOrFullFrame();\n')
104+
f.write(' }\n')
105+
f.write(' });\n')
106+
f.write(' </script>\n')
107+
108+
109+
def usage():
110+
111+
print 'Usage: limit className [options]'
112+
print ' limit: Number of elements. Positive integer (max 9999). '
113+
print ' className: either "grid" or "flex".'
114+
print ' --start=, -s : Initial number of elements when creating a range of tests. Positive integer (max limit).'
115+
print ' --inc=, -i : Increment of elements when creating a range of tests. Positive integer (max 500).'
116+
print ' --prefix=, -p : prefix for the test file name. A "-%04d.html" sufix will be added. Default is "test-%s", where %s will be filled with "className").'
117+
print ' --suite=, -u : test suite indicator. Available options are "chrome", "webkit" or "standalone" (default).'
118+
print ' --type=, -t: type of generated HTML body test. Available options are "HTML" or "JS" (default).'
119+
sys.exit(2)
120+
121+
122+
if __name__ == "__main__":
123+
main()

‎performance/flexVSGrid/resources/create-flex-VS-grid-tests.css

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
.flex {
2+
background-color: silver;
3+
display: flex;
4+
height: 100px;
5+
}
6+
.grid {
7+
background-color: silver;
8+
display: grid;
9+
grid-template-columns: 100px 1fr auto;
10+
grid-template-rows: 100px;
11+
}
12+
.i1 { background-color: cyan; }
13+
.i2 { background-color: magenta; }
14+
.i3 { background-color: yellow; }
15+
.flex > .i1 { flex-basis: 100px; }
16+
.flex > .i2 { flex: 1; }
17+

‎performance/flexVSGrid/resources/create-flex-VS-grid-tests.js

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
(function() {
2+
function createElement(tag, parent, className, id) {
3+
var el = document.createElement(tag);
4+
el.className = className;
5+
if (id)
6+
el.id = id;
7+
parent.appendChild(el);
8+
return el;
9+
}
10+
11+
function createTextElement(parent, className, text) {
12+
var el = document.createElement("span");
13+
el.className = className;
14+
el.innerHTML = text;
15+
parent.appendChild(el);
16+
return el;
17+
}
18+
19+
function createWrapper(className) {
20+
var wrapper = createElement("div", document.body, className);
21+
var i1 = createElement("div", wrapper, "i1");
22+
createTextElement(i1, "text", "Item1");
23+
var i2 = createElement("div", wrapper, "i2");
24+
createTextElement(i2, "text", "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.");
25+
var i3 = createElement("div", wrapper, "i3");
26+
createTextElement(i3, "text", "Item 3 longer");
27+
}
28+
29+
function createTestFunction(limit, className) {
30+
return function() {
31+
for (var i = 0; i < limit; ++i)
32+
createWrapper(className);
33+
}
34+
}
35+
36+
window.createFlexVSGridTestFunction = createTestFunction;
37+
})();

0 commit comments

Comments
 (0)