javascript - 使用追加的 HTML 性能改进

Question

根据下面的代码，我想知道如果我稍后调用 desktopPopup html 脚本（假设我有很多正在执行的 html 代码），页面加载时间是否会发生重大变化，或者我是做错了吗？比较是使用下面的方法，反对在没有脚本的情况下编写整个 html 代码

 <script id="desktop" type="text/html">
        //some html in here
</script>

<script type="text/javascript">
  $(function() {
    $('body').one("click", function(e) {
      $("body").append($('#desktop').html());
    });
  });
</script>   

Answer 1

立即包含它会更快。在这种情况下，您的浏览器只需要构建 DOM 并渲染它。

在第二种情况下，您的浏览器必须：

• 下载并执行 jQuery（如果事先没有完成）
• 从 DOM 中选择元素，将 HTML 插入其中
• 重建 DOM 的一部分并渲染它