display: none consumes data?

It is loaded . If you see in Inspector de elemento you'll see that it's there, it's only hidden with display:none . A good example for you to see that it loads and consumes data, is you looping lines with eg 50,000 records; you will see that it will take some time to complete the process, but at the end it will not appear anything, since it is with display:none .

  

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 does not exist in the document tree.

The MDN says that the document is rendered as if the element did not exist in the tree DOM. 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 presentation purposes, 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 should be rendered on   screen, on paper, in speech, or on other media.

We should also take into account that 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, other than display: none; , the visibility: hidden; property renders the element on the screen but hides its appearance. The element continues to occupy its space according to its css definitions. Here is an example code for 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><divclass="box"></div>
<div class="hidden"></div>
<div class="box"></div>
<div class="none"></div>
<div class="box"></div>

It depends. HTML is certainly loaded. But if the element contains images, iframes or other things loaded separately, the browser will have the chance of not loading them while the display is set to none .

As a concrete example, in an application I made and tested in Chrome on the desktop, I noticed that an iframe within a div with display: none was not loaded until it was time to display the div. It was easy to see this by loading speed, browser development tools or server logs.

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

I may be wrong but I'm pretty sure it's not loaded. Elements with display: name are outside at the time of Render Tree, unlike visibility: hidden which not only loads the element but occupies "space" in the DOM.