这些脚本之间的效率有差异吗

Is there a difference in efficiency between these scripts?

本文关键字：效率 脚本 之间      更新时间：2023-09-26

理论案例。函数init ()可能并不总是在页面上调用。我想知道的是，从速度/效率的角度来看，这两个脚本之间是否存在差异？Class是单例的事实会对加载速度/处理量产生影响吗？

脚本1:

// Class is a singleton.
var Class =
{
    myFunctionOne : function ()
    {
    }
    myFunctionTwo: function ()
    {
    }
}
function init ()
{
    //Do some fancy stuff
    Class.myFunctionOne();
    Class.myFunctionTwo();
}

脚本2:

function Class ()
{
    this.myFunctionOne = function ()
    {
    }
    this.myFunctionTwo = function ()
    {
    }
}
function init ()
{
    var myClass = new Class();
    //Do some fancy stuff
    myClass.myFunctionOne();
    myClass.myFunctionTwo();
}

我会说是的，当init()是而不是在页面上被调用时，您的第二个脚本具有性能优势。原因如下。

在第一个例子中，每次加载页面时都会解析对象文字：

var Class =
{
    myFunctionOne : function () { ... }
}

将构建Class对象，每个键都设置为一个函数对象。无论这些"方法"是否被实际调用，都会产生这种开销（不过，某些JavaScript编译器可能会在此处实现优化，如"实时编译"，因此实际性能增益可能因浏览器而异）

在第二个例子中：

function Class ()
{
    this.myFunctionOne = function () { ... }
}

每次调用Class时，都会运行myFunctionOne行，在您的情况下，通过new运算符。该成本将在每次实例化Class时产生，而不是每次页面加载一次。然而，您已经声明这个类使用的是singleton模式，所以您无论如何都只有一个实例。

如果您担心初始页面加载/处理时间，为什么还要在页面上显示代码呢。动态加载JavaScript。

function init() {
    if(!document.getElementById("SingletonClass")) {
        var dynScript = document.createElement('script');
        dynScript.id = "SingletonClass";
        dynScript.type = "text/javascript";
        dynScript.src = "SingletonClass.js";
        document.getElementsByTagName('head')[0].appendChild(dynScript);
    }
}

或者简单地使用jQuery getScript函数。http://api.jquery.com/jQuery.getScript/

相关文章：