Improve scroll bottlenecks rules

This commit is contained in:
Gaël Métais
2015-05-07 17:10:01 +02:00
parent 8c79f39389
commit f8f792645b
5 changed files with 40 additions and 12 deletions
+3
View File
@@ -48,6 +48,9 @@
</div>
<div ng-if="policyName === 'eventsScrollBound'">
<span ng-if="offender.target == 'window'">Scroll event bound on <b>window</b></span>
<span ng-if="offender.target == '#document'">Scroll event bound on <b>document</b></span>
<span ng-if="offender.target == 'window.onscroll'"><b>window.onscroll</b> function declared</span>
<div class="offenderButton" ng-if="offender.backtrace.length == 0">no backtrace</div>
<div class="offenderButton opens" ng-if="offender.backtrace.length > 0">
backtrace
+5 -4
View File
@@ -216,7 +216,7 @@ var policies = {
return {
count: offenders.length,
list: offenders.map(function(offender) {
var parts = /^bound by (.*)$/.exec(offender);
var parts = /^bound by (.*) on ([^ ]+)$/.exec(offender);
if (!parts) {
debug('eventsScrollBound offenders transform function error with "%s"', offender);
@@ -228,7 +228,8 @@ var policies = {
var backtraceArray = offendersHelpers.backtraceToArray(parts[1]);
return {
backtrace: backtraceArray || []
backtrace: backtraceArray || [],
target: parts[2]
};
})
};
@@ -239,8 +240,8 @@ var policies = {
"label": "DOM access on scroll",
"message": "<p>This rule counts the number of DOM-accessing functions calls, such as queries, readings, writings, bindings and jQuery functions.</p><p>Two scroll events are triggered quickly, one after the other, and only the second one is analyzed so throttled functions are ignored.</p><p>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.</p><p>Reduce the number of DOM accesses inside scroll listeners. Put DOM queries outside them when possible. Use <a href=\"http://blogorama.nerdworks.in/javascriptfunctionthrottlingan/\" target=\"_blank\">throttling or deboucing</a>.</p>",
"isOkThreshold": 1,
"isBadThreshold": 10,
"isAbnormalThreshold": 20,
"isBadThreshold": 12,
"isAbnormalThreshold": 25,
"hasOffenders": true,
"offendersTransformFn": function(offenders) {
return offenders;
@@ -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));
});
});
};
@@ -32,13 +32,7 @@ exports.module = function(phantomas) {
});
window.dispatchEvent(evt);
// 3. onscroll()
if (window.onscroll) {
phantomas.pushContext({
type: 'window.onscroll'
});
window.onscroll();
}
// No need to call window.onscroll(), it's called by the scroll event on window
} catch(e) {
phantomas.log('ScrollListener error: %s', e);
+18
View File
@@ -0,0 +1,18 @@
<html>
<head>
<title>Scroll page</title>
</head>
<body>
<h1>Simple page</h1>
<script>
window.onscroll = function() {
document.getElementsByTagName('window.onscroll');
};
window.addEventListener('scroll', function() {
document.getElementsByTagName('scroll on window');
});
</script>
</body>
</html>