diff --git a/app/node_views/results.html b/app/node_views/results.html index ee8abff..ed0455f 100644 --- a/app/node_views/results.html +++ b/app/node_views/results.html @@ -38,7 +38,7 @@

Summary

- +
{{notations.domComplexity}}
@@ -230,6 +230,20 @@
+
+
Execution in body
+
+ {{inBodyDomManipulations}} +
+
+
+ +

Wait the DOMContentLoaded event before executing Javascript.

+

Choose between the HEAD and the end of the BODY for scripts. Do not execute Javascript in the middle of the BODY as it slows down the construction of the DOM and makes a poor maintainability. This is what i call spaghetti code.

+

The JS Timeline tab can help you.

+
+
+
diff --git a/app/public/scripts/resultsCtrl.js b/app/public/scripts/resultsCtrl.js index 636ca7e..0fd6649 100644 --- a/app/public/scripts/resultsCtrl.js +++ b/app/public/scripts/resultsCtrl.js @@ -47,10 +47,16 @@ app.controller('ResultsCtrl', function ($scope) { // Read the main elements of the tree and sum the total time $scope.totalJSTime = 0; + $scope.inBodyDomManipulations = 0; treeRunner($scope.javascript, function(node) { if (node.data.time) { $scope.totalJSTime += node.data.time; } + + if (node.data.timestamp < $scope.phantomasResults.metrics.domInteractive + && node.data.type !== 'jQuery - onDOMReady') { + $scope.inBodyDomManipulations ++; + } if (node.data.type !== 'main') { // Don't check the children @@ -209,20 +215,21 @@ app.controller('ResultsCtrl', function ($scope) { $scope.phantomasResults.metrics.evalCalls * 2 + $scope.phantomasResults.metrics.jsErrors * 10 + $scope.phantomasResults.metrics.consoleMessages / 2 + - $scope.phantomasResults.metrics.globalVariables / 20; - if (score > 5) { + $scope.phantomasResults.metrics.globalVariables / 20 + + Math.sqrt($scope.inBodyDomManipulations); + if (score > 10) { note = 'B'; } - if (score > 10) { + if (score > 15) { note = 'C'; } - if (score > 15) { + if (score > 20) { note = 'D'; } - if (score > 25) { + if (score > 30) { note = 'E'; } - if (score > 40) { + if (score > 45) { note = 'F'; } return note;