通过隐藏或删除元素来优化移动Web应用程序？

Question

I'm creating a mobile version of a web application I have recently made. I am trying to optimize the application to make it as fast as possible. There are some elements inside the application that should not be visible for the mobile version.

How should I go about dealing with these elements?

Do I use JavaScript to completely remove the element from the DOM? Do I use a CSS media query and simply change the visibility of the element to hidden? Do I use JavaScript and change the visibility of the element to hidden?

I'm looking for the most efficient way as my objective is to improve performance (even if it's only a very small difference).

Answer 1

As u said it should optimized for the performance. One thing to keep in mind is using images of right size. for this you can use css background-image to some elements and use css media query to select the right size background-image.

Eg:

#banner{
background-image: big-image.jpg;
}

@media all and (max-width: 640px){
#banner{
background-image: small-image.jpg;
}
}

@media all and (max-width: 420px){
#banner{
background-image: tiny-image.jpg;
}
}

for rest of the elements you can just remove() if really bulky html or hide if its very few lines.

Answer 2

To avoid loading desktop images on mobile devices there is a nice trick to lazy load them by adding data attributes to the image tags instead of src.

 <img data-lazy-load-event="immediately" data-lazy-load-for-media="desktop" data-lazy-load-src="image.jpg" />

In JavaScript you can search your DOM for all images with the data-lazy-load-src and then load them according to their media type, by adding the data-lazy-load-src attribute to their src attribute.

For elements that you can't avoid loading, use JavaScript to remove them from the DOM.