Brunch和Browserify和Rollup

虚拟化长列表

自定义优化demo

Twitter Lite中常见和不常见的性能瓶颈。

1使用基于路由的代码拆分

The CommonsChunkPlugin has been removed in webpack v4 legato. To learn how chunks are treated in the latest version, check out the SplitChunksPlugin.

2避免导致 Jank 的函数

通过尝试计算各种元素的高度来导致渲染卡顿(get innerHeight)，浏览器渲染过程

3使用较小的图像

4优化反应

利用`shouldComponentUpdate method`

主要在于pureComponent可以减少不必要的render，从而提高了性能，另外就是，不需要再手写shouldComponentUpdate里面的代码，从而节省了代码量；

将不必要的工作推迟到 componentDidMount

通过将非必要的代码路径从 componentWillMount 推迟到 componentDidMount，我们节省了大量时间来将推文渲染到屏幕上。单击或点击以放大。

componentWillMount 被废弃了，建议使用constructor()来初始化状态。

安装和卸载许多组件时延迟渲染

事实证明，在 React 中安装和卸载大型组件树（如 Tweets 的时间线）非常昂贵。

至少，我们想消除导航栏对用户输入没有反应的感觉。为此，我们创建了一个小的高阶组件

/**
 * Allows two animation frames to complete to allow other components to update
 * and re-render before mounting and rendering an expensive `WrappedComponent`.
 */
export default function deferComponentRender(WrappedComponent) {
  class DeferredRenderWrapper extends React.Component {
    constructor(props, context) {
      super(props, context);
      this.state = { shouldRender: false };
    }

    componentDidMount() {
      window.requestAnimationFrame(() => {
        window.requestAnimationFrame(() => this.setState({ shouldRender: true }));
      });
    }

    render() {
      return this.state.shouldRender ? <WrappedComponent {...this.props} /> : null;
    }
  }

  return hoistStatics(DeferredRenderWrapper, WrappedComponent);
}

批量操作到单个调度中

在 Twitter Lite 中，我们使用redux和react-redux来为我们的组件订阅数据状态更改。我们使用Normalizr和combineReducers将我们的数据优化到更大商店的不同区域。

在 Redux 中使用 React Perf 扩展而不使用批处理调度（左）与使用批处理调度（右）的比较。单击或点击以放大。

ServiceWorker

在支持 ServiceWorker 的浏览器中，我们可以让 Worker 在您返回之前自动在后台自动更新、下载和缓存任何更改的文件。
通过延迟 ServiceWorker 注册，直到我们完成加载额外的 API 请求、CSS 和图像资产，。请注意，当立即注册您的服务工作者时，它会如何阻止所有其他网络请求（左）。延迟服务工作者（右）允许您的初始页面加载发出所需的网络请求，而不会被浏览器的并发连接限制阻止。单击或点击以放大。

PureComponent和shouldComponentUpdate

不可变数据的力量

handleClick() {
  this.setState(state => ({
    words: [...state.words, 'marklar'],
  }));
};

function updateColorMap(colormap) {
  return Object.assign({}, colormap, {right: 'blue'});
}

当处理深层嵌套对象时，以 immutable （不可变）的方式更新它们令人费解。如遇到此类问题，请参阅 Immer 或 immutability-helper。这些库会帮助你编写高可读性的代码，且不会失去 immutability （不可变性）带来的好处。

react性能优化