頁面回發速度由 6 秒減小爲 0.6 秒的真實案例！

時間 2019-11-12

標籤頁面速度減小 0.6 真實案例简体版

原文原文鏈接

這是一個真實的客戶頁面，來自於深圳市的某自動化公司，頁面大概是這個樣子的：css

這個頁面很長，包含 3 個複雜的表單和 5 個表格，若是看下頁面上控件的個數，也是蠻壯觀的：ajax

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 秒之久。ui

相關測試代碼spa

<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>

這也太讓人抓狂了！code

爲何會出現這個問題，到底回發時發生了什麼? 分析下返回的數據：server

咱們發現，這裏面不只對 5 個表格從新進行了數據綁定，並且對多個按鈕進行了顯示隱藏操做。

由於FineUI中的佈局是嵌套，因此內部元素的改變可能會影響到外部元素的位置和大小。

好比在 VBox 佈局中調整某個子項的高度，那麼其餘子項的高度可能也會變化！所以改變某個子項的高度時，咱們要對最外層的控件進行佈局操做！

而佈局是很耗時的，所以這對 5 個表格的數據綁定，以及多個按鈕的顯示隱藏操做，可能會致使 10 次左右的從新佈局，這是很恐怖的。