页面回发速度由 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秒以内能够搞定。布局

可是使人头疼的是，

点击【查看历史版本】时，页面回发须要 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 次左右的从新布局，这是很恐怖的。

有没有解决办法呢？

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 可能不会有如此大的性能改变。