New DOMaccess agregated form + new score category JS complexity

lib/metadata/policies.js

@@ -46,37 +46,14 @@ var policies = {
         "isAbnormalThreshold": 50,
         "hasOffenders": true
     },
-    "DOMqueriesAvoidable": {
-        "tool": "phantomas",
-        "label": "Duplicated DOM queries",
-        "message": "<p>This is the number of queries that could be avoided by removing all duplicated queries.</p><p>Simply save the result of a query in a variable. Ok it is not always simple, especially with third-party scripts, but at least do it with your own code.</p>",
-        "isOkThreshold": 0,
-        "isBadThreshold": 300,
-        "isAbnormalThreshold": 600,
-        "hasOffenders": true,
-        "takeOffendersFrom": "DOMqueriesDuplicated",
-        "offendersTransformFn": function(offenders) {
-            return {
-                count: offenders.length,
-                list: offenders.map(function(offender) {
-                    var parts = /^[^"]* ?"(.*)" ?with ?(.*) ?\(in ?context ?(.*)\): ?(.*)\s?queries$/.exec(offender);
-
-                    if (!parts) {
-                        debug('DOMqueriesAvoidable offenders transform function error with "%s"', offender);
-                        return {
-                            parseError: offender
-                        };
-                    }
-
-                    return {
-                        query: parts[1],
-                        context: offendersHelpers.domPathToDomElementObj(parts[3]),
-                        fn: parts[2],
-                        count: parseInt(parts[4], 10)
-                    };
-                })
-            };
-        }
+    "DOMaccesses": {
+        "tool": "domAccessAgregator",
+        "label": "DOM access",
+        "message": "<p>This metric estimates the number of times the JavaScript reads, changes or binds the DOM.</p><p>The more your JavaScript code accesses the DOM, the slower the page will load.</p><p>Try, as much as possible, to have an HTML page fully generated by the server instead of making changes with JS.</p><p>Try to reduce the number of queries by refactoring your JavaScript code.</p><p>Binding too many events also has a cost.</p>",
+        "isOkThreshold": 500,
+        "isBadThreshold": 2500,
+        "isAbnormalThreshold": 5000,
+        "hasOffenders": true
     },
     "eventsScrollBound": {
         "tool": "phantomas",

lib/metadata/scoreProfileGeneric.json

@@ -32,8 +32,15 @@
                 "DOMidDuplicated": 1
             }
         },
+        "javascriptComplexity": {
+            "label": "JS complexity",
+            "policies": {
+                "DOMaccesses": 4,
+                "eventsScrollBound": 1
+            }
+        },
         "badJavascript": {
-            "label": "Bad JavaScript",
+            "label": "Bad JS",
             "policies": {
                 "jsErrors": 1,
                 "documentWriteCalls": 2,
@@ -100,6 +107,7 @@
         "pageWeight": 3,
         "requests": 3,
         "domComplexity": 2,
+        "javascriptComplexity": 2,
         "badJavascript": 2,
         "jQuery": 1,
         "cssSyntaxError": 1,

lib/runner.js

@@ -3,6 +3,7 @@ var debug                   = require('debug')('ylt:runner');
 
 var phantomasWrapper        = require('./tools/phantomas/phantomasWrapper');
 var colorDiff               = require('./tools/colorDiff');
+var domAccessAgregator      = require('./tools/domAccessAgregator');
 var mediaQueriesChecker     = require('./tools/mediaQueriesChecker');
 var isHttp2                 = require('./tools/isHttp2');
 var redownload              = require('./tools/redownload/redownload');
@@ -27,6 +28,9 @@ var Runner = function(params) {
     .then(function(phantomasResults) {
         data.toolsResults.phantomas = phantomasResults;
 
+        // Mix all DOM Access metrics together
+        data = domAccessAgregator.agregate(data);
+
         // Compare colors
         data = colorDiff.compareAllColors(data);
 

lib/tools/domAccessAgregator.js

@@ -0,0 +1,53 @@
+var debug   = require('debug')('ylt:domAccessAgregator');
+
+var domAccessAgregator = function() {
+    'use strict';
+
+    this.agregate = function(data) {
+        debug('Starting to agregate DOM Accesses...');
+
+        let count = 0;
+        let offenders = {
+            byType: {}
+        };
+
+        const metricsToGather = [
+            'DOMqueriesById',
+            'DOMqueriesByTagName',
+            'DOMqueriesByClassName',
+            'DOMqueriesByQuerySelectorAll',
+            'DOMinserts',
+            'DOMmutationsInserts',
+            'DOMmutationsRemoves',
+            'DOMmutationsAttributes',
+            'eventsBound'
+        ];
+
+        metricsToGather.forEach(key => {
+            
+            if (data.toolsResults.phantomas.metrics[key]) {
+                count += data.toolsResults.phantomas.metrics[key];
+            }
+            
+            offenders.byType[key] = [];
+            if (data.toolsResults.phantomas.offenders[key]) {
+                offenders.byType[key] = data.toolsResults.phantomas.offenders[key];
+            }
+        });
+
+        data.toolsResults.domAccessAgregator = {
+            metrics: {
+                DOMaccesses: count
+            },
+            offenders: {
+                DOMaccesses: offenders
+            }
+        };
+
+        debug('Done agregating DOM Accesses.');
+
+        return data;
+    };
+};
+
+module.exports = new domAccessAgregator();