jquery - 使用ajax加载div内容的优点/缺点

Question

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

首先:

每当我的页面上有标签内容时，我总是使用类似的东西:

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

没有 active 类的 div 将被隐藏 (display:none)。我注意到当我加载页面并进入 chrome 上的开发人员工具时，second 选项卡实际上已加载并且代码显示在那里。如果在 second 我有很多内容，如视频、图片等。它会影响页面的性能 (加载时间等。) 甚至如果我不打开 second 选项卡？

第二个

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

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

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

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

Answer 1

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