OOJS 相对于函数式 JavaScript 编程的性能

发布于 2024-10-11 09:29:32 字数 1547 浏览 1 评论 0原文

这个问题与这里的上一个问题相关:

减少对 JavaScript 对象方法的调用次数

分析这两个代码片段时

function ie6PNGFixLoader(scriptURL) {
    if(arguments.length > 0) {
        for (var i = 0; i < arguments.length; i++) {
            $.ajax({// load PNG fix scripts
                url: arguments[i],
                cache: true,
                dataType: 'script'
            });
        }
    } else {
        return false;
    }               
}

var pngFix = "/Global/ICIS/Scripts/DD_belatedPNG_0.0.8a-min.js";    
var pngList = "/Global/ICIS/Scripts/DD_PNG_listing.js"; 
ie6PNGFixLoader(pngFix, pngList);

当使用 Firebug: and

function InjectScriptsAndExecute(url) {
    this.url = url;
}

InjectScriptsAndExecute.prototype.InjectMethod = function() {
    var inject = $.ajax({
                        url: this.url,
                        cache: true,
                        dataType: 'script',
                        async: false, // Otherwise you cannot depend on the parse order
                        }); 
    return inject;  
}
var pngFix = new InjectScriptsAndExecute("/Global/ICIS/Scripts/DD_belatedPNG_0.0.8a-min.js");
var pngList = new InjectScriptsAndExecute("/Global/ICIS/Scripts/DD_PNG_listing.js");
pngFix.InjectMethod();
pngList.InjectMethod();

,发现后者对 InjectScriptsAndExecute 方法的调用比前者对其函数的调用要快得多。当我提到性能改进时,一位同事问我为什么,但我自己无法解释。

任何有助于更好理解的建议都将受到极大的欢迎。

This question relates to a previous question here:

Reducing number of calls to the methods of a JavaScript object

When profiling these two code snippets with Firebug:

function ie6PNGFixLoader(scriptURL) {
    if(arguments.length > 0) {
        for (var i = 0; i < arguments.length; i++) {
            $.ajax({// load PNG fix scripts
                url: arguments[i],
                cache: true,
                dataType: 'script'
            });
        }
    } else {
        return false;
    }               
}

var pngFix = "/Global/ICIS/Scripts/DD_belatedPNG_0.0.8a-min.js";    
var pngList = "/Global/ICIS/Scripts/DD_PNG_listing.js"; 
ie6PNGFixLoader(pngFix, pngList);

and

function InjectScriptsAndExecute(url) {
    this.url = url;
}

InjectScriptsAndExecute.prototype.InjectMethod = function() {
    var inject = $.ajax({
                        url: this.url,
                        cache: true,
                        dataType: 'script',
                        async: false, // Otherwise you cannot depend on the parse order
                        }); 
    return inject;  
}
var pngFix = new InjectScriptsAndExecute("/Global/ICIS/Scripts/DD_belatedPNG_0.0.8a-min.js");
var pngList = new InjectScriptsAndExecute("/Global/ICIS/Scripts/DD_PNG_listing.js");
pngFix.InjectMethod();
pngList.InjectMethod();

It appers that the latter's calls to the InjectScriptsAndExecute method are much faster than the former's calls to its function. A colleague has asked me why when i mentioned the performance improvement but i cannot explain it myself.

Any advice for better understanding would be greatfully received.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

花桑 2024-10-18 09:29:32

参数不是数组,而是一个行为类似于数组的对象

if(arguments.length > 0) { // Slow AND superfluous
    for (var i = 0; i < arguments.length; i++) { // Even SLOWER
        arguments[i]; // Holy...

缓存长度,访问属性很慢,IE6对.length根本没有任何优化,我什至怀疑使用时真的很慢>arguments[i] 因为它不是真正的Array,因此可能会进行未优化的属性查找。

如果您想两全其美,请传递一个普通的数组,使用简单的 for 循环,并缓存长度。

function ie6PNGFixLoader(scripts) {
    for (var i = 0, l = scripts.length; i < l; i++) {
        $.ajax({// load PNG fix scripts
            url: scripts[i],
            cache: true,
            dataType: 'script'
        });
    }              
}

ie6PNGFixLoader(["/Global/ICIS/Scripts/DD_belatedPNG_0.0.8a-min.js",
                 "/Global/ICIS/Scripts/DD_PNG_listing.js"]);

编辑

为了说清楚,对循环进行计时是没有用的,请求是异步的,您所做的只是对循环进行计时并调用 $.ajax 没有优化的意义在这里,特别是对于两个条目。即使在 IE6 中,执行 Ajax 调用本身(即使只是调用 $.ajax)也会比循环慢得多。

Arguments is not Array it's an Object that somewhat behaves like an array.

if(arguments.length > 0) { // Slow AND superfluous
    for (var i = 0; i < arguments.length; i++) { // Even SLOWER
        arguments[i]; // Holy...

Cache the length, accessing the property is slow, IE6 won't have no optimization at all for .length and I even suspect it to be really slow when using the arguments[i] since it is not a real Array and might therefore do an unoptimized property lookup.

If you want to get the best of both worlds, pass a normal Array, use a plain for loop, and cache the length.

function ie6PNGFixLoader(scripts) {
    for (var i = 0, l = scripts.length; i < l; i++) {
        $.ajax({// load PNG fix scripts
            url: scripts[i],
            cache: true,
            dataType: 'script'
        });
    }              
}

ie6PNGFixLoader(["/Global/ICIS/Scripts/DD_belatedPNG_0.0.8a-min.js",
                 "/Global/ICIS/Scripts/DD_PNG_listing.js"]);

EDIT

To make it clear, timing the loop is useless, the request is async, all you do is timing a loop and a call to $.ajax there's no point in optimizing here, especially not for two entries. Even in IE6, doing the Ajax call itself (even just calling $.ajax) will be way slower then the loop.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文