display:One consumes data?

Question

Some questions about what happens when we use the property display:none of css:

Is the element loaded and not displayed? Or it is not loaded (and therefore does not consume data)?

Answer 1

It is charged. If you see in Inspector de elemento You’ll see he’s there, just hiding with the display:none. A good example for you to see that it is loaded and consumes data, is you make a loop of lines with for example, 50 thousand records; you will see that it will take a while to carry out the process, but at the end, it will not appear anything, because it is with the display:none.

Answer 2

In addition to the Many Different display box types, the value None Lets you turn off the display of an element; when you use None, all Descendant Elements also have their display turned off. The Document is rendered as though the element doesn’t exist in the Document Tree.

The MDN says the document is rendered as if the element did not exist in the DOM tree. This means that the browser will not process your visibility information, but it will remain in the DOM tree, allowing access through javascript, for example. For the purpose of presentation, the element does not exist.

used to describe the Presentation of a Document Written in HTML or XML (including Various XML Languages like SVG or XHTML). CSS describes how the Structured element must be rendered on screen, on paper, in Speech, or on other media.

We should also take into account that the display is a CSS property and therefore must describe the presentation of the elements on the screen.

The visibility Property can be used to Hide an element while Leaving the space Where it would have been. It can also Hide Rows or Columns of a table.

Finally, different from the display: none; the property visibility: hidden; renders the element on the screen but hides its appearance. The element continues to occupy its space according to its css definitions. Below is an example of code about the behavior of both attributes.

.box{
  background-color: red;
  width:50px;
  height:50px;
  display:inline-block;
  }

.hidden{
  visibility: hidden; 
  background-color: red;
  width:50px;
  height:50px;
  display:inline-block;
 }

.none{
  display: none; 
  background-color: red;
  width:50px;
  height:50px;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box"></div>
<div class="hidden"></div>
<div class="box"></div>
<div class="none"></div>
<div class="box"></div>

Answer 3

Depends. HTML is certainly loaded. But if the element contains images, iframes or other things loaded separately, the browser will have the chance not to load them while the display is set to None.

As a concrete example, in an application I did and tested in desktop Chrome I found that an iframe inside a div with display:None was not loaded until the time of displaying div. It was easy to see this by the speed of loading, by the browser development tools or also by the server logs.

I cannot guarantee that mobile browsers have this same behavior, so it would be good to test your page carefully in various situations, because the answer may change as new versions of browsers are released and improved.

Answer 4

I could be wrong, but I’m pretty sure it’s not loaded. Elements with display:name are left out at the time of Render Tree, unlike visibility: Hidden that not only loads the element when it occupies "space" in the DOM.