我需要更好地了解 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
,第二个
内容将被加载。我设法使它起作用。但是,到目前为止,老实说,我不知道它是否是一个好的实现或其他。有人可以解释一下这个实现的优点/缺点吗?
英语不是我的主要语言,所以,我希望你们能理解我在这里想说的话。我确实需要一些建议。
最佳答案
我认为您走在正确的轨道上,但如果可能,请不要在加载第二个选项卡时破坏第一个选项卡的内容。如果选项卡内容不可见以提高页面性能,您不希望在初始页面加载时加载第二个选项卡。更少的字节和更少的 HTTP 请求意味着页面下载速度更快。当用户决定点击第二个选项卡时,加载数据给用户。如果您想开始更加考虑性能,那么您还需要缓存第二个选项卡中的内容,这样如果它们反复来回切换,它不会为您的内容添加额外的服务器调用,这有助于服务器表现。
关于jquery - 使用ajax加载div内容的优点/缺点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39435465/