优化移动浏览器非常缓慢的 GWT 应用程序性能的技巧答案

【问题标题】：Tips for optimizing performance on a very sluggish GWT app for mobile browsers优化移动浏览器非常缓慢的 GWT 应用程序性能的技巧
【发布时间】：2010-10-11 21:47:46
【问题描述】：

他的，

也许你们中的一些人可以分享他们在 GWT 上进行移动开发的经验吗？

我们正在开发一个非常互动的网站，其中包含许多可点击的面板/按钮，但浏览器却非常缓慢。这是一个虚拟的禁止，导航到下一页有时需要一分钟以上。

这可能是架构的弱点：每个元素都是一个可能包含子视图的视图。每个视图都由来自服务器的 DTO 支持。也许这么深的对象图太多了，但我们正试图专注于优化视图渲染的效率，因为将所有内容拆分为组件的想法对我们来说非常重要:) 以下是我关心的一些问题，但可能有更多。

正如 2010 年 Google I/O 大会的视频所示，我尝试使用 UiBinder 构建小部件。但这并没有带来太多的速度提升。我们使用了很多面板——HTMLTable、HTMLPanel、VerticalPanel——因为承载其他视图的每个视图都应该以某种方式附加它们。用新的 CellList 替换它们会不会有好处，或者一个简单的 HorizontalPanel 已经足够轻量级了？
页面上的可点击小部件丢失。虽然一般建议是减少小部件，但我们确实需要它们来处理 onMouseDown 事件。什么是 CPU 密集度最低的可点击组件 - 带有 MouseDown 处理程序、按钮等的 VerticalPanel？
一旦用户单击按钮，就会发出一个 PRC 请求。我注意到，如果 PRC 调用停止一段时间，则单击按钮的样式呈现比单击按钮后立即进行 RPC 调用快得多。是否有一种模式可以指示如何触发不会干扰样式渲染的 RPC 调用。
分析报告（Firebug 和 Speedtracer）表明 setInnerHTML() 和 add() 调用占了大部分负载。 add() 应该在视图附加到它们的父级时调用，我不知道为什么 setInnerHTML 需要这么长时间（根据视频演示，它们应该非常快）。是否有一种合理的方法来优化 add() 调用？我真的想不出办法来做到这一点。

我感谢每一个建议。谢谢。

【问题讨论】：

标签： gwt mobile gwt-rpc

【解决方案1】：

根据您所说，add 和 setInnerHTML 被调用了很多。在我看来，您正在循环访问大量对象并将它们添加到 UI。如果是这种情况，您可以使用IncrementalCommand（GWT 2.1 中已弃用）或Scheduler.RepeatingCommand（GWT 2.1）让浏览器在添加大量元素时呼吸。

此外，如果您尝试以基于网格的格式显示信息，您是否查看过 GWT 2.1 中的新 Cell based wigets？

另一个有用的提示是尽量避免使用小部件。您提到您尝试使用 UiBinder，但收效甚微。但是您还在使用标签和面板进行布局吗？一个好的经验法则是遵循凯利诺顿在Measure in Milliseconds: Performance Tips for Google Web Toolkit 谈话中的“我可以有危险”图表（幻灯片 27）。他还链接到Widget inspector bookmarklet 以帮助您追踪多余的小部件使用情况。这个想法是您的大部分布局和标签都将使用标准 HTML 和 CSS 完成。

【讨论】：

是的，我知道新的基于 Cell 的小部件，但仍然不知道它们在什么情况下有用。我确实将一组对象附加到 HTMLPanels/HTMLTables。这些小部件，比如 CellList，是否比 HTMLPanel 更适合布局？
如果对象可以像这样表示：gwt.google.com/samples/Showcase/Showcase.html#!CwCellTable，那么基于单元的小部件可能比 HTMLTables 更适合。我认为基于 Cell 的小部件在构建时考虑到了显示大量数据，因此它们可能比标准小部件更有效地处理添加数据。