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,抓取优酷免费视频的真实播放地址... 工具 : google浏览器 + fiddler抓包工具 说明:这里不贴代码,【只讲思路!!!】 原始url = https://v.youku.com/v_show/id_XMzIwNjgyMDgwOA==.html? 【...
Javascript – Generator-Yield/Next & Asyn... Generator (ES6)- Functions that can return multiple values at different time interval, as per the user ...
Create IoT projects programming with JavaScript obniz kickstarter page Obniz from CambrianRobotics, Tokyo is a cloud-connected IoT developm...
智能合约逆向心法34C3_CTF题分析(案例篇·一)... 前言 最近笔者玄猫安全想研究了一下智能合约逆向,顺便入门一下逆向的知识,所以打算边学边写,不足之处请多指正。本篇我们就从一个题目开始看起。 题目 题目地址 : https://archive.aachen.ccc.de/3...
Machine learning comes to your browser via JavaScr... There’s now a JavaScript library for executing neural networks inside a webpage, using the hardware-accelerated gra...