Skip to content
This repository has been archived by the owner on Feb 22, 2018. It is now read-only.

Commit

Permalink
perf(view_factory): add a benchmark that measures view_factory in iso…
Browse files Browse the repository at this point in the history 
…lation

Closes #1384
  • Loading branch information
@vsavkin @jbdeboer
vsavkin authored and jbdeboer committed Aug 25, 2014
1 parent a101321 commit 81f539b
Show file tree
Hide file tree
Showing 3 changed files with 226 additions and 2 deletions.
5 changes: 3 additions & 2 deletions benchmark/web/bp.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -271,9 +271,10 @@ bp.Document.addLinks = function() {

[
// Add new benchmark suites here
['tree.html', 'TreeComponent']
['/tree.html', 'TreeComponent'],
['/view_factory/view_factory.html', 'ViewFactory']
].forEach((function (link) {
linkHtml += '<a href="'+ link[0] +'">'+ link[1] +'</a>';
linkHtml += '<a href="'+ link[0] +'">'+ link[1] +'</a> ';
}));

if (linkDiv) {
Expand Down
85 changes: 85 additions & 0 deletions benchmark/web/view_factory/view_factory.dart
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
library angular.benchmark.compiler;

import 'package:angular/angular.dart';
import 'package:angular/application_factory.dart';
import 'package:angular/mock/module.dart';
import 'package:benchmark_harness/benchmark_harness.dart';

import 'dart:html';
import 'dart:js' as js;


class ViewFactoryInvocaton {
ViewFactory viewFactory;
Scope scope;
DirectiveInjector di;
List<Node> elements;

ViewFactoryInvocaton(String template) {
final injector = applicationFactory().run();
final directiveMap = injector.get(DirectiveMap);
final compiler = injector.get(Compiler);

elements = _getElements(template);
scope = injector.get(Scope);
di = injector.get(DirectiveInjector);
viewFactory = compiler(elements, directiveMap);
}

run() {
viewFactory(scope, di, elements);
}

List<Node > _getElements(String template) {
var div = new DivElement()..setInnerHtml(template, treeSanitizer: new NullTreeSanitizer());
return new List.from(div.nodes);
}
}

final TEMPLATE_TEXT_NO_NG_BINDING = '<span>{{1 + 2}}'
'<span ng-if="1 != 2">left</span>'
'<span ng-if="1 != 2">right</span>'
'</span>';

final TEMPLATE_TEXT_WITH_NG_BINDING = '<span><span ng-class="{}">{{1 + 2}}</span>'
'<span ng-if="1 != 2">left</span>'
'<span ng-if="1 != 2">right</span>'
'</span>';

final TEMPLATE_NO_TEXT_WITH_NG_BINDING = '<span><span ng-class="{}"></span>'
'<span ng-if="1 != 2">left</span>'
'<span ng-if="1 != 2">right</span>'
'</span>';

final TEMPLATE_TEXT_WITH_NG_BINDING_3_TIMES = '<span>'
'<span ng-class="{}">{{1 + 2}}</span>'
'<span ng-class="{}">{{1 + 2}}</span>'
'<span ng-class="{}">{{1 + 2}}</span>'
'<span ng-if="1 != 2">left</span>'
'<span ng-if="1 != 2">right</span>'
'</span>';


void main() {
final templates = {
"(text + ng-binding) * 3" : TEMPLATE_TEXT_WITH_NG_BINDING_3_TIMES,
"text" : TEMPLATE_TEXT_NO_NG_BINDING,
"text + ng-binding" : TEMPLATE_TEXT_WITH_NG_BINDING,
"ng-binding" : TEMPLATE_NO_TEXT_WITH_NG_BINDING
};

final t = document.querySelector("#templates");
templates.keys.forEach((name) {
t.appendHtml("<option value='$name'>$name</option>");
});

viewFactory(_) {
final b = new ViewFactoryInvocaton(templates[t.value]);
int i = 5000;
while (i -- > 0) b.run();
}

js.context['benchmarkSteps'].add(new js.JsObject.jsify({
"name": "ViewFactory.call", "fn": new js.JsFunction.withThis(viewFactory)
}));
}
138 changes: 138 additions & 0 deletions benchmark/web/view_factory/view_factory.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,138 @@
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Compilation</title>

<script src="../underscore.js"></script>
<script src="../bp.js"></script>
<link rel="stylesheet" href="../bootstrap.min.css">

<style>
.bpLink { background: lightblue; padding: 1em; margin-bottom: 1.5em; }
.row.average { font-weight: bold; background: #eee; border-bottom: 1px solid #CCC; padding: 12px 0; margin-bottom: 12px; }
.row.headings { font-size: 18px; font-weight: bold; }
.average .title { font-size: 28px; }
.scrollable { max-height:250px !important; overflow-y: auto; }
</style>

<script src="view_factory.dart" type="application/dart"></script>
<script src="packages/browser/dart.js"></script>
<script src="packages/browser/interop.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div id="benchmarkContainer">
<div class="bpLink">
Benchmark Versions:
<span class="versionContent"></span>
</div>
<hr>
<form role="form" class="form-vertical">
<div class="form-group">
<label for="sampleRange">
Select number of samples to collect and average:
<span id="sampleRangeValue"></span>
</label>
<input id="sampleRange" type="text" value="20">
</div>
</form>

<div class="btn-group">
<select id="templates"></select>
</div>

<div class="btn-group">
<button class="loopBtn btn btn-default">Loop</button>
<button class="onceBtn btn btn-default">Once</button>
<button class="twentyFiveBtn btn btn-default">Loop 25x</button>
</div>
<hr>

<div class="table table-striped results-table">
<div class="thead">
<div class="row headings">
<div class="th col-md-2 col-md-offset-2">
test time (ms)
</div>
<div class="th col-md-2">
gc time (ms)
</div>
<div class="th col-md-2">
garbage (KB)
</div>
<div class="th col-md-2">
retained memory (KB)
</div>
</div>
</div>
<div class="tbody info"></div>
</div>

<script type="template" id="infoTemplate">
<div class="row average">
<div class="td col-md-2 title"><%= name %></div>
<div class="td col-md-2">
mean: <%= testTime.avg.mean.toFixed(2) %>ms
&plusmn; <%= Math.round(testTime.avg.coefficientOfVariation * 100) %>%
<br>
(stddev <%= testTime.avg.stdDev.toFixed(2) %>)
<br>
(min <%= testTime.min.toFixed(2) %> /
max <%= testTime.max.toFixed(2) %>)
</div>
<div class="td col-md-2">
mean: <%= gcTime.avg.mean.toFixed(2) %>ms
<br>
(combined: <%= (testTime.avg.mean + gcTime.avg.mean).toFixed(2) %>ms)
</div>
<div class="td col-md-2">
mean: <%= (garbageCount.avg.mean / 1e3).toFixed(2) %>KB
</div>
<div class="td col-md-2">
mean: <%= (retainedCount.avg.mean / 1e3).toFixed(2) %>KB
</div>
</div>
<div class="row scrollable">
<div class="td col-md-2 col-md-offset-2">
<div class="sampleContainer">
<% _.each(testTime.history, function(time) { %>
<%= time.toFixed(2) %>
<br>
<% }); %>
</div>
</div>
<div class="td col-md-2">
<div class="sampleContainer">
<% _.each(gcTime.history, function(time) { %>
<%= time.toFixed(2) %>
<br>
<% }); %>
</div>
</div>
<div class="td col-md-2">
<div class="sampleContainer">
<% _.each(garbageCount.history, function(count) { %>
<%= (count / 1e3).toFixed(2) %>
<br>
<% }); %>
</div>
</div>
<div class="td col-md-2">
<div class="sampleContainer">
<% _.each(retainedCount.history, function(count) { %>
<%= (count / 1e3).toFixed(2) %>
<br>
<% }); %>
</div>
</div>
</div>
</script>
</div>
</div>
</div>
</div>
</body>
</html>

0 comments on commit 81f539b

Please sign in to comment.