javascript性能优化

Posted 2020-10-16 web前端开发技术

1、尊重对象所有权

? 不要为实例或原型添加属性；
? 不要为实例或原型添加方法；
? 不要重定义已存在的方法。

 最佳的方法便是永远不修改不是由你所有的对象。所谓拥有对象，就是说这个对象是你创建的，比如你自己创建的自定义类型或对象字面量。而 Array 、 document 这些显然不是你的，它们在你的代码执行前就存在了。

 

2、避免全局变量

最多创建一个全局变量，让其他对象和函数存在其中。请看以下例子：

//两个全局量——避免！！
var name = "Nicholas";
function sayName(){
alert(name);
}

这段代码包含了两个全局量：变量 name 和函数 sayName() 。其实可以创建一个包含两者的对象，如下例所示：

//一个全局量——推荐
var MyApplication = {
name: "Nicholas",
sayName: function(){
alert(this.name);
}
};

 

3、避免与 null 进行比较

? 如果值应为一个引用类型，使用 instanceof 操作符检查其构造函数；
? 如果值应为一个基本类型，使用 typeof 检查其类型；
? 如果是希望对象包含某个特定的方法名，则使用 typeof 操作符确保指定名字的方法存在于对象上。

 

4、使用常量

尽管 javascript 没有常量的正式概念，但它还是很有用的。这种将数据从应用逻辑分离出来的思想，可以在不冒引入错误的风险的同时，就改变数据。请看以下例子：

var Constants = {
INVALID_VALUE_MSG: "Invalid value!",
INVALID_VALUE_URL: "/errors/invalid.php"
};
function validate(value){
if (!value){
alert(Constants.INVALID_VALUE_MSG);
location.href = Constants.INVALID_VALUE_URL;
}
}

 

5、避免全局查找

可能优化脚本性能最重要的就是注意全局查找。使用全局变量和函数肯定要比局部的开销更大，因为要涉及作用域链上的查找。请看以下函数：

function updateUI(){
var imgs = document.getElementsByTagName("img");
for (var i=0, len=imgs.length; i < len; i++){
imgs[i].title = document.title + " image " + i;
}
var msg = document.getElementById("msg");
msg.innerhtml = "Update complete.";
}

该函数可能看上去完全正常，但是它包含了三个对于全局 document 对象的引用。如果在页面上有多个图片，那么 for 循环中的 document 引用就会被执行多次甚至上百次，每次都会要进行作用域链查找。通过创建一个指向 document 对象的局部变量，就可以通过限制一次全局查找来改进这个函数的性能：

function updateUI(){
var doc = document;
var imgs = doc.getElementsByTagName("img");
for (var i=0, len=imgs.length; i < len; i++){
imgs[i].title = doc.title + " image " + i;
}
var msg = doc.getElementById("msg");
msg.innerHTML = "Update complete.";
}

这里，首先将 document 对象存在本地的 doc 变量中；然后在余下的代码中替换原来的 document 。与原来的的版本相比，现在的函数只有一次全局查找，肯定更快。

 

6、性能的其他注意事项

? 原生方法较快——只要有可能，使用原生方法而不是自己用 JavaScript 重写一个。原生方法是用诸如 C/C++之类的编译型语言写出来的，所以要比 JavaScript 的快很多很多。JavaScript 中最容易被忘记的就是可以在 Math 对象中找到的复杂的数学运算；这些方法要比任何用 JavaScript 写的同样方法如正弦、余弦快的多。
? Switch 语句较快 —— 如果有一系列复杂的 if-else 语句，可以转换成单个 switch 语句则可以得到更快的代码。还可以通过将 case 语句按照最可能的到最不可能的顺序进行组织，来进一步优化 switch 语句。
? 位运算符较快 —— 当进行数学运算的时候，位运算操作要比任何布尔运算或者算数运算快。选择性地用位运算替换算数运算可以极大提升复杂计算的性能。诸如取模，逻辑与和逻辑或都可以考虑用位运算来替换。