提示为移动浏览器

Question

他在一个非常缓慢的GWT应用优化性能，

也许可以一些你分享他们的GWT移动开发的经验？

我们正在开发一个漂亮的互动式网站，其中有许多可点击的面板/按钮，并且遇到巨大的浏览器迟缓问题。这是一个虚拟的不走，导航到下一页有时需要一分钟。

它可能是一个架构弱点：每个元素都是一个可能包含子视图的视图。并且每个视图都由来自服务器的DTO支持。也许这样的深层对象图太多了，但我们正在努力专注于优化视图渲染的效率，因为拆分组件中的所有东西的想法对我们来说是非常宝贵的:)以下是我关心的一些问题，但有可能更多。

• 由于从谷歌I/O 2010大会视频提示，我试图用UiBinder的构建部件。但是这并没有带来很大的速度提升。我们使用很多面板 - HTMLTable，HTMLPanel，VerticalPanel， - 因为承载其他视图的每个视图都应该以某种方式附加它们。可以用新的CellList替换它们是否有一些好处，或者是一个简单的Horizo​​ntalPanel已经足够轻量级了吗？

• 页面上可点击小部件丢失。虽然一般建议是削减小部件，但我们确实需要它们来处理onMouseDown事件。什么是最少的CPU密集型可点击组件 - 带有MouseDown处理程序的VerticalPanel，一个Button等？

• 一旦用户点击一个按钮，就会发出PRC请求。我注意到，如果PRC调用停止了一段时间，那么点击按钮的样式呈现比单击按钮之后立即进行RPC调用要快得多。是否有一种模式指示如何触发不会干扰样式呈现的RPC调用。

• 性能分析报告（Firebug和Speedtracer）表明setInnerHTML（）和add（）调用了大部分负载。当视图附加到他们的父母时应该调用add（），我不知道为什么setInnerHTML需要这么长时间（根据视频演示，他们应该非常快速）。有没有合理的方法来优化add（）调用？我真的想不出有办法做到这一点。

我欣赏每一个建议。谢谢。

Answer 1

从你所说的，add和setInnerHTML被称为很多。在我看来，你正在循环大量的对象并将它们添加到UI中。如果是这种情况，您可以使用IncrementalCommand（在GWT 2.1中弃用）或Scheduler.RepeatingCommand（GWT 2.1），让浏览器在您添加大量元素的同时呼吸。此外，如果您尝试以基于网格的格式显示信息，您是否看过GWT 2.1中的新Cell based wigets？

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