diff --git a/lib/metadata/policies.js b/lib/metadata/policies.js
index abdd706..fc18c4d 100644
--- a/lib/metadata/policies.js
+++ b/lib/metadata/policies.js
@@ -66,6 +66,15 @@ var policies = {
};
}
},
+ "DOMaccesses": {
+ "tool": "jsExecutionTransformer",
+ "label": "DOM access",
+ "message": "
TODO
TODO
",
+ "isOkThreshold": 50,
+ "isBadThreshold": 2000,
+ "isAbnormalThreshold": 3000,
+ "hasOffenders": false
+ },
"DOMinserts": {
"tool": "phantomas",
"label": "DOM inserts",
@@ -195,6 +204,49 @@ var policies = {
};
}
},
+ "eventsScrollBound": {
+ "tool": "phantomas",
+ "label": "Scroll events bound",
+ "message": "
Number of 'scroll' event listeners binded to 'window' or 'document'.
Asking too much work to the browser on scroll hurts the smoothness of the scroll. Merging all your event listeners into an unique listener can help you factorize their code and reduce their footprint on scroll.
",
+ "isOkThreshold": 1,
+ "isBadThreshold": 7,
+ "isAbnormalThreshold": 12,
+ "hasOffenders": true,
+ "offendersTransformFn": function(offenders) {
+ return {
+ count: offenders.length,
+ list: offenders.map(function(offender) {
+ var parts = /^bound by (.*) on ([^ ]+)$/.exec(offender);
+
+ if (!parts) {
+ debug('eventsScrollBound offenders transform function error with "%s"', offender);
+ return {
+ parseError: offender
+ };
+ }
+
+ var backtraceArray = offendersHelpers.backtraceToArray(parts[1]);
+
+ return {
+ backtrace: backtraceArray || [],
+ target: parts[2]
+ };
+ })
+ };
+ }
+ },
+ "DOMaccessesOnScroll": {
+ "tool": "jsExecutionTransformer",
+ "label": "DOM access on scroll",
+ "message": "
This rule counts the number of DOM-accessing functions calls, such as queries, readings, writings, bindings and jQuery functions.
Two scroll events are triggered quickly, one after the other, and only the second one is analyzed so throttled functions are ignored.
One of the main reasons of a poor scrolling experience is when too much JS is executed on each scroll event. Note that some devices such as smartphones and MacBooks send more scroll events than others.
Reduce the number of DOM accesses inside scroll listeners. Put DOM queries outside them when possible. Use throttling or deboucing.
",
+ "isOkThreshold": 1,
+ "isBadThreshold": 12,
+ "isAbnormalThreshold": 25,
+ "hasOffenders": true,
+ "offendersTransformFn": function(offenders) {
+ return offenders;
+ }
+ },
"jsErrors": {
"tool": "phantomas",
"label": "JavaScript errors",
diff --git a/lib/metadata/scoreProfileGeneric.json b/lib/metadata/scoreProfileGeneric.json
index 319c83c..aeda814 100644
--- a/lib/metadata/scoreProfileGeneric.json
+++ b/lib/metadata/scoreProfileGeneric.json
@@ -12,6 +12,7 @@
"domManipulations": {
"label": "DOM manipulations",
"policies": {
+ "DOMaccesses": 3,
"DOMinserts": 2,
"DOMqueries": 1,
"DOMqueriesWithoutResults": 2,
@@ -19,6 +20,13 @@
"eventsBound": 1
}
},
+ "scroll": {
+ "label": "Scroll bottlenecks",
+ "policies": {
+ "eventsScrollBound": 1,
+ "DOMaccessesOnScroll": 4
+ }
+ },
"badJavascript": {
"label": "Bad JavaScript",
"policies": {
@@ -99,6 +107,7 @@
"globalScore": {
"domComplexity": 1,
"domManipulations": 2,
+ "scroll": 1,
"badJavascript": 1,
"jQueryVersion": 1,
"cssSyntaxError": 1,
diff --git a/lib/offendersHelpers.js b/lib/offendersHelpers.js
index 92405d9..a3630e0 100644
--- a/lib/offendersHelpers.js
+++ b/lib/offendersHelpers.js
@@ -115,7 +115,7 @@ var OffendersHelpers = function() {
var parts = null;
for (var i=0 ; i
0) {
- node.data.callDetails.context.elements = node.data.callDetails.context.elements.map(offendersHelpers.domPathToDomElementObj, offendersHelpers);
- }
+ // Transform domPaths into objects
+ changeListOfDomPaths(node);
- if (node.data.type === 'appendChild' || node.data.type === 'insertBefore' || node.data.type === 'getComputedStyle') {
- node.data.callDetails.arguments[0] = offendersHelpers.domPathToDomElementObj(node.data.callDetails.arguments[0]);
- }
-
- if (node.data.type === 'insertBefore') {
- node.data.callDetails.arguments[1] = offendersHelpers.domPathToDomElementObj(node.data.callDetails.arguments[1]);
- }
- });
+ // Count the number of DOM accesses, by counting the tree leafs
+ metrics.DOMaccesses += countTreeLeafs(node);
});
}
-
debug('JS execution transformation complete');
+
+ debug('Starting scroll execution transformation');
+ scrollExecutionTree = JSON.parse(data.toolsResults.phantomas.offenders.scrollExecutionTree[0]);
+ if (scrollExecutionTree.children) {
+ scrollExecutionTree.children.forEach(function(node) {
+
+ // Mark a event flag
+ if (['documentScroll', 'windowScroll', 'window.onscroll'].indexOf(node.data.type) >= 0) {
+ node.windowPerformance = true;
+ }
+
+ // Transform domPaths into objects
+ changeListOfDomPaths(node);
+
+ // Count the number of DOM accesses, by counting the tree leafs
+ metrics.DOMaccessesOnScroll += countTreeLeafs(node);
+ });
+ }
+ debug('Scroll execution transformation complete');
+
} catch(err) {
throw err;
}
data.javascriptExecutionTree = javascriptExecutionTree;
+
data.toolsResults.jsExecutionTransformer = {
- metrics: metrics
+ metrics: metrics,
+ offenders: {
+ DOMaccessesOnScroll: scrollExecutionTree
+ }
};
return data;
@@ -97,6 +111,39 @@ var jsExecutionTransformer = function() {
}
fn(node);
}
+
+ function changeListOfDomPaths(rootNode) {
+ treeRecursiveParser(rootNode, function(node) {
+
+ if (node.data.callDetails && node.data.callDetails.context && node.data.callDetails.context.length > 0) {
+ node.data.callDetails.context.elements = node.data.callDetails.context.elements.map(offendersHelpers.domPathToDomElementObj, offendersHelpers);
+ }
+
+ if (node.data.type === 'appendChild' || node.data.type === 'insertBefore' || node.data.type === 'getComputedStyle') {
+ node.data.callDetails.arguments[0] = offendersHelpers.domPathToDomElementObj(node.data.callDetails.arguments[0]);
+ }
+
+ if (node.data.type === 'insertBefore') {
+ node.data.callDetails.arguments[1] = offendersHelpers.domPathToDomElementObj(node.data.callDetails.arguments[1]);
+ }
+ });
+ }
+
+ // Returns the number of leafs (nodes without children)
+ function countTreeLeafs(rootNode) {
+ var count = 0;
+
+ treeRecursiveParser(rootNode, function(node) {
+ if (!node.children &&
+ !node.error &&
+ !node.windowPerformance &&
+ node.data.type !== 'jQuery loaded') {
+ count ++;
+ }
+ });
+
+ return count;
+ }
};
module.exports = new jsExecutionTransformer();
\ No newline at end of file
diff --git a/lib/tools/phantomas/custom_modules/core/scopeYLT/scopeYLT.js b/lib/tools/phantomas/custom_modules/core/scopeYLT/scopeYLT.js
index 4ec31ef..59e21a3 100644
--- a/lib/tools/phantomas/custom_modules/core/scopeYLT/scopeYLT.js
+++ b/lib/tools/phantomas/custom_modules/core/scopeYLT/scopeYLT.js
@@ -104,10 +104,11 @@ exports.module = function(phantomas) {
var root = new ContextTreeNode(null, {type: 'main'});
var currentContext = root;
+ var depth = 0;
+
if (deepAnalysis) {
phantomas.log('Entering deep Javascript analysis mode');
}
- var depth = 0;
// Add a child but don't enter his context
function pushContext(data) {
@@ -176,6 +177,13 @@ exports.module = function(phantomas) {
return root;
}
+
+ // Empty the tree
+ function resetTree() {
+ root = new ContextTreeNode(null, {type: 'main'});
+ currentContext = root;
+ depth = 0;
+ }
function ContextTreeNode(parent, data) {
@@ -196,6 +204,7 @@ exports.module = function(phantomas) {
phantomas.leaveContext = leaveContext;
phantomas.getContextData = getContextData;
phantomas.readFullTree = readFullTree;
+ phantomas.resetTree = resetTree;
})();
diff --git a/lib/tools/phantomas/custom_modules/modules/eventYLT/eventYLT.js b/lib/tools/phantomas/custom_modules/modules/eventYLT/eventYLT.js
index 8409fbd..82b678e 100644
--- a/lib/tools/phantomas/custom_modules/modules/eventYLT/eventYLT.js
+++ b/lib/tools/phantomas/custom_modules/modules/eventYLT/eventYLT.js
@@ -41,7 +41,7 @@ exports.module = function(phantomas) {
// count window.addEventListener('scroll', ...) - issue #508
if (eventType === 'scroll' && (path === 'window' || path === '#document')) {
phantomas.incrMetric('eventsScrollBound');
- phantomas.addOffender('eventsScrollBound', 'bound by %s', phantomas.getBacktrace());
+ phantomas.addOffender('eventsScrollBound', 'bound by %s on %s', phantomas.getBacktrace(), path);
}
}
@@ -67,4 +67,16 @@ exports.module = function(phantomas) {
})(window.__phantomas);
});
});
+
+ phantomas.on('report', function() {
+ phantomas.evaluate(function() {
+ (function(phantomas) {
+ // Check if a window.onscroll function is defined
+ if (typeof(window.onscroll) === "function") {
+ phantomas.incrMetric('eventsScrollBound');
+ phantomas.addOffender('eventsScrollBound', 'bound by %s on %s', '', 'window.onscroll');
+ }
+ }(window.__phantomas));
+ });
+ });
};
diff --git a/lib/tools/phantomas/custom_modules/modules/jsTreeYLT/jsTreeYLT.js b/lib/tools/phantomas/custom_modules/modules/jsTreeYLT/jsTreeYLT.js
index a9772a5..697b1db 100644
--- a/lib/tools/phantomas/custom_modules/modules/jsTreeYLT/jsTreeYLT.js
+++ b/lib/tools/phantomas/custom_modules/modules/jsTreeYLT/jsTreeYLT.js
@@ -9,11 +9,11 @@ exports.version = '0.1';
exports.module = function(phantomas) {
'use strict';
- phantomas.setMetric('javascriptExecutionTree'); // @desc number of duplicated DOM queries
+ phantomas.setMetric('javascriptExecutionTree');
// save data
phantomas.on('report', function() {
- phantomas.log('Reading execution tree JSON');
+ phantomas.log('JS execution tree: Reading execution tree JSON');
phantomas.evaluate(function() {(function(phantomas) {
var fullTree = phantomas.readFullTree();
diff --git a/lib/tools/phantomas/custom_modules/modules/scrollListener/scrollListener.js b/lib/tools/phantomas/custom_modules/modules/scrollListener/scrollListener.js
new file mode 100644
index 0000000..bc250b0
--- /dev/null
+++ b/lib/tools/phantomas/custom_modules/modules/scrollListener/scrollListener.js
@@ -0,0 +1,69 @@
+exports.version = '0.1';
+
+exports.module = function(phantomas) {
+ 'use strict';
+
+ phantomas.setMetric('scrollExecutionTree');
+
+ phantomas.on('report', function() {
+
+ phantomas.evaluate(function() {
+ (function(phantomas) {
+
+ var evt = document.createEvent('CustomEvent');
+ evt.initCustomEvent('scroll', false, false, null);
+
+ function triggerScrollEvent() {
+ phantomas.resetTree();
+
+ try {
+
+ // Chrome triggers them in this order:
+
+ // 1. document
+ phantomas.pushContext({
+ type: 'documentScroll'
+ });
+ document.dispatchEvent(evt);
+
+ // 2. window
+ phantomas.pushContext({
+ type: 'windowScroll'
+ });
+ window.dispatchEvent(evt);
+
+ // No need to call window.onscroll(), it's called by the scroll event on window
+
+ } catch(e) {
+ phantomas.log('ScrollListener error: %s', e);
+ }
+ }
+
+ var firstScrollTime = Date.now();
+ phantomas.log('ScrollListener: triggering a first scroll event...');
+ triggerScrollEvent();
+
+
+ // Ignore the first scroll event and only save the second one,
+ // because we want to detect un-throttled things, throttled ones are ok.
+ var secondScrollTime = Date.now();
+ phantomas.log('ScrollListener: triggering a second scroll event (%dms after the first)...', secondScrollTime - firstScrollTime);
+ triggerScrollEvent();
+
+
+ var fullTree = phantomas.readFullTree();
+ if (fullTree !== null) {
+ phantomas.setMetric('scrollExecutionTree', true, true);
+ phantomas.addOffender('scrollExecutionTree', JSON.stringify(fullTree));
+ phantomas.log('ScrollListener: scrollExecutionTree correctly extracted');
+ } else {
+ phantomas.log('Error: scrollExecutionTree could not be extracted');
+ }
+
+
+ phantomas.log('ScrollListener: end of scroll triggering');
+
+ })(window.__phantomas);
+ });
+ });
+};
diff --git a/test/core/offendersHelpersTest.js b/test/core/offendersHelpersTest.js
index 6bf59c9..3cbefaf 100644
--- a/test/core/offendersHelpersTest.js
+++ b/test/core/offendersHelpersTest.js
@@ -166,6 +166,40 @@ describe('offendersHelpers', function() {
]);
});
+ it('should transform another backtrace syntax into an array', function() {
+ var result = offendersHelpers.backtraceToArray('phantomjs://webpage.evaluate():38 / e (http://s7.addthis.com/js/300/addthis_widget.js:1) / a (http://s7.addthis.com/js/300/addthis_widget.js:1) / http://s7.addthis.com/js/300/addthis_widget.js:3 / e (http://s7.addthis.com/js/300/addthis_widget.js:1) / http://s7.addthis.com/js/300/addthis_widget.js:8');
+
+ result.should.deep.equal([
+ {
+ file: 'phantomjs://webpage.evaluate()',
+ line: 38
+ },
+ {
+ functionName: 'e',
+ file: 'http://s7.addthis.com/js/300/addthis_widget.js',
+ line: 1
+ },
+ {
+ functionName: 'a',
+ file: 'http://s7.addthis.com/js/300/addthis_widget.js',
+ line: 1
+ },
+ {
+ file: 'http://s7.addthis.com/js/300/addthis_widget.js',
+ line: 3
+ },
+ {
+ functionName: 'e',
+ file: 'http://s7.addthis.com/js/300/addthis_widget.js',
+ line: 1
+ },
+ {
+ file: 'http://s7.addthis.com/js/300/addthis_widget.js',
+ line: 8
+ }
+ ]);
+ });
+
it('should return null if it fails', function() {
var result = offendersHelpers.backtraceToArray('http://pouet.com/js/jquery.footer-transverse-min-v1.0.20.js:1 /http://pouet.com/js/main.js:1');
diff --git a/test/www/scroll-page.html b/test/www/scroll-page.html
new file mode 100644
index 0000000..2ff52a5
--- /dev/null
+++ b/test/www/scroll-page.html
@@ -0,0 +1,18 @@
+
+
+ Scroll page
+
+
+ Simple page
+
+
+
+
\ No newline at end of file