整理部分性能问题

1\ webpack中的配置:
一些插件:
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');//css打包样式最小化,
配置:
entry入口处配置vendor,这样的话,就不会每个js都打共用插件进去,减少了js的体积.vendor.js中的内容基本上很少更新,并利用浏览器的缓存去提高应用程序的首屏加载速度
['react', 'react-dom', 'redux', 'react-redux', 'react-router', 'autoprefixer', 'add-dom-event-listener', 'axios'],

代码层面
1\减少 setInterval()对性能有影响:(setTimeout也有clearTimeout)

比如死循环,导致页面无响应 频繁的操作dom元素,使页面不断的repait或者reflow导致很大的资源消耗
在setInterval中不合理的使用闭包导致对象没有被回收等
clearInterval(time);
使用setTimeout代替setInterval
setTimeout(function(){
//do something
setTimeout(arguments.callee, time); //arguments.callee相当于这个函数本身.
}, time);
也可以用另一种形式:
function time(){
setTimeout(function(){
time();
}, 500);
}

2\shouldComponentUpdate(nextStates)

通过返回True或者false来确定是不是把改变的值放到render里渲染.以此可用来减少组件的不必要渲染,优化组件性能。

3\请求接口数据后渲染,放在componentDidUpdate 里面,不放在componentWillUpdate 里面

componentDidUpdate 之前已经执行render渲染出页面了,加快页面的流畅性.
react有算法,会对比 只渲染改变的部分.

**4\虚拟 dom **

虚拟 dom 相当于在 js 和真实 dom 中间加了一个缓存,利用 dom diff 算法避免了没有必要的 dom 操作,从而提高性能。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值