diff --git a/src/components/ActiveChart/index.js b/src/components/ActiveChart/index.js
index cd6119b9fa353538ed2116cb97af521dd0a25389..07e29619f309072f0e6a3a1c99b0a5d12a09be36 100644
--- a/src/components/ActiveChart/index.js
+++ b/src/components/ActiveChart/index.js
@@ -26,17 +26,26 @@ export default class ActiveChart extends Component {
   };
 
   componentDidMount() {
-    this.timer = setInterval(() => {
-      this.setState({
-        activeData: getActiveData(),
-      });
-    }, 1000);
+    this.loopData();
   }
 
   componentWillUnmount() {
-    clearInterval(this.timer);
+    clearTimeout(this.timer);
   }
-
+  loopData = () => {
+    this.timer = setTimeout(() => {
+      this.setState(
+        {
+          activeData: getActiveData(),
+        },
+        () => {
+          requestAnimationFrame(() => {
+            this.loopData();
+          });
+        }
+      );
+    }, 1000);
+  };
   render() {
     const { activeData = [] } = this.state;
 
diff --git a/src/components/Charts/Bar/index.js b/src/components/Charts/Bar/index.js
index a3c3608433cffd5d88ea1ee1e6b1890bc46e6e7f..1a2d5c70add7cd0509a50675c568d138131536f7 100644
--- a/src/components/Charts/Bar/index.js
+++ b/src/components/Charts/Bar/index.js
@@ -25,25 +25,27 @@ class Bar extends Component {
     if (!this.node) {
       return;
     }
-    const canvasWidth = this.node.parentNode.clientWidth;
-    const { data = [], autoLabel = true } = this.props;
-    if (!autoLabel) {
-      return;
-    }
-    const minWidth = data.length * 30;
-    const { autoHideXLabels } = this.state;
+    requestAnimationFrame(() => {
+      const canvasWidth = this.node.parentNode.clientWidth;
+      const { data = [], autoLabel = true } = this.props;
+      if (!autoLabel) {
+        return;
+      }
+      const minWidth = data.length * 30;
+      const { autoHideXLabels } = this.state;
 
-    if (canvasWidth <= minWidth) {
-      if (!autoHideXLabels) {
+      if (canvasWidth <= minWidth) {
+        if (!autoHideXLabels) {
+          this.setState({
+            autoHideXLabels: true,
+          });
+        }
+      } else if (autoHideXLabels) {
         this.setState({
-          autoHideXLabels: true,
+          autoHideXLabels: false,
         });
       }
-    } else if (autoHideXLabels) {
-      this.setState({
-        autoHideXLabels: false,
-      });
-    }
+    });
   }
 
   handleRoot = n => {
diff --git a/src/components/Charts/Pie/index.js b/src/components/Charts/Pie/index.js
index 0d0dc3c5d174a2ddf374eeccd36d947bda94249f..2e68fdc6f6aa27e39541acc68c715e813fca683d 100644
--- a/src/components/Charts/Pie/index.js
+++ b/src/components/Charts/Pie/index.js
@@ -19,8 +19,6 @@ export default class Pie extends Component {
   };
 
   componentDidMount() {
-    this.getLegendData();
-    this.resize();
     window.addEventListener('resize', this.resize);
   }
 
@@ -46,12 +44,17 @@ export default class Pie extends Component {
 
   getG2Instance = chart => {
     this.chart = chart;
+    requestAnimationFrame(() => {
+      this.getLegendData();
+      this.resize();
+    });
   };
 
   // for custom lengend view
   getLegendData = () => {
     if (!this.chart) return;
     const geom = this.chart.getAllGeoms()[0]; // 获取所有的图形
+    if (!geom) return;
     const items = geom.get('dataArray') || []; // 获取图形对应的
 
     const legendData = items.map(item => {
@@ -71,22 +74,24 @@ export default class Pie extends Component {
   @Bind()
   @Debounce(300)
   resize() {
-    const { hasLegend } = this.props;
-    if (!hasLegend || !this.root) {
-      window.removeEventListener('resize', this.resize);
-      return;
-    }
-    if (this.root.parentNode.clientWidth <= 380) {
-      if (!this.state.legendBlock) {
+    requestAnimationFrame(() => {
+      const { hasLegend } = this.props;
+      if (!hasLegend || !this.root) {
+        window.removeEventListener('resize', this.resize);
+        return;
+      }
+      if (this.root.parentNode.clientWidth <= 380) {
+        if (!this.state.legendBlock) {
+          this.setState({
+            legendBlock: true,
+          });
+        }
+      } else if (this.state.legendBlock) {
         this.setState({
-          legendBlock: true,
+          legendBlock: false,
         });
       }
-    } else if (this.state.legendBlock) {
-      this.setState({
-        legendBlock: false,
-      });
-    }
+    });
   }
 
   handleRoot = n => {
diff --git a/src/components/Charts/Radar/index.js b/src/components/Charts/Radar/index.js
index fc3ab4447e97bece6456bddb9fbb3ff5f1089b5b..588d982457f132f73b784d087eb190d4674ece5b 100644
--- a/src/components/Charts/Radar/index.js
+++ b/src/components/Charts/Radar/index.js
@@ -12,7 +12,9 @@ export default class Radar extends Component {
   };
 
   componentDidMount() {
-    this.getLengendData();
+    requestAnimationFrame(() => {
+      this.getLengendData();
+    });
   }
 
   componentWillReceiveProps(nextProps) {
diff --git a/src/components/Charts/TagCloud/index.js b/src/components/Charts/TagCloud/index.js
index 08418ea12dd8c034bd9af8dfe786ad2daa2c90c7..1c284ab7a29f2f3325b575ed1403a235c6a65dc9 100644
--- a/src/components/Charts/TagCloud/index.js
+++ b/src/components/Charts/TagCloud/index.js
@@ -19,8 +19,10 @@ class TagCloud extends Component {
   };
 
   componentDidMount() {
-    this.initTagCloud();
-    this.renderChart();
+    requestAnimationFrame(() => {
+      this.initTagCloud();
+      this.renderChart();
+    });
     window.addEventListener('resize', this.resize);
   }
 
@@ -36,7 +38,9 @@ class TagCloud extends Component {
   }
 
   resize = () => {
-    this.renderChart();
+    requestAnimationFrame(() => {
+      this.renderChart();
+    });
   };
 
   saveRootRef = node => {
diff --git a/src/components/Charts/WaterWave/index.js b/src/components/Charts/WaterWave/index.js
index 5b463ad58bab3741a186621ca1097107e811ce32..f5ea26a0c815473398e2101931088f4dd1b65b10 100644
--- a/src/components/Charts/WaterWave/index.js
+++ b/src/components/Charts/WaterWave/index.js
@@ -13,9 +13,10 @@ export default class WaterWave extends PureComponent {
   };
 
   componentDidMount() {
-    this.renderChart();
-    this.resize();
-
+    requestAnimationFrame(() => {
+      this.renderChart();
+      this.resize();
+    });
     window.addEventListener('resize', this.resize);
   }
 
@@ -28,10 +29,12 @@ export default class WaterWave extends PureComponent {
   }
 
   resize = () => {
-    const { height } = this.props;
-    const { offsetWidth } = this.root.parentNode;
-    this.setState({
-      radio: offsetWidth < height ? offsetWidth / height : 1,
+    requestAnimationFrame(() => {
+      const { height } = this.props;
+      const { offsetWidth } = this.root.parentNode;
+      this.setState({
+        radio: offsetWidth < height ? offsetWidth / height : 1,
+      });
     });
   };
 
diff --git a/src/routes/Account/Settings/Info.js b/src/routes/Account/Settings/Info.js
index e6ec2a1d5ba1d51cecc9c81c5d7f23adfe436117..149b9f71e52e2f62ae1bc80d8f4a6c7b97543cbe 100644
--- a/src/routes/Account/Settings/Info.js
+++ b/src/routes/Account/Settings/Info.js
@@ -52,16 +52,18 @@ export default class Info extends Component {
     if (!this.main) {
       return;
     }
-    let mode = 'inline';
-    const { offsetWidth } = this.main;
-    if (this.main.offsetWidth < 641 && offsetWidth > 400) {
-      mode = 'horizontal';
-    }
-    if (window.innerWidth < 768 && offsetWidth > 400) {
-      mode = 'horizontal';
-    }
-    this.setState({
-      mode,
+    requestAnimationFrame(() => {
+      let mode = 'inline';
+      const { offsetWidth } = this.main;
+      if (this.main.offsetWidth < 641 && offsetWidth > 400) {
+        mode = 'horizontal';
+      }
+      if (window.innerWidth < 768 && offsetWidth > 400) {
+        mode = 'horizontal';
+      }
+      this.setState({
+        mode,
+      });
     });
   };
   render() {
diff --git a/src/routes/Forms/AdvancedForm.js b/src/routes/Forms/AdvancedForm.js
index 16b7e3b02946570445720cb9e3b69d24bd8aa52e..ecb0f247e16827e5da2491aa324e25c23159c459 100644
--- a/src/routes/Forms/AdvancedForm.js
+++ b/src/routes/Forms/AdvancedForm.js
@@ -68,11 +68,13 @@ class AdvancedForm extends PureComponent {
     window.removeEventListener('resize', this.resizeFooterToolbar);
   }
   resizeFooterToolbar = () => {
-    const sider = document.querySelectorAll('.ant-layout-sider')[0];
-    const width = `calc(100% - ${sider.style.width})`;
-    if (this.state.width !== width) {
-      this.setState({ width });
-    }
+    requestAnimationFrame(() => {
+      const sider = document.querySelectorAll('.ant-layout-sider')[0];
+      const width = `calc(100% - ${sider.style.width})`;
+      if (this.state.width !== width) {
+        this.setState({ width });
+      }
+    });
   };
   render() {
     const { form, dispatch, submitting } = this.props;
diff --git a/src/routes/Profile/AdvancedProfile.js b/src/routes/Profile/AdvancedProfile.js
index cb0ccce9a36a79457f505ff16cfd54f354c7ae87..727dbb3090cde75be997f759e41655dbf4f0124a 100644
--- a/src/routes/Profile/AdvancedProfile.js
+++ b/src/routes/Profile/AdvancedProfile.js
@@ -212,17 +212,19 @@ export default class AdvancedProfile extends Component {
   @Bind()
   @Debounce(200)
   setStepDirection() {
-    const { stepDirection } = this.state;
-    const w = getWindowWidth();
-    if (stepDirection !== 'vertical' && w <= 576) {
-      this.setState({
-        stepDirection: 'vertical',
-      });
-    } else if (stepDirection !== 'horizontal' && w > 576) {
-      this.setState({
-        stepDirection: 'horizontal',
-      });
-    }
+    requestAnimationFrame(() => {
+      const { stepDirection } = this.state;
+      const w = getWindowWidth();
+      if (stepDirection !== 'vertical' && w <= 576) {
+        this.setState({
+          stepDirection: 'vertical',
+        });
+      } else if (stepDirection !== 'horizontal' && w > 576) {
+        this.setState({
+          stepDirection: 'horizontal',
+        });
+      }
+    });
   }
 
   render() {