這是一個真實的客戶頁面，來自於深圳市的某自動化公司，頁面大概是這個樣子的：
這個頁面很長，包含 3 個復雜的表單和 5 個表格，如果看下頁面上控件的個數，也是蠻壯觀的：
var itemNames = [], itemCount = 0; $.each(F.ui, function(name, item) { itemNames.push(name); itemCount++; }); console.log(itemNames.join(',')); console.log('控件總數：' + itemCount);
足足有 300 多個控件，這個頁面的加載倒是很快，基本上在 1秒之內可以搞定。
相關測試代碼：
<head id="Head1" runat="server"> <title></title> <link href="../res/css/main.css" rel="stylesheet" type="text/css" /> <script> var _startTime = new Date(); </script> </head>
在頁面的最底部：
</script>
F.ready(function () {
F.notify('耗時：' + ((new Date() - _startTime) / 1000).toFixed(2) + ' 秒');
});
</script>
頁面第一次加載的截圖：
但是令人頭疼的是，
點擊【查看歷史版本】時，頁面回發需要 6 秒之久。
相關測試代碼
<f:Button ID="btnLookUpHisRev" runat="server" Text="查看歷史版本" Icon="ApplicationOsxCascade" OnClick="btnLookUpHisRev_Click"
OnClientClick="onbtnLookUpHisRevClick()"></f:Button>
</script>
function onbtnLookUpHisRevClick() {
_startAjaxTime = new Date();
}
F.ajaxReady(function () {
F.notify('AJAX耗時：' + ((new Date() - _startAjaxTime) / 1000).toFixed(2) + ' 秒');
});
</script>
這也太讓人抓狂了！
為什么會出現這個問題，到底回發時發生了什么? 分析下返回的數據：
我們發現，這里面不僅對 5 個表格重新進行了數據綁定，而且對多個按鈕進行了顯示隱藏操作。
因為FineUI中的布局是嵌套，所以內部元素的改變可能會影響到外部元素的位置和大小。
比如在 VBox 布局中調整某個子項的高度，那么其他子項的高度可能也會變化！因此改變某個子項的高度時，我們要對最外層的控件進行布局操作！
而布局是很耗時的，因此這對 5 個表格的數據綁定，以及多個按鈕的顯示隱藏操作，可能會導致 10 次左右的重新布局，這是很恐怖的。
有沒有解決辦法呢？
FineUIPro v5.3.0會對此進行優化，延遲執行回發腳本調用中的布局操作，而是等到全部回發腳本執行完畢之后，再進行布局，由此可以避免不必要的重復布局操作！
效果也是立竿見影的，在案例一行代碼不改的情況下，將FineUIPro版本替換為 v5.3.0，看下回發時間：
原來的回發需要 6 秒，現在升級到 FineUIPro v5.3.0，回發時間立刻變為 0.6 秒。這個過程只是替換了FineUIPro.dll，而沒有修改案例的一行代碼。
注：
- FineUIPro v5.3.0 尚未發布，計划於 2018-11-13 發布，敬請期待！
- 如果你在回發時只進行了少量操作，不會遇到本文提到的性能問題。
- 本案例只是極端情況，在你的項目中替換 FineUIPro v5.3.0 可能不會有如此大的性能改變。