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

Remove durations on profiling table and improve the timeline

Browse Source
This commit is contained in:
Gaël Métais
2014-10-29 00:25:28 +01:00
parent 36375a507d
commit 35de0bdcf3
2 changed files with 25 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/node_views/results.html
+3 -17
View File
@@ -724,8 +724,6 @@
<h2>Javascript Profiler</h2>
<p>
The table below shows the interactions between Javascript and the DOM. It is usefull to understand what's going on when the page loads.
<br>
The tool is slower than a real browser, so durations are a little exagerated.
</p>
<div class="filters">
<div>
@@ -733,11 +731,6 @@
Filter by
<input type="text" ng-model="textFilter" placeholder="search..." class="textFilter" ng-change="textFilterOn = true" />
</div>
<div>
<input type="checkbox" ng-model="slowRequestsOn" id="slowRequests" />
<label for="slowRequests">Requests slower than</label>
<input type="number" value="5" min="0" ng-model="slowRequestsLimit" class="slowRequestsLimit"> ms
</div>
</div>
<div class="table">
@@ -747,18 +740,16 @@
<div>Type</div>
<div>Params</div>
<div><!-- details --></div>
<div>Duration</div>
<div>Timestamp</div>
</div>
<div ng-repeat="node in javascript.children"
ng-if="(!slowRequestsOn || node.data.time > slowRequestsLimit)
&& (!textFilterOn
ng-if="!textFilterOn
|| !textFilter.length
|| node.data.type.indexOf(textFilter) >= 0
|| node.data.callDetails.arguments[0].indexOf(textFilter) >= 0
|| node.data.callDetails.arguments[1].indexOf(textFilter) >= 0
|| node.data.callDetails.arguments[2].indexOf(textFilter) >= 0
|| node.data.callDetails.arguments[3].indexOf(textFilter) >= 0)"
|| node.data.callDetails.arguments[3].indexOf(textFilter) >= 0"
ng-class="{
showingDetails: node.data.showDetails,
jsError: node.data.type == 'error' || node.data.type == 'jQuery version change',
@@ -835,12 +826,7 @@
</div>
</div>
</div>
<div class="duration" ng-if="node.data.time != undefined">
{{node.data.time}} ms
<span ng-if="node.data.time > slowRequestsLimit" class="icon-warning" title="Slower than {{slowRequestsLimit}} ms"></span>
</div>
<div class="duration" ng-if="node.data.time == undefined"></div>
<div class="startTime" ng-class="node.data.loadingStep">{{node.data.timestamp | number: 0}}</div>
<div class="startTime" ng-class="node.data.loadingStep">{{node.data.timestamp | number: 0}} ms</div>
</div>
</div>
</div>
app/public/scripts/resultsCtrl.js
+22 -30
View File
@@ -90,8 +90,6 @@ app.controller('ResultsCtrl', function ($scope) {
}
function initJSTimelineView() {
$scope.slowRequestsOn = false;
$scope.slowRequestsLimit = 5;
if (!$scope.javascript.children) {
return;
@@ -129,45 +127,39 @@ app.controller('ResultsCtrl', function ($scope) {
$scope.endTime = lastEvent.data.timestamp + (lastEvent.data.time || 0);
$scope.timelineIntervalDuration = $scope.endTime / numberOfIntervals;
// Pre-filled array of 100 elements
$scope.timeline = Array.apply(null, new Array(numberOfIntervals)).map(Number.prototype.valueOf,0);
// Pre-fill array of as many elements as there are milleseconds
var millisecondsArray = Array.apply(null, new Array($scope.endTime + 1)).map(Number.prototype.valueOf,0);
// Create the milliseconds array from the execution tree
treeRunner($scope.javascript, function(node) {
if (node.data.time) {
// If a node is between two intervals, split it. That's the meaning of the following dirty algorithm.
if (node.data.time !== undefined) {
var startInterval = Math.floor(node.data.timestamp / $scope.timelineIntervalDuration);
var endInterval = Math.floor((node.data.timestamp + node.data.time) / $scope.timelineIntervalDuration);
// Ignore artefacts (durations > 100ms)
var time = Math.min(node.data.time, 100) || 1;
if (startInterval === endInterval) {
$scope.timeline[startInterval] += node.data.time;
} else {
var timeToDispatch = node.data.time;
var startIntervalPart = ((startInterval + 1) * $scope.timelineIntervalDuration) - node.data.timestamp;
$scope.timeline[startInterval] += startIntervalPart;
timeToDispatch -= startIntervalPart;
var currentInterval = startInterval;
while(currentInterval < endInterval && currentInterval + 1 < numberOfIntervals) {
currentInterval ++;
var currentIntervalPart = Math.min(timeToDispatch, $scope.timelineIntervalDuration);
$scope.timeline[currentInterval] = currentIntervalPart;
timeToDispatch -= currentIntervalPart;
}
for (var i=node.data.timestamp, max=node.data.timestamp + time ; i<max ; i++) {
millisecondsArray[i] |= 1;
}
}
if (node.data.type !== 'main') {
// Don't check the children
return false;
}
});
// Pre-fill array of 200 elements
$scope.timeline = Array.apply(null, new Array(numberOfIntervals + 1)).map(Number.prototype.valueOf,0);
// Create the timeline from the milliseconds array
millisecondsArray.forEach(function(value, timestamp) {
if (value === 1) {
$scope.timeline[Math.floor(timestamp / $scope.timelineIntervalDuration)] += 1;
}
});
// Get the maximum value of the array (needed for display)
$scope.timelineMax = Math.max.apply(Math, $scope.timeline);
}