本文介绍了为什么这段Javascript代码这么慢?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有这段 Javascript 代码，在 Internet Explorer 中每次调用大约需要 600 毫秒.在其他浏览器中花费的时间可以忽略不计.
I have this piece of Javascript code, which takes about 600 ms on every call in Internet Explorer. The time taken in other browsers is negligble.
var _nvs_currentTab;
var _nvs_zoomfield;
var _nvs_centerfield;
var _nvs_globsearch;
var _nvs_category;
var _nvs_favsonly;
var _nvs_wishonly;
var _nvs_friendfavsonly;
var _nvs_newitemsonly;
var _nvs_globsearchOld;
var _nvs_catOld;
var _nvs_favsonlyOld;
var _nvs_wishonlyOld;
var _nvs_friendFavsonlyOld;
var _nvs_newItemsOnlyOld;
function saveState()
{
if (!_nvs_currentTab)
{
var f = document.getElementById;
_nvs_currentTab = f('currentTab');
_nvs_zoomfield = f('zoomfield');
_nvs_centerfield = f('centerfield');
_nvs_globsearch = f("globsearch");
_nvs_category = f("category");
_nvs_favsonly = f("favsonly");
_nvs_wishonly = f("wishonly");
_nvs_friendfavsonly = f("friendfavsonly");
_nvs_newitemsonly = f("newitemsonly");
_nvs_globsearchOld = f("globsearchOld");
_nvs_catOld = f("categoryOld");
_nvs_favsonlyOld = f("favsonlyOld");
_nvs_wishonlyOld = f("wishonlyOld");
_nvs_friendFavsonlyOld = f("friendFavsonlyOld");
_nvs_newItemsOnlyOld = f("newItemsOnlyOld");
}
// get all state vars
var navState= new Object();
navState.page = currentPage;
navState.currentTab = _nvs_currentTab.value;
navState.zoomfield = _nvs_zoomfield.value;
navState.centerfield = _nvs_centerfield.value;
navState.globsearch = _nvs_globsearch.value;
navState.category = _nvs_category.value;
navState.favsonly = _nvs_favsonly.checked;
navState.wishonly = _nvs_wishonly.checked;
navState.friendfavsonly = _nvs_friendfavsonly.checked;
navState.newitemsonly = _nvs_newitemsonly.checked;
navState.globsearchOld = _nvs_globsearchOld.value;
navState.catOld = _nvs_catOld.value;
navState.favsonlyOld = _nvs_favsonlyOld.value;
navState.wishonlyOld = _nvs_wishonlyOld.value;
navState.friendFavsonlyOld = _nvs_friendFavsonlyOld.value;
navState.newItemsOnlyOld = _nvs_newItemsOnlyOld.value;
// build new url with state
var url = new StringBuffer();
url.append("#");
for (var i in navState)
{
if (i != "page")
url.append("&");
url.append(i).append("=").append(navState[i]);
}
// set it
window.location.href = url.toString();
}
这是调用树的样子，来自 IE8 分析器:
This is what the call tree looks like, from the IE8 profiler:
saveState 1 615,00 ms
f 15 1,00 ms
String.split 1 0,00 ms
Array 1 0,00 ms
Object 1 0,00 ms
StringBuffer 1 0,00 ms
append 64 0,00 ms
Array.push 64 0,00 ms
toString 1 0,00 ms
Array.join 1 0,00 ms
Object.valueOf 63 0,00 ms
Function.toString 63 0,00 ms
我正在使用的 StringBuffer 实现:
The StringBuffer implementation I'm using:
function StringBuffer() {
this.buffer = [];
}
StringBuffer.prototype.append = function append(string) {
this.buffer.push(string);
return this;
};
StringBuffer.prototype.toString = function toString() {
return this.buffer.join("");
};
更新代码，平均运行时间为 397 毫秒.
Updated code, takes 397 ms on average to run.
var _nvs_currentTab;
var _nvs_zoomfield;
var _nvs_centerfield;
var _nvs_globsearch;
var _nvs_category;
var _nvs_favsonly;
var _nvs_wishonly;
var _nvs_friendfavsonly;
var _nvs_newitemsonly;
var _nvs_globsearchOld;
var _nvs_catOld;
var _nvs_favsonlyOld;
var _nvs_wishonlyOld;
var _nvs_friendFavsonlyOld;
var _nvs_newItemsOnlyOld;
function saveState()
{
if (!_nvs_currentTab)
{
var _f = document.guideForm;
_nvs_currentTab = _f.currentTab;
_nvs_zoomfield = _f.zoomfield;
_nvs_centerfield = _f.centerfield;
_nvs_globsearch = _f.globsearch;
_nvs_category = _f.category;
_nvs_favsonly = _f.favsonly;
_nvs_wishonly = _f.wishonly;
_nvs_friendfavsonly = _f.friendfavsonly;
_nvs_newitemsonly = _f.newitemsonly;
_nvs_globsearchOld = _f.globsearchOld;
_nvs_catOld = _f.categoryOld;
_nvs_favsonlyOld = _f.favsonlyOld;
_nvs_wishonlyOld = _f.wishonlyOld;
_nvs_friendFavsonlyOld = _f.friendFavsonlyOld;
_nvs_newItemsOnlyOld = _f.newItemsOnlyOld;
}
// build new url with state
var url = new StringBuffer();
url.append("#");
url.append('currentPage=').append(currentPage);
url.append('¤tTab=').append(_nvs_currentTab.value);
url.append('&zoomfield=').append(_nvs_zoomfield.value);
url.append('¢erfield=').append(_nvs_centerfield.value);
url.append('&globsearch=').append(_nvs_globsearch.value);
url.append('&category=').append(_nvs_category.value);
url.append('&favsonly=').append(_nvs_favsonly.checked);
url.append('&wishonly=').append(_nvs_wishonly.checked);
url.append('&friendfavsonly=').append(_nvs_friendfavsonly.checked);
url.append('&newitemsonly=').append(_nvs_newitemsonly.checked);
url.append('&globsearchOld=').append(_nvs_globsearchOld.value);
url.append('&catOld=').append(_nvs_catOld.value);
url.append('&favsonlyOld=').append(_nvs_favsonlyOld.value);
url.append('&wishonlyOld=').append(_nvs_wishonlyOld.value);
url.append('&friendFavsonlyOld=').append(_nvs_friendFavsonlyOld.value);
url.append('&newItemsOnlyOld=').append(_nvs_newItemsOnlyOld.value);
// set it
window.location.href = url.toString();
}
推荐答案
好吧，你不会相信这一点的.我只是尝试删除以下行:
Okay, you're not going to believe this. I just tried removing the following line:
window.location.href = url.toString();
它将平均运行时间减少到三分之二毫秒.我从分析中知道 toString 调用非常快，所以显然设置 window.location.href 非常慢(几百毫秒！！！).呸，我讨厌 IE.
And it reduced the average runtime to two third of a millisecond. I know from profiling the toString call is very fast, so apparently setting the window.location.href is ultra slow (couple of hundred ms!!!). Bah, I hate IE.
注意:这是 Internet Explorer 的全新安装，我没有疯狂的工具栏拖慢浏览器的速度.
Note: This is a clean install of Internet Explorer, and I have no crazy toolbars slowing down my browser.
这篇关于为什么这段Javascript代码这么慢?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！