静的HTMLまたは動的HTMLを生成する|パフォーマンス

私は、どの方法がより速く、より良いのか、またその理由を知りたい。静的HTMLまたは動的HTMLを生成する|パフォーマンス

私はWebアプリケーションを持っています。私は「なし」と私は必要なビューに現在の1からstyle.displayを入れ、示さなければ

<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... -->

そして毎回、私はビューを必要とする：それはのようなHTMLタグをたくさん持っています封鎖する'。

私の質問は次のとおりです： 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からcompletly現在のものを削除し、新しいものを生成し、それを表示します。

パフォーマンス/可読性/コードの保守に適しているのはどちらですか？

私のコードで私はDOMをたくさん使っているからです。

出典

2016-12-29 Norair