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

Merge a few criterium into the DOM Manipulations note

Browse Source
This commit is contained in:
Gaël Métais
2014-09-26 11:00:59 +02:00
parent fa120ed43f
commit 06ea90f073
2 changed files with 13 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/node_views/results.html
+2 -30
View File
@@ -97,8 +97,8 @@
</div>
</div>
<div>
<div ng-class="notations.domManipulations">{{notations.domManipulations}}</div>
<div class="notation">DOM read and write</div>
<div ng-class="notations.jsDomManipulations">{{notations.jsDomManipulations}}</div>
<div class="notation">DOM manipulations</div>
<div class="criteria">
<div class="table">
<div ng-if="phantomasResults.metrics.DOMinserts">
@@ -127,26 +127,6 @@
</modal-dialog>
</div>
</div>
<div ng-if="totalJSTime">
<div class="label">JS interactions time</div>
<div class="result">{{totalJSTime}} ms</div>
<div class="info">
<div class="icon-question" ng-click="totalJSTimeTooltip = true"></div>
<modal-dialog show="totalJSTimeTooltip" dialog-title="DOM manipulations can be very slow">
<p><b>Please note that the tool is not accurate. The time indicated here is generally 3 or 4 times slower than on modern browsers.</b></p>
<p>Some DOM manipulations can be very slow. For example, searching with a complex selector, making big changes to the DOM, animating an element, inserting an iframe, ...</p>
<p>Have a look at the <b>JS Timeline</b> to find out why it is so slow.</p>
</modal-dialog>
</div>
</div>
</div>
</div>
</div>
<div>
<div ng-class="notations.duplicatedDomQueries">{{notations.duplicatedDomQueries}}</div>
<div class="notation">Duplicated DOM queries</div>
<div class="criteria">
<div class="table">
<div ng-if="duplicatedQueriesCountAll">
<div class="label">Avoidable queries</div>
<div class="result">
@@ -161,14 +141,6 @@
</modal-dialog>
</div>
</div>
</div>
</div>
</div>
<div>
<div ng-class="notations.eventsBound">{{notations.eventsBound}}</div>
<div class="notation">Events bound</div>
<div class="criteria">
<div class="table">
<div ng-if="phantomasResults.metrics.eventsBound">
<div class="label">Events bound</div>
<div class="result">
app/public/scripts/resultsCtrl.js
+11 -54
View File
@@ -76,9 +76,7 @@ app.controller('ResultsCtrl', function ($scope) {
// Grab the notes
$scope.notations = {
domComplexity: getDomComplexityScore(),
domManipulations: getDomManipulationsScore(),
duplicatedDomQueries: getDuplicatedDomQueriesScore(),
eventsBound: getEventsBoundScore(),
jsDomManipulations: getJsDomManipulationsScore(),
jsBadPractices: getJSBadPracticesScore(),
jQueryLoading: getJQueryLoadingScore(),
cssComplexity: getCSSComplexityScore(),
@@ -184,66 +182,25 @@ app.controller('ResultsCtrl', function ($scope) {
return note;
}
function getDomManipulationsScore() {
function getJsDomManipulationsScore() {
var note = 'A';
var score = $scope.phantomasResults.metrics.DOMinserts +
$scope.phantomasResults.metrics.DOMqueries * 0.5 +
$scope.totalJSTime;
if (score > 100) {
note = 'B';
}
if (score > 200) {
note = 'C';
}
var score = $scope.phantomasResults.metrics.DOMinserts * 2 +
$scope.phantomasResults.metrics.DOMqueries +
$scope.duplicatedQueriesCountAll * 2 +
$scope.phantomasResults.metrics.eventsBound;
if (score > 300) {
note = 'D';
}
if (score > 500) {
note = 'E';
}
if (score > 800) {
note = 'F';
}
return note;
}
function getDuplicatedDomQueriesScore() {
var note = 'A';
var score = $scope.duplicatedQueriesCountAll;
if (score > 10) {
note = 'B';
}
if (score > 50) {
if (score > 500) {
note = 'C';
}
if (score > 100) {
if (score > 700) {
note = 'D';
}
if (score > 200) {
note = 'E';
}
if (score > 500) {
note = 'F';
}
return note;
}
function getEventsBoundScore() {
var note = 'A';
var score = $scope.phantomasResults.metrics.eventsBound;
if (score > 50) {
note = 'B';
}
if (score > 100) {
note = 'C';
}
if (score > 200) {
note = 'D';
}
if (score > 500) {
note = 'E';
}
if (score > 1000) {
note = 'E';
}
if (score > 1400) {
note = 'F';
}
return note;