美文网首页
web前端性能优化

web前端性能优化

作者: 刘叶青 | 来源:发表于2019-12-30 14:26 被阅读0次

\color{red}{重复代码要提取成函数,然后从外部传入实参,来让代码更灵活}
原代码:
function change_start_price(e) {
dispatch({
type : 'groupManageModel/updateState',
payload : {
start_price : e
}
});
}
function change_end_price(e) {
dispatch({
type : 'groupManageModel/updateState',
payload : {
end : e
}
});
}
修改之后的代码:
function change_val(key, e) {
dispatch({
type : 'groupManageModel/updateState',
payload : {
[key] : e
}
});
}
调用时这样调用:
change_val.bind(this, 'start_price')
change_val.bind(this, 'end_price')

\color{red}{2个变量,是同一个值,这种代码要去掉其中一个变量}

\color{red}{新建弹出框时清空弹出框数据,其他时候不清空弹出框数据,以前在弹出框里处理数据以后,点击确定,成功以后我也清空弹出框数据,其实没必要}

\color{red}{同一个属性使用次数超过一次时,进行封装:}
原代码:
if(addModalTitle == '编辑'){
// 编辑商品组
dispatch({
type: 'groupManageModel/goodsRuleupdate',
payload: {
id,
gePrice : select_price ? start_price : undefined,
ltPrice : select_price ? end_price : undefined,
},
});
}
else{
// 创建商品组
dispatch({
type: 'groupManageModel/goodsRulecreate',
payload: {
gePrice : select_price ? start_price : undefined,
ltPrice : select_price ? end_price : undefined,
},
});
}
修改之后的代码:
let commonPayload = {
gePrice : select_price ? start_price : undefined,
ltPrice : select_price ? end_price : undefined,
};
if(addModalTitle != '编辑'){
// 创建商品组
dispatch({
type: 'groupManageModel/goodsRulecreate',
payload: commonPayload,
});
}
else{
// 编辑商品组
dispatch({
type: 'groupManageModel/goodsRuleupdate',
payload: {
id,
...commonPayload
},
});
}

\color{red}{关于for循环时,缓存长度的值:}
原代码:
var arr = [1, 2];
for(var i = 0;i < arr.length;i++){
console.log(arr[i]);
}
修改之后的代码:
var arr = [1, 2];
for(var i = 0,len = arr.length;i < len;i++){
console.log(arr[i]);
}

相关文章

  • Web前端性能优化,应该怎么做?

    想要成为一名合格的Web前端工程师,Web前端性能优化是一个必须要掌握的知识,那么应该怎么进行Web前端性能优化呢...

  • 前端性能优化(中)

    性能优化调研系列文章 《前端性能优化(上)》 《前端性能优化(中)》 《前端性能优化(下)》 《前端性能优化(上)...

  • 前端性能优化(下)

    性能优化调研系列文章 《前端性能优化(上)》 《前端性能优化(中)》 《前端性能优化(下)》 《前端性能优化(中)...

  • 前端性能优化

    js性能小贴士——优化循环 前端网页与js性能优化 我总结的js性能优化的小知识 提高 web 应用性能之 Jav...

  • 前端性能 优化 大全

    js性能小贴士——优化循环 前端网页与js性能优化 我总结的js性能优化的小知识 提高 web 应用性能之 Jav...

  • 前端性能优化(2)

    一.上文回顾 上回我们主要从图片的合并、压缩等方面介绍前端性能优化问题(详见Java Web 前端高性能优化(一)...

  • Java Web 前端高性能优化(二)

    一.上文回顾 上回我们主要从图片的合并、压缩等方面介绍前端性能优化问题(详见Java Web 前端高性能优化(一)...

  • 性能优化

    +WEB前端性能优化:HTML,CSS,JS和服务器端优化对前端开发工程师来说,前端性能优化的重要性是不言而喻的,...

  • 前端性能优化(上)

    性能优化调研系列文章 《前端性能优化(上)》 《前端性能优化(中)》 《前端性能优化(下)》 为什么要进行前端性能...

  • Web前端知识分享:3个优化Web性能的小技巧

    Web性能优化重不重要?相信每一个从事Web前端开发的人都会回答重要,毕竟Web性能优化好的网站可以给用户带来更好...

网友评论

      本文标题:web前端性能优化

      本文链接:https://www.haomeiwen.com/subject/vecmoctx.html