javascript - 使用 DOM 元素的 GWT 操作的性能价格真的很高吗？

Question

我想要了解我为 GWT 进行的 DOM 操作付出的性能代价。我想知道哪些操作是“昂贵的”，哪些不是，我该如何衡量它。我想知道如何分析这些操作，或者根本不值得关注这些问题。

更准确地说，这是我遇到的用例列表。

1) 用例#1:您有一个小部件，它会在某些事件发生时更改其外观。如果我删除旧的小部件并创建一个新的小部件，或者最好更改现有小部件的样式，会有什么不同吗？换句话说，在 GWT 应用程序中创建和插入新小部件的代价有多大？是否有任何类型的垃圾收集器用于删除的 DOM 元素？

2) 用例 #2:您需要从服务器端获取或保存一些数据。数据可能非常大。创建一个特殊的 Servlet 以非常简化的方式进行此操作是否有意义:只接受或打印一些字符串而不是对标准 GWT servlet 进行 RPC 调用？这是提高性能的好方法吗？您自己编写的 Servlet 可以非常简单。

3) 用例 #3:您有一个小部件，其中包含一长串其他小部件。您如何估计可以安全显示客户端性能的小部件数量？我的意思是，如果我们显示过去 5 年的 500 万条聊天消息，即使我们逐个加载项目，客户端的速度也可能会变慢，从而限制服务器端的压力。

4) 用例 #4:dom 操作的性能价格如何，例如找出某个容器内的元素数量，或找出元素的样式？例如，您需要统计一次聊天中的消息数。这种对聊天容器的 DOM 子项进行计数的操作是否非常昂贵，以至于最好实现单独的计数器并在新消息到达时增加它(就像 Java 集合一样)？

Answer 1

用例 #1: 始终建议更新样式而不是删除/添加小部件。更新样式意味着 CSS 解析/重新计算/绘画。删除/添加小部件将导致 DOM 和 CSS 解析/重新计算/绘制。

用例 #2: 这实际上取决于您的操作。 GWT 带有三种类型的服务器端通信。它们中的每一个都适用于不同的用例 - 阅读 here .

a) RPC - Remote Procedure calls
b) RF - Request Factory & Entities
c) Request Builder with self-written Servlet serving up Strings,JSON or Autobean.

用例 #3: 您有 GWT Cell Widgets以最少的 DOM 操作显示大数据。如果显示聊天消息是一项要求，请在滚动时使用 AutoPager 尝试使用 CellList，并可能将其放入异步数据提供程序中。

用例 #4: 您应该使用 Java Pojo 支持的 Cell Widget。每条聊天消息都是 Java Pojo“ChatMessage”的一个实例，根据您的 RPC 调用，您可以获取一个 List 并将其提供给 CellList/CellTable。当您可以仅通过 List 上的一个 sizeOf 操作来计算“数据”时，为什么还要计算 dom。

您在错误的方向上超前思考项目。如果您的编程方法错误，DOM 操作是一个问题。通过下载 GWT Files 查看 GWT 示例并通过导入到 Eclipse 来执行它们。

性能调优是 GWT 最强大的功能。如果有足够的经验，您可以使用 SpeedTracer、日志记录、Chrome 开发工具分析、GWT 轻量级指标、代码拆分、GWT 编译器指标、GWT Closure 编译器、资源捆绑来调整 GWT 中的任何性能问题，等等。 ..