综合技术

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

微信扫一扫,分享到朋友圈

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

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!

巨头射程范围内,云服务创业公司寻差异化出路

上一篇

Duplicate constants between Javascript and server-side code

下一篇

您也可能喜欢

评论已经被关闭。

插入图片
Create multiple items on the page relative to an item that changes

长按储存图像,分享给朋友