WEBDIENSTE/YellowLabTools
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Total JS time

Browse Source
This commit is contained in:
Gaël Métais
2014-08-25 14:30:45 +02:00
parent 8c6666a33c
commit c77236b71c
2 changed files with 67 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/node_views/results.html
+44 -5
View File
@@ -5,18 +5,24 @@
<link rel="stylesheet" type="text/css" href="/public/styles/main.css">
<link rel="stylesheet" type="text/css" href="/public/styles/results.css">
<script src="/bower_components/angular/angular.min.js"></script>
<script src="/bower_components/angular-route/angular-route.js"></script>
<script src="/public/scripts/app.js"></script>
<script src="/public/scripts/resultsCtrl.js"></script>
<script src="/public/scripts/filters.js"></script>
</head>
<body ng-app="Spaghetti" ng-controller="ResultsCtrl">
<body ng-app="YellowLabTools" ng-controller="ResultsCtrl">
<h1>Javascript Spaghetti Profiler</h1>
<div ng-if="undefined">Untangling and counting the spaghettis...</div>
<div class="ng-cloak">
<div>Tested url: <a class="testedUrl" href="{{phantomasResults.url}}" target="_blank">{{phantomasResults.url}}</a></div>
<div>Tested url: &nbsp; <a class="testedUrl" href="{{phantomasResults.url}}" target="_blank">{{phantomasResults.url}}</a></div>
<div class="resultsMenu">
<a class="menuItem" href="/"><span>New test<span></a>
<div class="menuItem" ng-if="!phantomasResults.error" ng-class="{active: view == 'summary'}" ng-click="view = 'summary'"><span>Summary</span></div>
<div class="menuItem" ng-if="!phantomasResults.error" ng-class="{active: view == 'metrics'}" ng-click="view = 'metrics'"><span>Metrics</span></div>
<div class="menuItem" ng-if="!phantomasResults.error" ng-class="{active: view == 'execution'}" ng-click="view = 'execution'"><span>Spaghetti</span></div>
</div>
<div ng-if="phantomasResults.error">
<h2>Error: {{phantomasResults.error}}</h2>
@@ -27,7 +33,34 @@
<div ng-if="phantomasResults.error == 1001">Javascript execution tree error</div>
</div>
<div ng-if="!phantomasResults.error" class="execution">
<div ng-show="view == 'summary' && !phantomasResults.error" class="summary">
<h2>Summary</h2>
<div>Javascript manipulation time: {{totalJSTime}} ms</div>
<div>Javascript onDOMReady time: {{phantomasResults.metrics.domContentLoadedEnd - phantomasResults.metrics.domContentLoaded}} ms</div>
<div>Scripts count: {{phantomasResults.metrics.jsCount}}</div>
<div>DOM elements count: {{phantomasResults.metrics.DOMelementsCount}}</div>
<div>DOM max depth: {{phantomasResults.metrics.DOMelementMaxDepth}}</div>
<div>DOM queries: {{phantomasResults.metrics.DOMqueries}}</div>
<div>DOM inserts: {{phantomasResults.metrics.DOMinserts}}</div>
<div>Events bound: {{phantomasResults.metrics.eventsBound}}</div>
<div>document.write() calls: {{phantomasResults.metrics.documentWriteCalls}}</div>
<div>eval calls: {{phantomasResults.metrics.evalCalls}}</div>
<div>Javascript errors: {{phantomasResults.metrics.jsErrors}}</div>
<div ng-if="phantomasResults.metrics.jQueryDifferentVersions == 1">jQuery version: {{phantomasResults.metrics.jQueryVersion}}</div>
<div ng-if="phantomasResults.metrics.jQueryDifferentVersions > 1">
Number of jQuery versions loaded: {{phantomasResults.metrics.jQueryDifferentVersions}}
(<span ng-repeat="version in phantomasResults.offenders.jQueryDifferentVersions">{{version}}<span ng-show="!$last"> & </span></span>)
</div>
</div>
<div ng-show="view == 'metrics' && !phantomasResults.error" class="metrics">
<h2>Metrics</h2>
<ul>
<li ng-repeat="(key,val) in phantomasResults.metrics">{{key}}: {{val}}</li>
</ul>
</div>
<div ng-show="view == 'execution' && !phantomasResults.error" class="execution">
<h2>Javascript interactions with the DOM</h2>
<div class="filters">
<div>
@@ -143,6 +176,12 @@
</div>
<script>var _phantomas_results = %%RESULTS%%;</script>
<script>
var _phantomas_results = %%RESULTS%%;
var _phantomas_metadata = %%METADATA%%;
</script>
</body>
</html>
app/public/scripts/resultsCtrl.js
+23
View File
@@ -4,11 +4,25 @@ app.controller('ResultsCtrl', function ($scope) {
// Grab results from nodeJS served page
$scope.phantomasResults = window._phantomas_results;
$scope.view = 'summary';
$scope.slowRequestsOn = false;
$scope.slowRequestsLimit = 5;
if ($scope.phantomasResults.offenders && $scope.phantomasResults.offenders.javascriptExecutionTree) {
$scope.javascript = JSON.parse($scope.phantomasResults.offenders.javascriptExecutionTree);
// Read the main elements of the tree and sum the total time
$scope.totalJSTime = 0;
treeRunner($scope.javascript, function(node) {
if (node.data.time) {
$scope.totalJSTime += node.data.time;
}
if (node.data.type !== 'main') {
// Don't check the children
return false;
}
});
}
$scope.onNodeDetailsClick = function(node) {
@@ -53,4 +67,13 @@ app.controller('ResultsCtrl', function ($scope) {
return out;
}
// Goes on every node of the tree and calls the function fn. If fn returns false on a node, its children won't be checked.
function treeRunner(node, fn) {
if (fn(node) !== false && node.children) {
node.children.forEach(function(child) {
treeRunner(child, fn);
});
}
}
});