Question

我需要在web development中更好地理解，尤其是CSS的工作方式。我现在已经进行了大约2年的网络开发，现在我认为现在是时候了解如何优化我网站的性能了。我想问几件事。

第一

每当我的页面上有标签内容时，我总是使用以下内容：

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

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

第二

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

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

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

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

Answer 1

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

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

1 个答案: