首页 > web前端 > js教程 > 正文

JavaScript如何提升代码性能的用法汇总

伊谢尔伦
发布: 2017-07-26 13:47:32
原创
1460人浏览过

使用字符串累加计算风格 

使用+运算会在内存中创建一个新的字符串并把连接的值赋给它。仅仅是将这个结果赋值给一个变量。
为了避免连接结果的中间变量,可以使用+=来直接赋值结果。 

运行缓慢的代码: 

a += 'x' + 'y';
登录后复制

运行更快的代码: 

a += 'x'; a += 'y';
登录后复制


立即学习Java免费学习笔记(深入)”;

原操作会比函数调用快
可以考虑在性能要求关键的循环和函数中使用可以替代的原操作。
运行缓慢的代码: 

var min = Math.min(a, b); 
arr.push(val);
登录后复制

运行更快的代码: 

var min = a < b ? a : b; 
arr[arr.length] = val;
登录后复制

设置setTimeout() 和 setInterval() 时传递函数名而不是字符串 

如果你传递一个字符串到setTimeout() 或者 setInterval()中,字符串将会被eval计算而导致缓慢。
使用一个匿名函数包装来代替,这样在编译的时候就可以被解释和优化。 

运行缓慢的代码:

setInterval('doSomethingPeriodically()', 1000); 
setTimeOut('doSomethingAfterFiveSeconds()', 5000);
登录后复制

运行更快的代码: 

setInterval(doSomethingPeriodically, 1000); 
setTimeOut(doSomethingAfterFiveSeconds, 5000);
登录后复制

避免在对象中使用不需要的DOM引用 

不要这么做: 

var car = new Object(); 
car.color = "red"; 
car.type = "sedan"
登录后复制

更好的一种形式:

var car = { 
color : "red"; 
type : "sedan" 
}
登录后复制

最清晰的目标速度,最小化作用域链 

绘蛙AI视频
绘蛙AI视频

绘蛙推出的AI模特视频生成工具

绘蛙AI视频 127
查看详情 绘蛙AI视频

低效率方法: 

var url = location.href;
登录后复制

一种高效形式: 

var url = window.location.href;
登录后复制

试着在脚本中少使用注释,避免使用长变量名
尽可能的保证注释少或者避免使用注释,特别是在函数,循环以及数组中。
注释不必要的减缓脚本执行并且增加了文件大小。比如: 

不建议的形式:

function someFunction() 
{ 
var person_full_name="somename"; /* stores the full name*/ 
}
登录后复制

更好的写法: 

function someFunction() 
{ 
var name="somename"; 
}
登录后复制

在当前作用域存储应用的外部变量
当一个函数被执行的运行上下问被穿件,一个活动的对象会包含所有局部变量会被推到上下文链的前面。
在作用域链中,最慢的是清楚的识别标识符,意味着局部变量是最快的。存储频繁使用的外部变量读和写都会明显的加快。这对于全局变量和其他深层次的标识符查找特别明显。
同样,在当前作用域中的变量(var myVar)比对象像属性的访问速度快(this.myVar)。 

运行缓慢的代码:

function doSomething(text) { 
var ps = document.getElementsByTagName('p'), 
text = ['foo', /* ... n ... */, 'bar']; 
for (var i = 0, l = ps.length; i < l; i++) { 
ps[i].innerHTML = text[i]; 
} 
}
登录后复制

运行更快的代码:

function doSomethingFaster(text) { 
var doc = document, 
ps = doc.getElementsByTagName('p'), 
text = ['foo', /* ... n ... */, 'bar']; 
for (var i = 0, l = ps.length; i < l; i++) { 
ps[i].innerHTML = text[i]; 
} 
}
登录后复制

如果你需要访问一个元素(如 head)在一个大的循环中,使用一个本地的DOM访问(如例子中的get)会更快。
运行更快的代码:

function doSomethingElseFaster() { 
var get = document.getElementsByTagName; 
for (var i = 0, i < 100000; i++) { 
get('head'); 
} 
}
登录后复制

使用变量缓存值
在做重复工作的地方使用局部变量缓存值。
下面的一组例子表明了存储值到局部变量的广泛意义。

例子1.计算执行前在循环体内使用变量存储数学函数
错误的方法: 

var d=35; 
for (var i=0; i<1000; i++) { 
y += Math.sin(d)*10; 
}
登录后复制

更好的处理: 

var d = 55; 
var math_sind = Math.sin(d)*10; 
for (var i=0; i<1000; i++) { 
y += math_sind; 
}
登录后复制


例子2.保存数组的长度在循环中使用
糟糕的处理:
数组的长度每次都会被重复计算 

for (var i = 0; i < arr.length; i++) { 
// do something 
}
登录后复制

更好的改进:
更好的方法是保存数组的长度 

for (var i = 0, len = arr.length; i < len; i++) { 
// do something 
}
登录后复制

总的来说,如果已经做了一次,我们就不需要重复的做不必要的工作。例如,作用域或者函数中多次使用到计算的一个表达式的值,保存到变量可以使它多次被使用,否则我们会过头的声明一个变量并赋值然后只适用一次。所以请记住这些。


以上就是JavaScript如何提升代码性能的用法汇总的详细内容,更多请关注php中文网其它相关文章!

相关标签:
数码产品性能查询
数码产品性能查询

该软件包括了市面上所有手机CPU,手机跑分情况,电脑CPU,电脑产品信息等等,方便需要大家查阅数码产品最新情况,了解产品特性,能够进行对比选择最具性价比的商品。

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号