在加载 div 内容时使用 ajax 的优点/缺点

Question

我需要更好地了解web development，尤其是CSS 的工作原理。我已经做了大约 2 年的 Web 开发，我认为现在是我学习如何优化我的网站性能的时候了。我想问的事情很少。

第一：

每当我的页面上有选项卡式内容时，我总是使用以下内容：

<div class="tab-container">
    <div class="tab active" id="first"></div>
    <div class="tab" id="second"></div>
</div>

没有active 类的div 将是hidden (display:none)。我注意到当我加载页面并进入 chrome 上的开发人员工具时，second 选项卡实际上已加载并且代码显示在那里。如果second中有很多内容，比如视频、图片等。即使我不打开second标签，是否会影响页面的性能(time to load, etc..)？

秒

目前我正在使用Jquery 和ajax 在tab-menu click 上加载div content。

//some jquery funtion
...
$.ajax({
    url: "second-content.php",
    //etc...
});

我在different files 中为每个content (first and second) 编写了代码，并与main file 分开。结果，我只加载了我想看到的tab content。这意味着当我加载页面时，只会加载 first 的内容，而 second's code 不会显示在开发工具中。当我想转到第二个选项卡时，第一个选项卡内容将被销毁(using jquery .empty() function) 并使用ajax，将加载second 内容。我设法使它工作。但是，到目前为止，老实说，我不知道这是一个好的实现还是其他。有人可以解释一下这个实现的优点/缺点吗？

英语不是我的主要语言，所以，我希望你们能理解我在这里想说的话。我确实需要一些建议。

Answer 1

我认为你在正确的轨道上，但如果可能的话，不要在加载第二个标签时破坏第一个标签的内容。如果选项卡内容不可见以提高页面性能，您不希望在初始页面加载时加载第二个选项卡。更少的字节和更少的 HTTP 请求意味着页面将下载得更快。当用户决定单击第二个选项卡时，将数据加载给当时的用户。如果您想开始更加考虑性能，那么您还需要缓存第二个选项卡中的内容，这样如果它们反复来回切换，它就不会为您的内容添加额外的服务器调用，这有助于服务器表现。