Browse Source

Improve scroll bottlenecks rules

Gaël Métais 10 years ago
parent
commit
f8f792645b

+ 3 - 0
front/src/views/rule.html

@@ -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
lib/metadata/policies.js

@@ -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;

+ 13 - 1
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));
+        });
+    });
 };

+ 1 - 7
lib/tools/phantomas/custom_modules/modules/scrollListener/scrollListener.js

@@ -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 - 0
test/www/scroll-page.html

@@ -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>