delay detect viewport and store innerHeight to prevent repaint

yahoo · Sep 30, 2015 · 977b375 · 977b375
1 parent 5c86980
commit 977b375
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 6 deletions.
diff --git a/src/mixins/I13nMixin.js b/src/mixins/I13nMixin.js
@@ -256,14 +256,20 @@ var I13nMixin = {
      * @private
      */
     _enableViewportDetection: function () {
-        this.onEnterViewport(this._handleEnterViewport);
+        var self = this;
+        self.onEnterViewport(self._handleEnterViewport);
 
         // for page init status, trigger page-init viewport detection to improve performance
         // otherwise for page update case, detect viewport directly
         if (!pageInitViewportDetected) {
-            this._triggerPageInitViewportDetection();
+            self._triggerPageInitViewportDetection();
         } else {
-            this._detectViewport();
+            // in case we have many i13n component mounted at one time, e.g., page switch
+            // might cause large CPU usage,
+            // delay viewport detection to the next tick.
+            setImmediate(function delayDetectViewport() {
+                self._detectViewport();
+            });
         }
     },
 

diff --git a/src/mixins/viewport/ViewportMixin.js b/src/mixins/viewport/ViewportMixin.js
@@ -25,6 +25,7 @@ var Viewport = {
 
     _detectElement: function (i13nNode, enterViewportCallback, callback) {
         var element = i13nNode && i13nNode.getDOMNode();
+        var innerHeight = window.innerHeight;
         if (!element) {
             return callback && callback();
         }
@@ -33,14 +34,14 @@ var Viewport = {
         var margins;
         if (viewportMargins.usePercent) {
             margins = {
-                top: viewportMargins.top * window.innerHeight,
-                bottom: viewportMargins.bottom * window.innerHeight
+                top: viewportMargins.top * innerHeight,
+                bottom: viewportMargins.bottom * innerHeight
             };
         } else {
             margins = viewportMargins;
         }
         // Detect Screen Bottom                           // Detect Screen Top
-        if ((rect.top < window.innerHeight + margins.top) && (rect.bottom > 0  - margins.bottom)) {
+        if ((rect.top < innerHeight + margins.top) && (rect.bottom > 0  - margins.bottom)) {
             enterViewportCallback && enterViewportCallback()
         }
         callback && callback();