JavaScript改善代码性能的一些方法

最新推荐文章于 2024-09-14 18:52:56 发布

code_ja

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量289

点赞数

分类专栏：性能文章标签： javascript 性能

本文链接：https://blog.csdn.net/code_ja/article/details/52164003

版权

性能专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了三种提高JavaScript代码性能的方法：减少全局变量的访问，避免不必要的属性查找，以及通过合并语句来优化代码。例如，创建局部变量来存储全局对象的引用，减少属性查找次数，以及将多次使用的变量赋值给局部变量。这些技巧能有效缩短作用域链搜索时间和减少对象属性查找，从而提升程序运行效率。

摘要由CSDN通过智能技术生成

注意作用域。
访问全局变量总是要比访问局部变量慢，因为需要遍历更长的作用域链。只要减少在作用域链的搜索时间，就可以增加性能。我们应该尽量避免全局查找，请看以下函数：

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

该函数包含了三次对全局document对象的引用。如果页面上有很多图片，那么for循环就要引用document无数次，每次都会要进行作用域链查找。
其实可以创建一个指向document对象的局部变量doc中，就可以通过一次全局查找改进这个函数的性能。

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

2.避免不必要的属性查找
对象上的任何属性查找都要比访问变量或者数组花费更长的时间，因为必须在原型链中对拥有该名称的属相进行一次搜索。属性查找越多，执行时间就越长。

var query = window.location.href.
substring(window.location.href.indexOf("?"));

这段代有6次属性查找，window.location.href.substring()有3次，window.location.href.indexOf()有3次，小数点有多少就有多少次。能看到window.location.href使用了2次，可以把这个存储在局部变量中：

var url = window.loction.href;
var query = url.substring(url.indexOf("?"));

3.最小化语句数
a.多个变量声明。

//4个语句——浪费
var count = 5;
var color = "red";
var values = [1,2,3];
var now = new Date();

//改进，一个语句
var count = 5,
    color = "red",
    values = [1,2,3],
    now = new Date();

b.插入迭代值

var name = values[i];
i++;

//改进
var name = values[i++];

c.使用数组和对象字面量

//用4个语句创建和初始化数组——浪费
var values = new Array();
values[0] = 123;
values[1] = 456;
values[3] = 789;

//用4个语句创建和初始化对象——浪费
var person = new Object();
person.name = "Jack";
person.age = 22;
person.sayName = function() {
    alert(this.name);
};

//改进上面代码,只用一条语句
var values = [123, 456, 789];
var person = {
    name: "Jack",
    age: 22,
    sayName: function() {
        alert(this.name);
    };
}