Merge pull request steemit#1354 from steemit/perf-tweaks

Performance tweaks for scrolling and rendering
cryptosig · Apr 20, 2017 · 9a78575 · 9a78575
2 parents d596caa + 9484980
commit 9a78575
Show file tree

Hide file tree

Showing 13 changed files with 795 additions and 744 deletions.
diff --git a/app/assets/stylesheets/app.scss b/app/assets/stylesheets/app.scss
@@ -26,7 +26,7 @@
 }
 
 a, path, circle {
-  transition: all .3s ease 0s;
+  transition: opacity, fill, stroke .3s ease 0s;
 }
 
 .space-right {

diff --git a/app/components/App.jsx b/app/components/App.jsx
@@ -38,7 +38,7 @@ class App extends React.Component {
         // setTimeout(() => this.setState({showCallout: false}), 15000);
     }
 
-    componentDidUpdate(nextProps) {
+    componentWillReceiveProps(nextProps) {
         // setTimeout(() => this.setState({showCallout: false}), 15000);
         if (nextProps.location.pathname !== this.props.location.pathname) {
             this.setState({showBanner: false, showCallout: false})
@@ -48,9 +48,14 @@ class App extends React.Component {
     shouldComponentUpdate(nextProps, nextState) {
         const p = this.props;
         const n = nextProps;
-        return p.location !== n.location ||
-                  p.visitor !== n.visitor ||
-                  p.flash !== n.flash || this.state !== nextState;
+        return (
+            p.location.pathname !== n.location.pathname ||
+            p.new_visitor !== n.new_visitor ||
+            p.flash !== n.flash ||
+            this.state.open !== nextState.open ||
+            this.state.showBanner !== nextState.showBanner ||
+            this.state.showCallout !== nextState.showCallout
+        );
     }
 
     toggleOffCanvasMenu(e) {

diff --git a/app/components/cards/PostSummary.jsx b/app/components/cards/PostSummary.jsx
@@ -165,9 +165,9 @@ class PostSummary extends React.Component {
           const size = (thumbSize == 'mobile') ? '640x480' : '256x512';
           const url = (prox ? prox + size + '/' : '') + p.image_link
           if(thumbSize == 'mobile') {
-            thumb = <a href={p.link} onClick={e => navigate(e, onClick, post, p.link)} className="PostSummary__image-mobile"><img src={url} /></a>
+            thumb = <span onClick={e => navigate(e, onClick, post, p.link)} className="PostSummary__image-mobile"><img src={url} /></span>
           } else {
-            thumb = <a href={p.link} onClick={e => navigate(e, onClick, post, p.link)} className="PostSummary__image" style={{backgroundImage: 'url(' + url + ')'}}></a>
+            thumb = <span onClick={e => navigate(e, onClick, post, p.link)} className="PostSummary__image" style={{backgroundImage: 'url(' + url + ')'}}></span>
           }
         }
         const commentClasses = []

diff --git a/app/components/cards/PostSummary.scss b/app/components/cards/PostSummary.scss
@@ -37,6 +37,7 @@ ul.PostsList__summaries {
 }
 
 .PostSummary__image {
+  cursor: pointer;
   float: left;
   width: 130px;
   height: 4.5rem;
@@ -92,11 +93,12 @@ ul.PostsList__summaries {
   }
 }
 .PostSummary__collapse {
-  visibility: hidden;
+  opacity: 0;
+  will-change: opacity;
 }
 
 .PostSummary:hover .PostSummary__collapse {
-  visibility: visible;
+  opacity: 1;
 }
 
 .PostSummary__body {

diff --git a/app/components/cards/PostsList.jsx b/app/components/cards/PostsList.jsx
@@ -152,8 +152,8 @@ class PostsList extends React.Component {
     }, 150)
 
     attachScrollListener() {
-        window.addEventListener('scroll', this.scrollListener);
-        window.addEventListener('resize', this.scrollListener);
+        window.addEventListener('scroll', this.scrollListener, {capture: false, passive: true});
+        window.addEventListener('resize', this.scrollListener, {capture: false, passive: true});
         this.scrollListener();
     }
 
@@ -202,7 +202,7 @@ class PostsList extends React.Component {
                 <ul className="PostsList__summaries hfeed" itemScope itemType="http://schema.org/blogPosts">
                     {renderSummary(postsInfo)}
                 </ul>
-                {loading && <center><LoadingIndicator type="circle" /></center>}
+                {loading && <center><LoadingIndicator style={{marginBottom: "2rem"}} type="circle" /></center>}
                 {showPost && <div id="post_overlay" className="PostsList__post_overlay" tabIndex={0}>
                     <div className="PostsList__post_top_overlay">
                         <div className="PostsList__post_top_bar">

diff --git a/app/components/cards/PostsList.scss b/app/components/cards/PostsList.scss
@@ -10,6 +10,7 @@
   background-color: $white;
   // padding: 0 .9rem;
   -webkit-overflow-scrolling: touch;
+  backface-visibility: hidden;
 }
 
 .PostsList__post_top_overlay {

diff --git a/app/components/elements/LoadingIndicator.jsx b/app/components/elements/LoadingIndicator.jsx
@@ -5,7 +5,12 @@ class LoadingIndicator extends React.Component {
     static propTypes = {
         // html component attributes
         type: React.PropTypes.oneOf(['dots', 'circle']),
-        inline: React.PropTypes.bool
+        inline: React.PropTypes.bool,
+        style: React.PropTypes.object
+    };
+
+    static defaultProps = {
+        style: {}
     };
 
     constructor(props) {
@@ -14,27 +19,27 @@ class LoadingIndicator extends React.Component {
     }
 
     render() {
-        const {type, inline} = this.props;
+        const {type, inline, style} = this.props;
         switch (type) {
             case 'dots':
                 return (
-                    <div className="LoadingIndicator three-bounce">
+                    <div style={style} className="LoadingIndicator three-bounce">
                         <div className="bounce1"></div>
                         <div className="bounce2"></div>
                         <div className="bounce3"></div>
                     </div>
                 );
             case 'circle':
                 return  (
-                    <div className={'LoadingIndicator circle' + (inline ? ' inline' : '')}>
+                    <div style={style} className={'LoadingIndicator circle' + (inline ? ' inline' : '')}>
                         <div></div>
                     </div>
                 );
             default:
                 var classes = 'LoadingIndicator loading-overlay';
                 if(this.progress > 0) { classes += ' with-progress'; }
                 return (
-                    <div className={classes}>
+                    <div className={classes} style={style}>
                         <div className="loading-panel">
                             <div className="spinner">
                                 <div className="bounce1"></div>

diff --git a/app/components/elements/Voting.scss b/app/components/elements/Voting.scss
@@ -6,6 +6,10 @@
 }
 
 .Voting__button {
+  .Icon {
+    // Put the icon in a layer to improve rendering performance (scrolling especially)
+    transform: translate3d(0,0,0);
+  }
   path {
     fill: $dark-gray;
   }

diff --git a/app/components/modules/Header.jsx b/app/components/modules/Header.jsx
@@ -29,6 +29,10 @@ class Header extends React.Component {
         this.hideSubheader = this.hideSubheader.bind(this);
     }
 
+    componentDidMount() {
+        window.addEventListener('scroll', this.hideSubheader, {capture: false, passive: true});
+    }
+
     componentWillReceiveProps(nextProps) {
         if (nextProps.location.pathname !== this.props.location.pathname) {
             const route = resolveRoute(nextProps.location.pathname);
@@ -39,10 +43,15 @@ class Header extends React.Component {
         }
     }
 
+    componentWillUnmount() {
+        window.removeEventListener('scroll', this.hideSubheader);
+    }
+
     hideSubheader() {
         const subheader_hidden = this.state.subheader_hidden;
         const y = window.scrollY >= 0 ? window.scrollY : document.documentElement.scrollTop;
         if (y === this.prevScrollY) return;
+
         if (y < 5) {
             this.setState({subheader_hidden: false});
         } else if (y > this.prevScrollY) {
@@ -53,14 +62,6 @@ class Header extends React.Component {
         this.prevScrollY = y;
     }
 
-    componentDidMount() {
-        window.addEventListener('scroll', this.hideSubheader);
-    }
-
-    componentWillUnmount() {
-        window.removeEventListener('scroll', this.hideSubheader);
-    }
-
     render() {
         const route = resolveRoute(this.props.location.pathname);
         const current_account_name = this.props.current_account_name;

diff --git a/app/components/modules/Header.scss b/app/components/modules/Header.scss
@@ -1,5 +1,6 @@
 .Header {
   position: fixed;
+  backface-visibility: hidden;
   top: 0;
   left: 0;
   width: 100%;
@@ -77,8 +78,9 @@ ul > li > .button {
   padding: 0;
   background-color: $white;
   border-bottom: 1px solid $light-gray;
-  transition: all .3s;
+  transition: margin .3s;
   z-index: -1;
+  will-change: margin;
   li {
     line-height: 1rem;
     padding: 1.2rem 0 1.2rem 0;

diff --git a/package.json b/package.json
@@ -52,7 +52,6 @@
     "git-rev-sync": "^1.6.0",
     "grant-koa": "^3.6.0",
     "highcharts": "^4.2.5",
-    "history": "^2.0.0-rc2",
     "humanize-number": "0.0.2",
     "imports-loader": "^0.6.5",
     "intl": "^1.2.5",
@@ -85,10 +84,10 @@
     "pluralize": "^2.0.0",
     "purest": "^2.0.1",
     "raw-loader": "^0.5.1",
-    "react": "https://registry.npmjs.org/react/-/react-15.4.1.tgz",
-    "react-addons-pure-render-mixin": "^15.4.1",
+    "react": "15.4.2",
+    "react-addons-pure-render-mixin": "15.4.2",
     "react-copy-to-clipboard": "^4.2.3",
-    "react-dom": "^15.4.1",
+    "react-dom": "15.4.2",
     "react-dropzone": "^3.7.3",
     "react-foundation-components": "git+https://github.com/valzav/react-foundation-components.git#d14362c7c8eee946a4acc3b18d70271d5a82813e",
     "react-highcharts": "^8.3.3",
@@ -100,13 +99,13 @@
     "react-qr": "0.0.2",
     "react-rangeslider": "1.0.3",
     "react-redux": "^4.4.0",
-    "react-router": "^2.4.0",
+    "react-router": "^3.0.5",
     "react-router-redux": "^4.0.0",
-    "react-router-scroll": "^0.2.0",
+    "react-router-scroll": "^0.4.2",
     "react-rte-image": "^0.3.1",
     "react-timeago": "^3.1.2",
     "redux": "^3.3.1",
-    "redux-form": "^5.2.3",
+    "redux-form": "5.3.4",
     "redux-modules": "0.0.5",
     "redux-saga": "^0.9.5",
     "remarkable": "1.6.2",
@@ -156,8 +155,8 @@
     "koa-webpack-hot-middleware": "^1.0.3",
     "mocha": "^2.4.5",
     "node-watch": "^0.3.5",
-    "react-addons-perf": "^15.4.1",
-    "react-addons-test-utils": "^15.4.1",
+    "react-addons-perf": "15.4.2",
+    "react-addons-test-utils": "15.4.2",
     "react-transform-catch-errors": "^1.0.1",
     "react-transform-hmr": "^1.0.4",
     "redbox-react": "^1.2.0",

diff --git a/shared/UniversalRender.jsx b/shared/UniversalRender.jsx
@@ -10,7 +10,7 @@ import { Provider } from 'react-redux';
 import RootRoute from 'app/RootRoute';
 import {createStore, applyMiddleware, compose} from 'redux';
 import { browserHistory } from 'react-router';
-import useScroll from 'react-router-scroll';
+import { useScroll } from 'react-router-scroll';
 import createSagaMiddleware from 'redux-saga';
 import { syncHistoryWithStore } from 'react-router-redux';
 import rootReducer from 'app/redux/RootReducer';