「JavaScript 优化技巧」日常开发积累分享 3:提高前端运行性能小知识点

98 阅读2分钟

🙏废话不多说系列,直接开整🙏

1. 使用 === 取代 == 

== 和 !=  操作符回再需要的情况下 自动转换数据类型。但是 === 和 !== 不会,它们会同时比较值和数据类型,这也是得他们要比 == 和 != 快。

2. 使用对象构造器

function Person(firstName, lastName){
	this.firstName = firstName;
    this.lastName = lastName;
}
var Saad = new Person('Saad','Mousliki');
// ======================================  示例:
<script>
    function Person(firstName, lastName) {
        this.firstName = firstName;
        this.lastName = lastName;
    }
    function printPerson() {
        var Saad = new Person('Saad', 'Mousliki');
        console.log(Saad); // 输出:Person {firstName: "Saad", lastName: "Mousliki"}
    }
</script>

3. 使用自调用函数

函数在创建之后直接自动执行,通常称之为  子调用匿名函数(Self-Invoked Anonymous Function)或直接调用函数表达式(Immediately Invoked Function Expression),格式如下:

(function{
 // 置于此处的代码将自动执行
 });
(function(a,b){
 return a+b;
})(10,20)
// ============================== 示例:
function returnValue() {
    let sum = (function (a, b) {
        return a + b;
    })(10, 20)
    console.log(sum)
}

4. 避免再数组中使用负数作为索引

var numbersArr = [1,2,3,4,5];
var from = numbersArr.indexOf("foo");// indexOf() 函数检查是否再numbersArr的数组中,如果没有则返回为-1
numbersArr.splice(from, 2); // will return [5]
// 注意: 传给 splice 的索引参数不要使负数,当时负数时,会从数组结尾处删除元素。

5. 不要使用 eval 或者 函数构造器

理由:eval 和 函数构造器(Function Consturctor)的开销较大,每次调用,JavaScript 引擎都要将源代码转换为可执行的代码。

var func = new Function(functionCode);
var func2 = eval(functionCode);

6. 避免使用 with

使用 with 可以把变量加入到全局作用域中,因此,如果有其他的同名变量,一来容易混淆,二来值也会被覆盖。

7. 使用 switch/case 来替换一大堆的 if/else

当判断有超过两个分支时使用 switch/case 要快一些,而且也更优雅,更利于代码的组织,当然,如果有超过10个分支,就不要使用 switch/case 了。

8. 尽量避免使用全局变量

9. 开发时注意代码结构,上线前检查并压缩JavaScript代码

现在代码压缩一般使用 UglifyJS(github.com/mishoo/Ugli…)

10. 尽量不要使用 for-in 循环去访问数组,建议 for 循环进行循环。

11. 避免再函数内返回一个未声明的变量,会污染外部变量。

// 反例
function foo(a, b) {
	r = a + b;
    return r; // r 未声明,则创建了一个全局变量
}

🙏至此,非常感谢阅读🙏