Question

我有一个项目列表。当您点击某个项目时，iframe会打开并显示一个网站。该列表最多包含50个项目。

最佳方法是什么？性能方面？

单击某个项目时是否显示/隐藏了多个iframe元素？
有一个iframe，并在点击某个项目时更改它的src属性？

第一个选项似乎用重元素阻塞了我的页面，而第二个选项导致了许多请求，并且对用户来说感觉更慢。

Answer 1

如果一次加载所有50个，那相当于一次在Web浏览器中加载50个标签。这意味着它将使用大量资源，事实上很多计算机都很难做到这一点。

除非您编码，否则所有50个站点将并行加载。这意味着所有50个将慢慢下载，而不是快速下载1个网站。有可能，用户将点击该链接，它仍将下载。不是所需的用户体验。

我已经制作了一个快速的jsFiddle，您可以看到一次加载50个（或更多/更少）标签的效果。在我的机器上，它使用超过1GB的内存，并且相当多的随机域名甚至没有加载。

http://jsfiddle.net/3uzpmru5/1/

＆＃13;

$(document).ready(function () {
  //Adding 50 domains
  var totalFrames = 50; 
  
  for (var iframeCount = 0; iframeCount < totalFrames; iframeCount++) {
    //Create a random 3 letter domain name. Pretty much all 3 letter domain names are gone, so should work! 
    var domain = "http://www."; 
    domain += String.fromCharCode(96 + Math.floor(Math.random() * 26)); 
    domain += String.fromCharCode(96 + Math.floor(Math.random() * 26));
    domain += String.fromCharCode(96 + Math.floor(Math.random() * 26)); 
    domain += ".com"; 
    
    //Add an iframe to the page 
    $('body').append('<iframe src="' + domain + '" />');
  }});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

<强>替代

在不了解整个情况的情况下，很难建议最佳替代方案，但假设您的目标是使网站看起来响应，而不是某种离线兼容性 - 那么某种预测性预加载可能有意义。

对于当前浏览过的网站，我会有一个iframe，我们认为他们接下来会查看该网站的另一个iframe，因此我们已预先加载。

如果您希望他们按顺序查看每个网站，这很容易 - 只需在序列中预加载下一个网站。

如果它纯粹是随机的，那么你可以根据鼠标进入按钮来触发预加载。这可能会减少加载时间几百毫秒，以提高响应速度。

您还可以考虑使用动画删除旧网站并将新网站移至适当位置。只要不超过顶部，这就会分散用户对页面加载时间超过500-1000ms的注意力。

Answer 2

第一个变量更好 - 因为客户端更多的服务器 - 并且它不是一个大问题 - 客户端，当做一些简单的逻辑。但我想建议你那个变量（如果可能在你的拱门）：

客户获得10个元素，当他接近10（7-9）时，你动态上升10个元素。给我更多关于你的系统的信息，我们可以多考虑一下。

在页面上创建许多元素与一个更改的元素

2 个答案: