Create multiple items on the page relative to an item that changes

综合技术 2018-05-18

I have a list of items. When you click on an item an iframe opens up and shows a website. the list will contain up to 50 items or so.

What is the best approach, performance-wise?

  1. Have multiple iframe elements that are shown/hidden when an item is clicked?

  2. Have one iframe, and I change it's src
    attribute when an item is clicked?

the first option seems to clog my page with heavy elements, while the second one results in many requests and feels slower to the user.

If you load all 50 at once, that's the equivalent of loading 50 tabs in your web browser at once. This means it's going to use a lot of resources and in fact a lot of computers will struggle to do this.

Unless you code otherwise, all 50 sites will load in parallel. This means all 50 will be downloading slowly, rather than 1 website loading quickly. Chances are, the user will click the link and it will still be downloading. Not the desired UX.

I've made a quick jsFiddle for you see the effect of loading 50 (or more/less) tabs at once. On my machine, it uses well over 1GB of memory and quite a few of the random domain names didn't even load.

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('');
  }});

Alternative

Without knowing the entire situation it's hard to suggest the best alternative, but assuming your goal is to make the site seem responsive, rather than some sort of offline compatibility - then some sort of predictive preloading might make sense.

I would have one iframe for the currently viewed website and another iframe for the website we think they are going to view next, so we have therefore preloaded.

If you are expecting them to view each website sequentially, this is easy - just preload the next one in the sequence.

If it's purely random, then you could trigger a preload based on mouse entry to the button. This might shave a few hundred milliseconds off your load time to improve responsiveness.

You could also consider an animation to remove the old website and bring the new website into place. As long as it's not over the top, this would distract the user gaining 500-1000ms extra time for the page to load.

Hello, buddy!

责编内容by:Hello, buddy! (源链)。感谢您的支持!

您可能感兴趣的

数据类型转换 JavaScript 是一种动态类型语言,变量没有类型限制,可以随时赋予任意值。 var x = y ? 1 : 'a'; 上面代码中,变量 x 到底是数值还是字符串,取决于另...
深入理解 函数、匿名函数、自执行匿名函数... 如下方法 add 就是函数声明的代码结构: function add(x,y){ alert(x+y) } add(1,2) //弹窗显示:3 关于函数声明,...
HTML analysis using javaScript I am trying to get parse HTML document. this is the HTML: Ankur Arora http://photos1.meetupstat...
Animate/Slow down elements filling space left by r... Here is my example: http://jsfiddle.net/MT5xS/ When you click the first picture, it i...
网页性能优化 网页性能优化 页面优化 页面优化可以提升页面的访问速度从而提高用户体验,优化的页面可以更好的提升 SEO 的效果同时也可以提高代码的可读性和维护性。 网页的生成过程,大致可以分成五步。 ...