ASP.Net Webforms w/AJAX慢呈現

Question

我有一個Webforms，AJAX功能的網頁，當呈現大量數據時，在IE中加載速度非常緩慢（我們已經結婚了IE瀏覽器 - 沒有其他瀏覽器選項）。爲了確定緩慢的來源，我查看了HTML源代碼（大約2.5 MB），並將其全部（Ajax JavaScript調用除外）複製到空白的.html文件中。 IE通過.Net渲染這個文件的速度要快得多。這似乎表明，AJAX JavaScript正在減慢頁面的顯示速度。這聽起來似乎合理嗎？任何關於改善表現的建議？

我已經從頁面中消除了儘可能多的UpdatePanel控件，但它似乎沒有幫助渲染時間。

感謝您的幫助！

更新...在HTML源代碼中，我注意到在屏幕的底部顯示了對WebForm_InitCallback（）的調用。當我通過javascript：alert（WebForm_InitCallback（））直接執行此調用時，CPU在完成之前尖峯12秒！這個調用在這裏是因爲我實現了ICallbackEventHandler來嘗試完成一些傳統風格的AJAX處理。看一下WebResource.axd，WebForm_InitCallback（）方法遍歷整個表單，並將某些事件附加到每個單獨的文本框，複選框，單選按鈕等等。所以我想我真的需要在這裏放棄ScriptManager和UpdatePanel。船尾。

Andy

Answer 1

我討厭這麼說，但您能否將Microsoft AJAX排除在外？嘗試使用XMLHTTP請求並自行填充數據。這樣，至少您可以逐步瀏覽js，並確定是否到了服務器上的時間，將結果XML或JSON轉換爲對象，或將時間花費在屏幕上。

Answer 2

這是一個老話題，但我想我應該分享一下我最近做了什麼來修復由WebForm_InitCallback引起的IE 7中長時間運行的腳本錯誤。

我有一個包含超過2000個表單元素的頁面，並且在IE 7中導致長時間運行的腳本警告/瀏覽器凍結客戶端。我們有其他頁面有更多的表單元素，並且由於需要快速轉向以提高性能，分頁或其他選項不是選項。

我把範圍縮小到WebForm_InitCallback，甚至進一步向下面一行：

element = theForm.elements[i]; 

通過保存到theForm.elements一個參考，而不是使用它來訪問索引，我發現顯著的性能提升。

var elements = theForm.elements; 
for (var i = 0; i < count; i++) { 
    element = elements[i]; 
    .... 
} 

我做了一個jsperf來測試，因爲我沒想到每次都從沒有要求細化如此驕人的收益差異。

除此之外，通過替換WebForm_InitCallbackAddField中的連接，將字符串添加到數組並在WebForm_InitCallback中的for循環完成並將其保存回__theFormPostData後，將它們連接在一起，從而找到了更好的性能。

這裏是原來的兩個功能，你會在WebResource看到：

function WebForm_InitCallback() { 
    var count = theForm.elements.length; 
    var element; 
    for (var i = 0; i < count; i++) { 
     element = theForm.elements[i]; 
     var tagName = element.tagName.toLowerCase(); 
     if (tagName == "input") { 
      var type = element.type; 
      if ((__callbackTextTypes.test(type) || ((type == "checkbox" || type == "radio") && element.checked)) 
       && (element.id != "__EVENTVALIDATION")) { 
       WebForm_InitCallbackAddField(element.name, element.value); 
      } 
     } 
     else if (tagName == "select") { 
      var selectCount = element.options.length; 
      for (var j = 0; j < selectCount; j++) { 
       var selectChild = element.options[j]; 
       if (selectChild.selected == true) { 
        WebForm_InitCallbackAddField(element.name, element.value); 
       } 
      } 
     } 
     else if (tagName == "textarea") { 
      WebForm_InitCallbackAddField(element.name, element.value); 
     } 
    } 
} 
function WebForm_InitCallbackAddField(name, value) { 
    var nameValue = new Object(); 
    nameValue.name = name; 
    nameValue.value = value; 
    __theFormPostCollection[__theFormPostCollection.length] = nameValue; 
    __theFormPostData += WebForm_EncodeCallback(name) + "=" + WebForm_EncodeCallback(value) + "&"; 
} 

這裏是我加入到我的網頁，以覆蓋它們的JavaScript。在添加WebResource之後並在調用WebForm_InitCallback之前插入此代碼很重要。

var __theFormPostDataArr = []; 
if (typeof (WebForm_InitCallback) != "undefined") { 
    WebForm_InitCallback = function() { 
     var count = theForm.elements.length; 
     var element; 
     var elements = theForm.elements; 
     for (var i = 0; i < count; i++) { 
      element = elements[i]; 
      var tagName = element.tagName.toLowerCase(); 
      if (tagName == "input") { 
       var type = element.type; 
       if ((type == "text" || type == "hidden" || type == "password" || 
        ((type == "checkbox" || type == "radio") && element.checked)) && 
        (element.id != "__EVENTVALIDATION")) { 
        WebForm_InitCallbackAddField(element.name, element.value); 
       } 
      } 
      else if (tagName == "select") { 
       var selectCount = element.options.length; 
       for (var j = 0; j < selectCount; j++) { 
        var selectChild = element.options[j]; 
        if (selectChild.selected == true) { 
         WebForm_InitCallbackAddField(element.name, element.value); 
        } 
       } 
      } 
      else if (tagName == "textarea") { 
       WebForm_InitCallbackAddField(element.name, element.value); 
      } 
     } 
     __theFormPostData = __theFormPostDataArr.join(''); 
    } 
    WebForm_InitCallbackAddField = function (name, value) { 
     __theFormPostDataArr = []; 
     var nameValue = new Object(); 
     nameValue.name = name; 
     nameValue.value = value; 
     __theFormPostCollection[__theFormPostCollection.length] = nameValue; 
     __theFormPostDataArr[__theFormPostDataArr.length] = WebForm_EncodeCallback(name); 
     __theFormPostDataArr[__theFormPostDataArr.length] = "="; 
     __theFormPostDataArr[__theFormPostDataArr.length] = WebForm_EncodeCallback(value); 
     __theFormPostDataArr[__theFormPostDataArr.length] = "&"; 
    } 
} 

最終，我的IE 7機器上運行WebForm_InitCallback的時間從27秒到4秒。