静态HTML或生成动态HTML |性能

Question

我想知道哪种方法更快/更好，为什么。

我有一个Web应用程序。它有很多HTML标签，如：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

每当我需要显示视图时，我将style.display从当前的一个放到“没有”＃39;以及我需要阻止的视图＃39;

现在我的问题是： 在javascript中生成div-block会更好吗？ 喜欢：

＆＃13;

＆＃13;

    // 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);

＆＃13;

＆＃13;

＆＃13;

如果我需要另一个视图，我将从DOM中删除当前的一个视图并生成新视图并显示它。

哪一个更适合性能/可读性/代码维护？

因为在我的代码中我使用DOM做了很多。

Answer 1

您始终可以使用https://jsperf.com来检查DOM操作性能。

对于您的情况，性能测量显示添加/删除元素比在Chrome中显示/隐藏更快。

您可以在不同的浏览器中重新运行此测试以测量操作并根据浏览器类型创建不同的流程，以便始终使用更好的替代方案。

https://jsperf.com/show-hide-or-add-removes