手机性能优化

src/components/Scroller.vue

@@ -168,6 +168,8 @@
 
   const re = /^[\d]+(\%)?$/
 
+  const MutationObserverClass = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
+
   const widthAndHeightCoerce = (v) => {
     if (v[v.length - 1] != '%') return v + 'px'
     return v
@@ -178,6 +180,13 @@
   }
 
   export default {
+    data() {
+      return {
+        contentWidth: 0,
+        contentHeight: 0,
+        scrollTop: 0,
+      }
+    },
     components: {
       Spinner,
       Arrow
@@ -293,7 +302,8 @@
         pullToRefreshLayer: undefined,
         mousedown: false,
         infiniteTimer: undefined,
-        resizeTimer: undefined
+        resizeTimer: undefined,
+        mutationObserver: undefined
       }
     },
 
@@ -320,6 +330,9 @@
         bouncing: this.bouncing
       })
 
+      this.contentWidth = this.content.offsetWidth;
+      this.contentHeight = this.content.offsetHeight;
+
       // enable PullToRefresh
       if (this.onRefresh) {
         this.scroller.activatePullToRefresh(60, () => {
@@ -340,20 +353,38 @@
         })
       }
 
-      // enable infinite loading
-      if (this.onInfinite) {
-        this.infiniteTimer = setInterval(() => {
-          let {left, top, zoom} = this.scroller.getValues()
-
-          // 在 keep alive 中 deactivated 的组件长宽变为 0 
-          if (this.content.offsetHeight > 0 && 
-            top + 60 > this.content.offsetHeight - this.container.clientHeight) {
-            if (this.loadingState) return
-            this.loadingState = 1
-            this.showLoading = true
-            this.onInfinite(this.finishInfinite)
+      if (!MutationObserverClass) {
+        this.resizeTimer = setInterval(this.checkAndResize, 10);
+        // enable infinite loading
+        if (this.onInfinite) {
+          this.infiniteTimer = setInterval(this.checkAndInfinite, 10);
+        }
+      } else {
+        // enable infinite loading
+        if (this.onInfinite) {
+          this.scroller.addEventListener('scrollTopChanged', (top) => {
+            if (this.scrollTop !== top) {
+              this.scrollTop = top;
+              this.checkAndInfinite();
+            }
+          });
+        }
+
+        this.mutationObserver = new MutationObserverClass(() => {
+          this.checkAndResize();
+
+          // enable infinite loading
+          if (this.onInfinite) {
+            this.checkAndInfinite();
           }
-        }, 10);
+        });
+
+        this.mutationObserver.observe(this.container, {
+          attributes: true,
+          childList: true,
+          subtree: true,
+          attributeFilter: ['style', 'class']
+        });
       }
 
       // setup scroller
@@ -365,30 +396,12 @@
         // console.log(this.snapWidth, this.snapHeight)
         this.scroller.setSnapSize(this.snapWidth, this.snapHeight)
       }
-
-      // onContentResize
-      const contentSize = () => {
-        return {
-          width: this.content.offsetWidth,
-          height: this.content.offsetHeight
-        }
-      }
-
-      let { content_width, content_height } = contentSize()
-
-      this.resizeTimer = setInterval(() => {
-        let {width, height} = contentSize()
-        if (width !== content_width || height !== content_height) {
-          content_width = width
-          content_height = height
-          this.resize()
-        }
-      }, 10);
     },
 
     destroyed () {
-      clearInterval(this.resizeTimer);
+      if (this.resizeTimer) clearInterval(this.resizeTimer);
       if (this.infiniteTimer) clearInterval(this.infiniteTimer);
+      if (this.mutationObserver) this.mutationObserver.disconnect();
     },
 
     methods: {
@@ -398,6 +411,27 @@
         this.scroller.setDimensions(container.clientWidth, container.clientHeight, content.offsetWidth, content.offsetHeight);
       },
 
+      checkAndResize() {
+        const width = this.content.offsetWidth;
+        const height = this.content.offsetHeight;
+        if (width !== this.contentWidth || height !== this.contentHeight) {
+          this.contentWidth = width;
+          this.contentHeight = height;
+          this.resize();
+        }
+      },
+
+      checkAndInfinite() {
+        if (this.loadingState) return
+        if (this.contentHeight <= 0) return
+
+        if (this.scrollTop + 60 <= this.contentHeight - this.container.clientHeight) return
+
+        this.loadingState = 1
+        this.showLoading = true
+        this.onInfinite(this.finishInfinite)
+      },
+
       finishPullToRefresh() {
         this.scroller.finishPullToRefresh()
       },

src/module/core.js

@@ -1279,6 +1279,7 @@
 
 						self.__scrollLeft = oldLeft + (diffLeft * percent);
 						self.__scrollTop = oldTop + (diffTop * percent);
+						self.fireEvent('scrollTopChanged', self.__scrollTop);
 						self.__zoomLevel = oldZoom + (diffZoom * percent);
 
 						// Push values out
@@ -1317,6 +1318,7 @@
 
 				self.__scheduledLeft = self.__scrollLeft = left;
 				self.__scheduledTop = self.__scrollTop = top;
+				self.fireEvent('scrollTopChanged', self.__scrollTop);
 				self.__scheduledZoom = self.__zoomLevel = zoom;
 
 				// Push values out
@@ -1477,6 +1479,7 @@
 
 				self.__scrollLeft = scrollLeft;
 				self.__scrollTop = scrollTop;
+				self.fireEvent('scrollTopChanged', self.__scrollTop);
 
 			}
 
@@ -1542,7 +1545,28 @@
 					}
 				}
 			}
-		}
+		},
+
+		eventMap: new Map(),
+
+		addEventListener: function(name, listener) {
+			let listeners = this.eventMap.get(name);
+			if (!listeners) {
+				listeners = [];
+				this.eventMap.set(name, listeners);
+			}
+
+			listeners.push(listener);
+		},
+
+		fireEvent: function(name, data) {
+			let listeners = this.eventMap.get(name);
+			if (listeners) {
+				listeners.forEach(function(listener) {
+					listener(data);
+				});
+			}
+		},
 	};
 
 	// Copy over members to prototype