0

I have a mobile website. It's ajax based and when clicking a row from a table in the main screen, a div is populated with ajax data and then fades in, occupying the whole window, in fixed position. Then the user can navigate the div like if it's a separate window but can back out to the main table (fading out the fixed div). So, when the user navigate the fixed div, in reality there is also the main page body in the background. Would disabling/hiding the background main page make the website more lightweight for a mobile or not? The structure is similar to:

<html>
<head>
<script>
function navigateIn(url){
$.get(url,function(data){ //get data from url
$('#navigate').html(data); //put data into div
$('#navigate').fadeIn(200,function(){ //fade in div
//Now, after div is faded in, hide the background:
$('#main').css('overflow','hidden'); //Is this helpful?
$('#main').css('visibility','hidden'); //Is this helpful?
$('#main').css('display','none'); //Is this helpful? This void the scrolltop of the body, so it's not my greatest choice
});
});
}
function navigateOut(){
//Display the main page before back out!
$('#main').css('overflow',''); 
$('#main').css('visibility',''); 
$('#main').css('display','');
$('#navigate').fadeOut(200);
}
</script>
<style>
#navigate {
position: fixed;
height: 100%;
width: 100%;
top: 0; bottom: 0; left: 0; right: 0;
overflow: auto;
}
</style>
</head>
<body>
<div id="main">
<button onclick="navigateIn('http://www.test.com');">Navigate In!</button>
</div>
<div id="navigate"></div>
</body>
</html>

Here's a jsfiddle which is showing what I'm talking about: jsfiddle But the effect is a bit different because it's not full screen view. I don't actually know how to test by myself if it's helpful or not (or even worse) to hide the content. So I ask to you. PS: I know it's not a beautiful effect when fading in, but in reality I made a slideIn from right extension, so it's much better...

Franz Tesca
  • 255
  • 1
  • 5
  • 19
  • You could try looking in devtools timelines/performance to see if there are any problems. – gcampbell Jul 25 '16 at 19:13
  • If they use "display:none" after fading out there should be no performance cost at all, because they are not included in the RenderTree of most modern browsers. – sknt Jul 25 '16 at 19:16
  • display:none means that the tag in question will not appear on the page at all (although you can still interact with it through the dom). There will be no space allocated for it between the other tags. visibility:hidden means that unlike display:none, the tag is not visible, but space is allocated for it on the page. The tag is rendered, it just isn't seen on the page...in terms of performance won't make any difference since object it's available to handle via dom anyway, and so loaded in memory. – jsanchezs Jul 25 '16 at 19:19
  • @Skynet How sure are you about this? From what I recall display: none still triggers dom reflow, where as visibility: hidden doesn't. – zsawaf Jul 25 '16 at 19:20
  • hidding is more work at init but less when you need to use the element, not displaying it is the opposite. So if you need to show/hidde something multiple times, and for sure, just display it once when needed and then hide it. – Gatsbill Jul 25 '16 at 19:20
  • I just double checked, I'm right. Read this: http://stackoverflow.com/questions/27637184/what-is-dom-reflow – zsawaf Jul 25 '16 at 19:21
  • @zsawaf Very sure, have a look here: http://stackoverflow.com/a/11757103/2394967 but triggering a reflow sounds to have a lot more impact on the performance than not rendering an element... – sknt Jul 25 '16 at 19:51

0 Answers0