页面回发速度由 6 秒减少为 0.6 秒的真实案例!
2018-10-22 09:57
344 查看
这是一个真实的客户页面,来自于深圳市的某自动化公司,页面大概是这个样子的:
这个页面很长,包含 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 可能不会有如此大的性能改变。
相关文章推荐
- 一个真实的案例:Loadrunner测试估算某视频播放网站的PV数(页面浏览量)
- 在不影响页面内容的情况下来减少站点的页面输出量、增加页面的访问速度。
- 如何减轻图片服务器的IO,提高页面显示速度,减少客户端Receive
- 减少HTTP请求来加快页面响应速度的三种做法,CSS Sprites|内联图片|合并脚本和CSS
- 无刷新“页面跳转” Page,你是怎样处理回发事件的? 深入理解 __doPostBack
- wordpress优化第一招 压缩css和js减少流量提高博客速度(尤其适用SAE)
- [PHP]进阶教程:服务器端嵌入(SSI)实现多个页面之间的引用与简单案例
- 深入体验JavaWeb开发内幕——使用简单标签控制页面逻辑案例
- web开发的性能准则(减少页面加载时间方面)
- [网络收集]回发或回调参数无效。在配置中使用 <pages enableEventValidation="true"/> 或在页面中使用 <%@ Page EnableEventValidation="true" %> 启用了事件验证
- FreeMarker 真实案例应用
- 页面优化——减少HTTP请求数
- 25种优化页面加载速度
- Windows Azure真实案例:微软IT-将拍卖工具搬移至云端,方便雇员捐赠
- OOA&D实践之路——真实案例解析OO理论与实践(六、迭代式开发与用例驱动)
- Google正式上线:页面速度影响移动搜索排名
- 【JQuery】优化页面性能的代码技术整理(提高网页响应速度必看)
- 一个真实案例看懂 P2P供应链金融的玩法
- 天猫查询页面商品信息抓取案例
- android如何提高加载布局页面速度