靜態HTML或生成動態HTML |性能

我有一個Web應用程序。它有大量的HTML標籤的，如：

<div id="info-view"> 
 
    <h3 class="h3-title">Info</h3> 
 
    <div class="card"> 
 
    <h4>Version</h4> 
 
    <div class="version"> 
 
     <p class="list-item">APP Version: <span id="app-vr"></span> 
 
     ...so on 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div id="import-view"> 
 
    <h3 class="h3-title">Import</h3> 
 
    <div class="card"> 
 
    <h4>Import List</h4> 
 
    <div id="import-container"> 
 
     <div class="import-data"> 
 
     <p class="import-name">Data bla blabla</p> 
 
     </div> 
 
     <div class="import-data"> 
 
     ... 
 
     </div> 
 
     ... 
 
    </div> 
 
    </div> 
 
</div> 
 

 

 
<!-- And lot of other View container like these...online-view...setting-view... -->

每次我需要一個視圖中顯示，我把的style.display從當前爲「無」，我需要的視圖'阻止'。

現在我的問題是：在javascript中生成div塊會更好嗎？像：

// remove the current content from the DOM 
 
    while(document.body.firstChild) { 
 
     document.body.firstChild.remove(); 
 
    } 
 
    // generate the new content 
 
    var infoView = document.createElement("div"); 
 
    infoView.id = "info-view"; 
 

 
    var title = document.createElement("h3"); 
 
    title.classList.add("he-title"); 
 
    title.textContent = "Info"; 
 
    ... 
 
    // add it to the DOM 
 
    document.body.appendChild(infoView);

如果我需要另一種觀點認爲我只是從DOM中刪除當前一個完全地並生成新的，並顯示它。

哪一個更適合性能/可讀性/代碼維護？

因爲在我的代碼中，我做了很多與DOM。

來源

2016-12-29 Norair