OOJS 相对于函数式 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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
参数不是
数组
,而是一个行为类似于数组的对象
。缓存长度,访问属性很慢,IE6对
.length
根本没有任何优化,我什至怀疑使用时真的很慢>arguments[i]
因为它不是真正的Array
,因此可能会进行未优化的属性查找。如果您想两全其美,请传递一个普通的数组,使用简单的 for 循环,并
缓存
长度。编辑
为了说清楚,对循环进行计时是没有用的,请求是异步的,您所做的只是对循环进行计时并调用
$.ajax
没有优化的意义在这里,特别是对于两个条目。即使在 IE6 中,执行 Ajax 调用本身(即使只是调用$.ajax
)也会比循环慢得多。Arguments is not
Array
it's anObject
that somewhat behaves like an array.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 thearguments[i]
since it is not a realArray
and might therefore do an unoptimized property lookup.If you want to get the best of both worlds, pass a normal
Array
, use a plainfor
loop, andcache
thelength
.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.