前端性能优化

[ke1vin4real]

老生常谈的话题，前端面试基本都会问到。回答应该从减少http请求，利用缓存以及资源加载方式切入，但前端+后端性能优化也并不局限于这些方式，更全面的回答能体现面试者的经验以及对技术的理解。不应该以生搬的套路进行回答，结合自己实际研发经验才是面试官想要的答案。问题如下：

1. 你在前端性能优化方面有什么心得？
2. 在类似webpack／gulp的自动化工具使用上，你有什么优化经验／心得？
3. 如果网站首页加载速度很慢，你会怎样定位问题？

[Cecilxx]

项目中大多使用React + Webpack：

React

• {...this.props} 不要滥用，请只传递component需要的props
• props state 尽可能的简单，扁平化，props传的太多或者传得太深，都会加重shouldComponentUpdate里面的数据比较负担
• 多使用Functional Component （不需要使用组件的生命周期）和 PureComponent （与普通Component的区别在于重写了shouldComponentUpdate方法，会对state和props进行浅比较）
• 建议引入Immutable.js，可以配合shouldComponentUpdate方法，手动改变返回值
• ::this.handle 需要绑定this的方法，一律放在construtor里面，放在render里面每次渲染都会绑定一次
• 合理的组件拆分，避免一个组件过于庞大

Webpack

• 公共代码提取，webpack <= 3 版本可以使用CommonsChunkPlugin插件
• 代码分割（异步加载），webpack 2 可以使用require.ensure()，webpack 3可以使用() => import()

[evilrescuer]

补充：

webpack性能优化：https://juejin.im/post/5b652b036fb9a04fa01d616b