In CSS, there are two main ways to set elements to hide. One is display: None, and the other is visibility:hidden. What are the main differences between the two hiding methods? Next, I will briefly introduce the differences between the two from four aspects.

First, space occupation

  • First of all, space occupancy, setdisplay:noneStyle element, as in document flowDo not take a positionIn addition, browsers will not parse this element; And set upvisibility:hiddenStyle elements in the document flowStill a placeholderYou can just say, I just changed the transparency to 0;
  • For example, let’s say I have two ul’s here, and under each UL, I have four Li’s, and I’ve numbered each li. Now we have set the display: None style to li3 and the visibility:hidden property to li7, and the result looks like this:

  • As can be seen from the results, after li3 is hidden, li3 disappears on the page without occupying, and li4 occupies the position of LI3, which can be understood asDisappear completely; And after hiding LI7, from the visual point of view, LI7 is disappeared, but the position of LI7 is still retained, its position can not be arbitrarily occupied by others.

Two, plant connection

  • What does it mean? We should have heard the word zhulian nine ethnic groups, zhulian actually can be understood as, he did not do anything, was involved. This connection is mainly reflected in the structure of the father-son relationship.

  • For example, I still have two ul’s here, and under each ul, I have four Li’s, and I’ve numbered each li. Under li3 and li7, there is another div that says “I am the son of Li3” and “I am the son of Li7”.

  • What happens if I set the display: None style to li3 and the visibility:hidden property to li7?

  • As a result, LI3, along with its sons, completely disappears, taking no space; Li7 and its son, on the other hand, are both visually gone, but still in place.

  • So it can be concluded that once display: None is applied to the parent node element, neither the parent node nor its descendants are visible, no matter how unyielding the offspring elements struggle.

Three, hidden failure

What does this mean? Let’s start with a case study:

  • For example, I still have two divs here, and under each div there’s an A tag that gives a visibilityHidden class name, and under each a tag there’s an IMG that references the same image, but the img in the second div gives a visibilityVisible class name;
  • Now, let’s set a class for visibilityHiddenvisibility:hiddenStyle, set one to visibilityVisible for img in the second divvisibility:visibleThe page looks like this: What happens?

  • As a result, the first A tag and the img below are hidden, while the second A tag, although hidden, img set the display property, so the img result is still displayed, which is what we mentioned"Hidden failure".

  • So if we set visibilityHidden’s classdisplay:noneStyle, and then set one to visibilityVisible for img in the second divdisplay:blockStyle, what’s the result?

  • As a result, the child element is hidden with the parent element, and the child element has display:block set in an attempt to struggle, but the struggle doesn’t work.

  • In fact, this hidden failure is very similar to the linkage mentioned earlier. I think you can understand that.
  • In general, display: None and visibility:hidden are both presentEvery sexThe father hides and the child hides with him;
  • However, visibility can sometimes be hidden if the child element is set itselfvisibility:visibleThe display style will occurThe hidden failureIn the case.

Reflux and redrawing

There is also a very big difference between display: None and visibility:hidden. Display: None causes redraw and visibility:visible causes redraw and does not cause redraw. Here, we need to understand what backflow and redraw are. To understand backflow and redraw, you first need to look at what happens when the browser loads the page.

  • As we all know, browsers work with two engines, a rendering engine and a JavaScript engine. Different browsers have different rendering engines. Google and Safari use Webkit, while Firefox uses Gecko.

  • What about when a user visits a page:

    • The browser will firstParsing HTML files.Create a DOM tree
    • As you create the DOM tree, it will alsoParse the CSS stylesheet.Create a CSS object model
    • Once the DOM tree and CSS object model are created, the browser will take the DOM tree and CSS object model,Synthesize a render tree.

  • This render tree is somewhat similar to, but not exactly the same as, a DOM tree, which only has structure, whereas a render tree also has style. Next we can take a look at how the browser creates the render tree. To build the render tree, the browser does the following:

    First, each visible node is traversed starting at the root of the DOM tree.

    Second, for each visible node, find the corresponding rules in the CSSOM tree and apply them.

    Third, the render tree is composed from each visible node and its corresponding style.

  • In the DOM tree on the left, there is a P tag and a SPAN tag. In the CSS object model on the right, the SPAN style is set to display: None. In the render tree, the span tag disappears. This is the process of compositing the render tree.

  • Back to our browser workflow, after the rendering tree is created, the browser will layout according to the rendering tree. The layout process outputs a box model, which can accurately capture the exact position and size of each node in the view window. This behavior is usually called backflow or automatic rearrangement

  • After the layout is complete, the browser will convert each node of the rendered tree to an actual pixel on the screen. This stage is called the redraw node. When the drawing is complete, our page will be displayed on the screen

  • When the user visits the page, the browser repeats steps 4 and 5. Step 4 is redraw, and step 5 is redraw, so redraw must be redrawn, but redraw does not necessarily cause redraw.

  • Under what circumstances does that trigger backflow? When does redrawing happen? Here are some of the elements that cause backflow and redraw.

  • It can be simply understood that when the node layout changes, such as width, height, location, node content changes, browser window size changes, etc., will trigger backflow and redraw behavior.

  • When some elements need to update their attributes, these attributes only affect the appearance and style of the element, not the layout, such as background-color. Only redraw occurs

  • Therefore, when you set display: None, the structure of the page changes because the entire element disappears on the page, causing backflow and redrawing. Setting opacity: hidden will not cause any change in page layout, which is equivalent to setting opacity:0 and will not cause backflow.