什么是交换html输出的最有效方法

Question

我正在用html5编写一个基于图形的应用程序，js＆amp; CSS3。此时它需要用户输入并创建一个数字数组，我打算用它来生成基于图形的结果。

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

所以这是我到目前为止所考虑的选项。

1. 在高级标记中放置一个id =“here”，并在我想生成结果时使用js重写整个内容。
2. 让我的html非常裸露的骨头＆amp;将两个显示的所有html结构放入js函数，从一个显示移动到下一个显示。
3. 使用iframe代码＆amp;基本上做同样的事情，为每个显示器使用单独的html文件

或????

我怀疑有一个简单的＆amp;优雅的答案。即使只是一个很好的搜索术语，也会很棒。

干杯

Answer 1

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

我建议您使用裸骨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中构建一个大元素然后将其添加到页面，那么您无需担心在追加结果结构之前/之后隐藏/显示容器。