0

我正在用 html5、js 和 css3 编写一个基于图形的应用程序。此时，它接受用户输入并创建一个数字数组，我打算用它来生成基于图形的结果。

在现有页面上显示结果的最有效方法是什么？这可能听起来有点模糊，我不确定如何表达这个问题。这在寻找答案时显然无济于事。

所以这是我迄今为止考虑过的选项。

  1. 在高级标签中放置一个 id="here" 并在我想要生成结果时使用 js 重写整个内容。
  2. 让我的 html 变得非常简单，并将两个显示器的所有 html 构造都放入 js 函数中，从而能够从一个显示器移动到下一个显示器。
  3. 使用 iframe 标记 & 基本上做同样的事情，为每个显示使用单独的 html 文件

或者 ？？？？

我怀疑对此有一个简单而优雅的答案。即使只是一个好的搜索词，也会很棒。

干杯

4

1 回答 1

0

根据我对问题的理解，您想要构建一些动态数量的元素，这些元素将显示给用户，并且您希望以一种保持性能的方式来实现。

我建议您使用简单的 html 并使用 javascript 函数动态构建动态显示。

您可以通过确保您正在动态构建的元素的容器将其显示设置为 none 来显着提高性能，这将防止浏览器在您插入每个元素后重绘元素。

编辑：

我的意思是，display:none如果您要像这样构建您的显示器：

HTML：

<p>Your results:</p>
<div id="divResults">
</div>

Javascript（假设 jQuery）：

var divResults = $('#divResults');
function BuildResults(arr) {
   divResults.children().remove();
   var i = arr.length;
   while (i--) {
      var spnResult = $('<span class="result">');
      divResults.append(spnResult);
   }
}

每次调用divResults.append(spnResult);浏览器都会重绘页面上的元素，这在规模上可能会影响性能。解决方案是divResults在清空/附加元素之前隐藏，并在重建结果后最终显示。

但是，如果您采用在 javascript 中构建大元素然后将其附加到页面的方法，则无需担心在附加结果结构之前/之后隐藏/显示容器。

于 2012-12-01T11:06:06.800 回答