什麼是交換html輸出最有效的方法

我正在寫一個基於圖形的應用程序在html5中，js & css3。此時，它會接受用戶輸入並創建一組數字，我打算使用這些數字來生成基於圖形的結果。什麼是交換html輸出最有效的方法

在現有頁面上顯示結果的最有效方式是什麼？這可能聽起來有點模糊，我不確定如何解釋這個問題。這在搜索答案時顯然沒有幫助。

所以這裏是我到目前爲止考慮過的選項。

在高級標記中放置id =「here」，並在我想要生成結果時使用js重寫整個內容。
讓我的html非常光禿禿的骨頭&把這兩個顯示器的所有html結構都放到了js函數中，從而實現了從一個顯示器移動到另一個顯示器。
使用iframe標籤&基本上做的一樣，使用單獨的HTML文件爲每個顯示

或????

我懷疑有一個簡單的&優雅的答案。即使只是一個很好的搜索條件，會很好。

乾杯

來源

2012-12-01 Matt Stevens

肯定聽起來像你應該看看模板。我使用[handlebars]（http://handlebarsjs.com/）。 – RichardTowers

從我這個問題的認識，要建立將被顯示給用戶的元素的一些動態的號碼，你想要做的，保持性能提升的一種方式。

我建議你去擁有裸骨HTML和動態建立你的動態顯示使用JavaScript函數。

通過確保您動態構建的元素的容器將其顯示設置爲無，您可以顯着提高性能，這將防止瀏覽器在插入每個元素後重繪元素。

編輯：

我的意思了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-01 11:06:06

是的，你已經總結了我以後使用js函數是我的直覺，ta。 –

嗯，我是新手，在撰寫回復時不要回復！你可以添加一點你的評論設置顯示字段爲無。我的目的是在所有元素被添加後才繪製整個顯示，實際上在一次擊中時交換下一個顯示。 –

:)謝謝Zeb，那裏有足夠的信息讓我去google的細節，我會用這個練習來進入jquery。非常感謝。 –

什麼是交換html輸出最有效的方法

回答

相關問題