0

我们有一个 8,300 行的 Javascript 应用程序，它实现了桥牌的交互式图表。它目前编写了大约 250 个顶级变量、250 个函数、大约 130 行函数外的驱动程序代码，以及在各个地方引用的 30 个硬编码元素 ID；它是完全独立的，不使用任何库。它从 URL 查询字符串中获取其参数。所以我们在网页上使用它的方式是在 iframe 中加载它。

这实现为 3 个文件：

  • handviewer.html- 这是我们在 iframe 中指向的页面。它包含大约 70 行 HTML 以及所有必需的 DIV，并加载 CSS 和 JS（handviewer-old.html在下面的测试中调用）
  • hvstyles.css- 页面的 CSS
  • handviewer.js- 上面描述的Javascript代码

在handviewer.html中，活动元素具有onclick调用函数的内联属性handviewer.js。

问题是，当我们在页面上嵌入大量这些内容时，性能会受到影响。iframe 一开始就很痛苦，而且很多都指向同一个服务器会遇到连接限制。即使它们都指向同一个脚本，查询字符串中的参数也充当缓存破坏者。使用相当快的浏览器加载包含 12 个此类图表的页面需要 3-5 秒。查看时间线，您可以看到负载是交错的。所以我想将它转换为可以应用于 DIV 的小部件，参数作为内联参数。

包含这 12 个 iframe 的测试页面位于：

http://dev.bridgebase.com/barmar_test/many-hv-old.html

我正准备手动执行此操作——我将围绕整个事物包装一个函数，将 ID 替换为类，从而document.getElementById(x)变为theDiv.getElementsByClass(x)[0]，并重写提取查询字符串参数以从选项参数中获取它们的函数。但我想知道是否有任何工具可以帮助这个过程。如果有人做过这样的转换，你有帮助的技巧吗？

4

1 回答 1

1

我看了你的代码...

if(cardDivs[seat][suit][i].innerHTML=="") ...

不要那样做。制作一个经典的 JS 布尔数组来标记“空项目”。

通常，不要过多地访问 DOM。看来，您的整个“模型”（来自 MVC 术语）和应用程序状态都存储在 DOM 中。

于 2013-05-02T19:02:35.653 回答