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

perf(view_factory): add a benchmark that measures view_factory in isolation #1384

Closed
wants to merge 1 commit into from
Closed

perf(view_factory): add a benchmark that measures view_factory in isolation #1384

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions benchmark/web/bp.js
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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>