UpdatePanel於IE中呈現資料異常緩慢
症狀說明
日前維護一個案子，客戶突然發現在搜尋資料時回應速度異常的緩慢。起初懷疑DB效能不佳所造成的，所以直接查看該功能SQL語法並實際於SSMS中測試，結果發現查詢回應速度很快。再來就開始懷疑是否是網路速度所造成的問題，所以立馬透過IE的開發者工具了解一下Response的時間，發現速度也是飛快地就反應了。所以想必問題就是發生在資料呈現過程中了。
排除歷程
首先整理一下可疑的線索 :
1. 利用Update Panel來執行非同步的作業
2. 只有在IE中才會發生這個問題 (非常可疑)
3. 慢慢慢... 非常慢
就在恭請Google大神的指導後發現以下文章
Fix: UpdatePanel Async Postbacks Slow in Internet Explorer
原來是PageRequestManager的_destroyTree方法在IE的環境下，對於比較大的DOM tree處理的效能很差。為了呼應這個原因，我立馬回頭找找到底哪裡有大的DOM tree在我的頁面上。果不其然原來是我的分頁下拉式選單，因為這功能的資料相當龐大，所以分頁的數量高達數百頁以上，這下真相大白了，也可以安心地服用微軟所提供的解決方式了。
解決方式
於</Body>前加上以下的java script方法即可
<script language="javascript" type="text/javascript">
function disposeTree(sender, args) {
var elements = args.get_panelsUpdating();
for (var i = elements.length - 1; i >= 0; i--) {
var element = elements[i];
var allnodes = element.getElementsByTagName('*'),
length = allnodes.length;
var nodes = new Array(length)
for (var k = 0; k < length; k++) {
nodes[k] = allnodes[k];
}
for (var j = 0, l = nodes.length; j < l; j++) {
var node = nodes[j];
if (node.nodeType === 1) {
if (node.dispose && typeof (node.dispose) === "function") {
node.dispose();
}
else if (node.control && typeof (node.control.dispose) === "function") {
node.control.dispose();
}
var behaviors = node._behaviors;
if (behaviors) {
behaviors = Array.apply(null, behaviors);
for (var k = behaviors.length - 1; k >= 0; k--) {
behaviors[k].dispose();
}
}
}
}
element.innerHTML = "";
}
}
Sys.WebForms.PageRequestManager.getInstance().add_pageLoading(disposeTree);
</script>希望此篇文章可以幫助到需要的人
若內容有誤或有其他建議請不吝留言給筆者喔 !
