javascript - 在页面上创建多个元素与更改一个元素

Question

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

就性能而言，最好的方法是什么？

1. 单击某个项目时是否有多个显示/隐藏的 iframe 元素？

2. 有一个 iframe，我在单击某个项目时更改它的 src 属性？

第一个选项似乎会用大量元素堵塞我的页面，而第二个选项会导致许多请求，并且让用户感觉速度较慢。

Answer 1

如果您一次加载全部 50 个，则相当于一次在网络浏览器中加载 50 个选项卡。这意味着它将使用大量资源，事实上很多计算机都很难做到这一点。

除非您以其他方式编码，否则所有 50 个站点都将并行加载。这意味着所有 50 个网站的下载速度都会很慢，而不是 1 个网站加载速度很快。很可能，用户单击该链接后，该链接仍将继续下载。不是所需的用户体验。

我制作了一个快速的 jsFiddle 供您查看一次加载 50 个(或更多/更少)选项卡的效果。在我的机器上，它使用了超过 1GB 的内存，而且相当多的随机域名甚至没有加载。

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

$(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 + '" />');
  }});

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

替代方案

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

我将为当前查看的网站设置一个 iframe，为我们认为他们接下来要查看的网站设置另一个 iframe，因此我们已进行预加载。

如果您希望他们按顺序查看每个网站，这很简单 - 只需预加载序列中的下一个网站即可。

如果它是纯粹随机的，那么您可以根据鼠标输入按钮来触发预加载。这可能会缩短加载时间几百毫秒，从而提高响应能力。

您还可以考虑使用动画来删除旧网站并让新网站就位。只要它不超过顶部，这就会分散用户的注意力，从而获得 500-1000 毫秒的额外时间来加载页面。