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!阅读原文】。感谢您的支持!

您可能感兴趣的

码云推荐 | 国密算法 JS 和 JAVA 版 GuoMiSuanFa... 国密算法SM4(已完成) SM3(开发中) SM2(开发中) SM4 JS版本使用 var input = "待加密"; var key = "admin#$%^"; //加密 var ec = SM4.encode({ input:i...
学习 JavaScript (四)核心概念:操作符... JavaScript 的核心概念主要由语法、变量、数据类型、 操作符 、语句、函数组成,前面三个上一篇文章已经讲解完了。后面三个内容超级多,这篇文章主要讲解的是操作符。 操作符 什么叫做操作符? 这是一种工具,帮助我们操作字符串、数字值、布尔值,乃至对象,运用一些操作符能够让代码更简...
Different menu in master.page depending... I have 2 types of users (phonebookers and salesrep). They are supposed to have 2 different menu bars, pending on their login. From the login.aspx -...
Approaches to Deprecating Code in JavaScript Recently, I had to dig into the topic of code deprecation in JavaScript. I feel like this topic gets less coverage even though it may a play key role ...
The State of JavaScript 2017 A few years back, a JavaScript survey would've been a simple matter. Question 1: are you using jQuery? Question 2: any comments? Boom, done! But as ...