CODEWITHSUNDEEP
javascriptjqueryhtmliframe
Moshe Shaham
Moshe Shaham

Reputation: 15994

Create many elements on the page vs. one element that changes

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.

Upvotes: 1

Views: 73

Answers (2)

Andrew Spode
Andrew Spode

Reputation: 647

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('<iframe src="' + domain + '" />');
  }});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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.

Upvotes: 1

Legendary
Legendary

Reputation: 2242

First variable are better - because clients more of server - and it is not a big problem - client, when do some simple logic. But i want to suggest you that variable (if it possible at your arch):

Client get 10 elements, and when he go closer to 10 (7-9) you dynamically uploar 10 more elements. Give me more about your system and we can think more.

Upvotes: 0

Related Questions