使用append进行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的一部分并将其渲染