Merge pull request #153 from bvaughn/performance-tweaking

bvaughn · bvaughn · commit 6aefc0f50460 · 2016-03-11T08:59:11.000-08:00
Performance tweaking
diff --git a/playground/grid.html b/playground/grid.html
@@ -17,8 +17,8 @@
       box-sizing: border-box;
     }
   </style>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-with-addons.min.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
   <script src="../dist/umd/react-virtualized.js"></script>
 </head>
 <body>
diff --git a/playground/grid.js b/playground/grid.js
@@ -1,36 +1,12 @@
 function renderCell (params) {
-  // return React.DOM.span(null, `column:${params.columnIndex}, row:${params.rowIndex}`)
   return React.DOM.input({
     className: 'input',
     onChange: function () {},
     defaultValue: `column:${params.columnIndex}, row:${params.rowIndex}`
   })
 }
 
-/*
-function measurePerformance () {
-  console.log('measurePerformance()')
-  var measurements = React.addons.Perf.getLastMeasurements()
-  if (measurements.length > 0) {
-    console.group('printDOM')
-    React.addons.Perf.printDOM(measurements)
-    console.groupEnd()
-
-    console.group('printWasted')
-    React.addons.Perf.printWasted(measurements)
-    console.groupEnd()
-
-    React.addons.Perf.start()
-  }
-}
-*/
-
 var App = React.createClass({
-  componentDidMount: function () {
-    // React.addons.Perf.start()
-    // window.Perf = React.addons.Perf
-  },
-
   render: function() {
     return React.createElement(
       ReactVirtualized.AutoSizer,
diff --git a/source/AutoSizer/AutoSizer.js b/source/AutoSizer/AutoSizer.js
@@ -41,6 +41,7 @@ export default class AutoSizer extends Component {
     }
 
     this._onResize = this._onResize.bind(this)
+    this._onScroll = this._onScroll.bind(this)
     this._setRef = this._setRef.bind(this)
   }
 
@@ -77,6 +78,7 @@ export default class AutoSizer extends Component {
     return (
       <div
         ref={this._setRef}
+        onScroll={this._onScroll}
         style={outerStyle}
       >
         {children({ height, width })}
@@ -102,6 +104,11 @@ export default class AutoSizer extends Component {
     onResize({ height, width })
   }
 
+  _onScroll (event) {
+    // Prevent detectElementResize library from being triggered by this scroll event.
+    event.stopPropagation()
+  }
+
   _setRef (autoSizer) {
     // In case the component has been unmounted
     this._parentNode = autoSizer && autoSizer.parentNode
diff --git a/source/styles.css b/source/styles.css
@@ -5,6 +5,11 @@
   overflow: auto;
   outline: 0;
   -webkit-overflow-scrolling: touch;
+
+  /* Without this property, Chrome repaints the entire Grid any time a new row or column is added.
+     Firefox only repaints the new row or column (regardless of this property).
+     Safari and IE don't support the property at all. */
+  will-change: transform;
 }
 
 .Grid__innerScrollContainer {
diff --git a/styles.css b/styles.css
@@ -5,6 +5,11 @@
   overflow: auto;
   outline: 0;
   -webkit-overflow-scrolling: touch;
+
+  /* Without this property, Chrome repaints the entire Grid any time a new row or column is added.
+     Firefox only repaints the new row or column (regardless of this property).
+     Safari and IE don't support the property at all. */
+  will-change: transform;
 }
 
 .Grid__innerScrollContainer {

Original file line number	Diff line number	Diff line change
`@@ -41,6 +41,7 @@ export default class AutoSizer extends Component {`
`41`	`41`	`}`
`42`	`42`
`43`	`43`	`this._onResize = this._onResize.bind(this)`
	`44`	`+ this._onScroll = this._onScroll.bind(this)`
`44`	`45`	`this._setRef = this._setRef.bind(this)`
`45`	`46`	`}`
`46`	`47`
`@@ -77,6 +78,7 @@ export default class AutoSizer extends Component {`
`77`	`78`	`return (`
`78`	`79`	`<div`
`79`	`80`	`ref={this._setRef}`
	`81`	`+ onScroll={this._onScroll}`
`80`	`82`	`style={outerStyle}`
`81`	`83`	`>`
`82`	`84`	`{children({ height, width })}`
`@@ -102,6 +104,11 @@ export default class AutoSizer extends Component {`
`102`	`104`	`onResize({ height, width })`
`103`	`105`	`}`
`104`	`106`
	`107`	`+ _onScroll (event) {`
	`108`	`+ // Prevent detectElementResize library from being triggered by this scroll event.`
	`109`	`+ event.stopPropagation()`
	`110`	`+ }`
	`111`	`+`
`105`	`112`	`_setRef (autoSizer) {`
`106`	`113`	`// In case the component has been unmounted`
`107`	`114`	`this._parentNode = autoSizer && autoSizer.parentNode`