最近在項目中使用了easyui框架,然而卻發現在序列化json時效率極低,導致頁面加載速度變得極慢。
在查閱相關資料后,發現easyui在序列化json時會逐個遍歷頁面元素,將元素的各種屬性都進行序列化,而且還會進行遞歸遍歷。這導致了序列化時間的大幅增加。
function toJSONString(form) {
var obj = {};
var elements = form.querySelectorAll("input, select, textarea");
for(var i = 0; i< elements.length; ++i) {
var element = elements[i];
var name = element.name;
var value = element.value;
if(name) {
obj[name] = value;
}
}
return JSON.stringify(obj);
}
以上是一個示例的easyui序列化json的代碼,可以看到它對每個元素都進行了循環遍歷,隨著頁面元素的增多,這種遍歷方式必然效率極低。同時還有遞歸遍歷的問題,它會一層一層地進行遍歷,極大地浪費了時間。
為了提高easyui序列化json的效率,我們可以采用更高效的方法,如使用jQuery提供的serializeArray方法,可以將表單數據序列化為一個數組,然后用JSON.stringify方法將其轉換為json字符串。
function toJSONString(form) {
var array = $(form).serializeArray();
var obj = {};
for(var i = 0; i< array.length; i++) {
obj[array[i].name] = array[i].value;
}
return JSON.stringify(obj);
}
以上代碼使用了jQuery的serializeArray方法,只對表單數據進行了簡單的循環遍歷,避免了遞歸遍歷的問題。同時也減少了多余的屬性序列化,提高了序列化json的效率。
經過嘗試,這種方法的效果明顯,easyui序列化json的速度得到了很大的提升。