Improve scroll bottlenecks rules
This commit is contained in:
@@ -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
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user