fix(benchmarks): update react and polymer benchmarks and get tree update numbers for all of the benchmarks as well.

Closes #4709
This commit is contained in:
Tobias Bosch
2015-10-13 15:10:20 -07:00
parent 5c48236f61
commit bc10dc3ed0
13 changed files with 169 additions and 85 deletions

View File

@ -37,7 +37,7 @@ describe('ng2 static tree benchmark', function() {
runClickBenchmark({
url: URL,
buttons: ['#baselineDestroyDom', '#baselineCreateDom'],
id: 'baseline.tree.create',
id: 'baseline.static.tree.create',
params: [{name: 'depth', value: 9, scale: 'log2'}]
}).then(done, done.fail);
});
@ -46,7 +46,7 @@ describe('ng2 static tree benchmark', function() {
runClickBenchmark({
url: URL,
buttons: ['#baselineCreateDom'],
id: 'baseline.tree.update',
id: 'baseline.static.tree.update',
params: [{name: 'depth', value: 9, scale: 'log2'}]
}).then(done, done.fail);
});

View File

@ -6,11 +6,21 @@ describe('polymer tree benchmark', function() {
afterEach(verifyNoBrowserErrors);
it('should log the stats', function(done) {
it('should log the stats (create)', function(done) {
runClickBenchmark({
url: URL,
buttons: ['#destroyDom', '#createDom'],
id: 'polymer.tree',
id: 'polymer.tree.create',
params: [{name: 'depth', value: 9, scale: 'log2'}],
waitForAngular2: false
}).then(done, done.fail);
});
it('should log the stats (update)', function(done) {
runClickBenchmark({
url: URL,
buttons: ['#createDom'],
id: 'polymer.tree.update',
params: [{name: 'depth', value: 9, scale: 'log2'}],
waitForAngular2: false
}).then(done, done.fail);

View File

@ -6,11 +6,21 @@ describe('ng1.x tree benchmark', function() {
afterEach(verifyNoBrowserErrors);
it('should log the stats', function(done) {
it('should log the stats (create)', function(done) {
runClickBenchmark({
url: URL,
buttons: ['#destroyDom', '#createDom'],
id: 'ng1.static.tree',
id: 'ng1.static.tree.create',
params: [],
waitForAngular2: false
}).then(done, done.fail);
});
it('should log the stats (update)', function(done) {
runClickBenchmark({
url: URL,
buttons: ['#createDom'],
id: 'ng1.static.tree.update',
params: [],
waitForAngular2: false
}).then(done, done.fail);

View File

@ -6,11 +6,21 @@ describe('ng1.x tree benchmark', function() {
afterEach(verifyNoBrowserErrors);
it('should log the stats', function(done) {
it('should log the stats (create)', function(done) {
runClickBenchmark({
url: URL,
buttons: ['#destroyDom', '#createDom'],
id: 'ng1.tree',
id: 'ng1.tree.create',
params: [{name: 'depth', value: 9, scale: 'log2'}],
waitForAngular2: false
}).then(done, done.fail);
});
it('should log the stats (update)', function(done) {
runClickBenchmark({
url: URL,
buttons: ['#createDom'],
id: 'ng1.tree.update',
params: [{name: 'depth', value: 9, scale: 'log2'}],
waitForAngular2: false
}).then(done, done.fail);

View File

@ -3,41 +3,22 @@
<template>
<span>
<span>{{data.value}}</span>
<!-- TODO(tbosch): use the builtin conditional template when it is available in Polymer 0.8 -->
<span id="leftTree"></span>
<span id="rightTree"></span>
<template is="dom-if" if="[[data.left]]">
<binary-tree data="[[data.left]]"></binary-tree>
</template>
<template is="dom-if" if="[[data.right]]">
<binary-tree data="[[data.right]]"></binary-tree>
</template>
</span>
</template>
</dom-module>
<script>
(function() {
Polymer({
is: 'binary-tree',
properties: {
data: Object
},
leftTree: null,
rightTree: null,
dataChanged: function() {
var data = this.data || {};
this._updateTree(data.left, 'leftTree');
this._updateTree(data.right, 'rightTree');
},
_updateTree: function(data, treeName) {
if (data) {
if (!this[treeName]) {
this[treeName] = document.createElement('binary-tree');
}
this[treeName].data = data;
this.$[treeName].appendChild(this[treeName]);
} else {
if (this[treeName]) this[treeName].remove();
this[treeName] = null;
}
},
properties: {
data: 'dataChanged'
}
});
})();
Polymer({
is: 'binary-tree',
properties: {
data: Object
},
leftTree: null,
rightTree: null
});
</script>

View File

@ -5,12 +5,6 @@
</head>
<body>
<h2>TODO</h2>
<ul>
<li>TODO: Does not use shadow DOM</li>
<li>TODO: Does not yet use builtin `if` construct as it uses a preview version of Polymer</li>
</ul
<h2>Params</h2>
<form>
Depth:
@ -19,10 +13,9 @@
<button>Apply</button>
</form>
<h2>Polymer JS 0.8-preview tree benchmark</h2>
<h2>Polymer JS 1.x tree benchmark</h2>
<root-tree></root-tree>
<script src="url_params_to_form.js" type="text/javascript"></script>
</body>

View File

@ -27,7 +27,7 @@ angular.module('app', [])
var transcludeFn;
return {
compile: function(element, attrs) {
var expr = $parse(attrs.treeIf);
var expr = $parse('!!' + attrs.treeIf);
var template = '<tree data="' + attrs.treeIf + '"></tree>';
var transclude;
return function($scope, $element, $attrs) {

View File

@ -404,6 +404,7 @@ export function main() {
bindToController: true,
template: '{{ctl.status}}',
require: 'ng1',
controllerAs: 'ctrl',
controller: Class({constructor: function() { this.status = 'WORKS'; }}),
link: function(scope, element, attrs, linkController) {
expect(scope.$root).toEqual($rootScope);
@ -442,6 +443,7 @@ export function main() {
bindToController: true,
template: '{{parent.parent}}:{{ng1.status}}',
require: ['ng1', '^parent', '?^^notFound'],
controllerAs: 'ctrl',
controller: Class({constructor: function() { this.status = 'WORKS'; }}),
link: function(scope, element, attrs, linkControllers) {
expect(linkControllers[0].status).toEqual('WORKS');