我们有一个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]，并重写函数提取查询字符串参数以从options参数中获取它们。但我想知道是否有任何工具可以帮助这个过程。如果有人做过像这样的转换，你有技巧吗？
答案 0 :(得分：1)
我看了你的代码......
if（cardDivs [seat] [suit] [i] .innerHTML ==“”）...
不要那样做。制作一个经典的布尔值JS数组来标记“空项目”。
通常，不要过多访问DOM。看来，你的整个“模型”（来自MVC术语）和应用程序状态都存储在DOM中。