javascript - 静态 HTML 或生成动态 HTML |表现

Question

关闭。这个问题是 opinion-based 。目前不接受答案。

---

想要改进这个问题吗？更新问题，以便 editing this post 可以用事实和引文来回答它。 .

已关闭 6 年前。

Improve this question

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

我有一个网络应用程序。它有很多 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... -->

每次我需要显示一个 View 时，我都会将当前 View 中的 style.display 设置为“无”，并将需要“阻止”的 View 。

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

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

如果我需要另一个 View ，我只需从 DOM 中完全删除当前 View 并生成新 View 并显示它。

哪一个在性能/可读性/代码维护方面更好？

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

Answer 1

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

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

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

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