Element invisibility setting tips

  • Display: None: Hides elements and destroys their render state. This means that removing hidden elements is just as expensive as rendering new elements with the same content
  • Visibility: Hidden: Hide the element and leave it rendered. This doesn’t really remove the element from the document, because it (and its subtrees) still occupies geometric space on the page and is still clickable. It can also update the render state whenever needed, even when hidden
  • Content-visibility: hidden: Hide the element and leave its rendering state. This means that the element behaves like display: None when hidden, but it is much cheaper to show it again

There are three ways to set element visibility and invisibility

  1. display
  2. visibility
  3. content-visibility

display

The display value

value describe
none Hide elements, take up no page space, and do not render
block This element is displayed as a block-level element, preceded by a newline character.
inline The default. This element is displayed as an inline element, with no newlines around it.
inline-block Inline block elements. (New value in CSS2.1)
list-item This element is displayed as a list.
run-in This element is displayed as a block-level or inline element, depending on the context.
table This element is displayed as a block-level table (similar to <table>) preceded by a newline character.
inline-table This element is displayed as an inline table (like \table>), with no line breaks before or after the table.
table-row-group This element is displayed as a group of one or more rows (similar to <tbody>).
table-header-group This element is displayed as a group of one or more rows (similar to <thead>).
table-footer-group This element is displayed as a group of one or more rows (similar to <tfoot>).
table-row This element is displayed as a table row (similar to <tr>).
table-column-group This element is displayed as a group of one or more columns (similar to <colgroup>).
table-column This element is displayed as a cell column (similar to < COL >)
table-cell This element is displayed as a table cell (similar to < TD > and <th>)
table-caption This element is displayed as a table title (similar to <caption>)
inherit Specifies that the value of the display attribute should be inherited from the parent element.

visibility

The following values

value describe
hidden Hide elements and keep them rendered. This does not actually remove the element from the document; Elements occupy space
visible Hide elements, take up no page space, and do not render
auto Hide elements, take up no page space, and do not render

content-visibility

Content-visibility allows the user agent to skip rendering of elements, including layout and painting, until it is needed. Because rendering is skipped, the content-visibility property makes the initial user load faster if most of the content is not on the screen. It also allows for faster interaction with the content on the screen. It’s neat.

This property changes the visibility of an element and manages its render state. Improved rendering performance.

Content-visibility combines the advantages of visibility and display.

The primary goal of CSS inclusion is to improve rendering performance of Web content by providing predictable isolation of DOM subtrees from the rest of the page.

The following values

value describe
hidden Hide elements and preserve their render state. This means that the element behaves like display: None when hidden, but it is much cheaper to show it again
visible Display elements
auto Displays elements and has size containment for elements that are not on screen

Reference connection: web.dev/content-vis…

Use will-change wisely

Typically, Web animations (moving elements) are rendered regularly along with other elements. In the early days of animation development, hacks like TRANSLate3D () or translateZ() in CSS were used to turn on GPU acceleration and make animations smoother. But what this does is move the element and its context to another “layer” that is rendered independently of the other elements. The cost can result in a transform animation delay of several hundred milliseconds.

You can now use CSS’s will-change property directly, which indicates that an element will modify a particular property, allowing the browser to make the necessary optimizations beforehand.

Example:

<! -- HTML --> <div class="animate"></div> /* CSS */ .animate { will-change: opacity }Copy the code

When the browser renders the code above, the browser creates a separate layer for this element. It then delegates the rendering of that element to the GPU along with other optimizations, that is, the browser recognizes the will-change attribute and optimizes future opacity-related changes. This will make the animation smoother as GPU acceleration takes over the rendering of the animation.

Will – change values are:

value describe
auto Default value. The browser will optimize it based on the actual situation
scroll-position Indicates that the developer will change the scrolling position of the element, for example, browsers usually only render the contents of the scrollable element’s “scroll window”. Some content is outside the window (not in the viewable area of the browser). If will-change explicitly sets this value, it will extend the render content around the “scroll window” to smooth longer, faster scrolling (allowing elements to scroll more smoothly)
content Indicates that the developer is going to change the content of the element, for example, browsers often cache most elements that do not change very often. But if the contents of an element are constantly changing, it’s a waste of time to generate and maintain that cache. If will-change explicitly sets this value, it can reduce browser caching of elements or avoid caching altogether. To re-render elements from start to finish. Use this value at the end of the document tree because it is applied to the children of the element it declares, and higher nodes in the document tree can have a significant impact on page performance
<custom-ident> Represents an element attribute that the developer will change. If the given value is an abbreviation, the default is extended. For example, if will-change is a padding value, all the padding properties will be completed, such as will-change: padding-top, padding-right, padding-bottom, padding-left;

Note: When using will-change on an element, the browser will try to optimize it by moving the element to a new layer and converting the working interactive GPU. If you don’t have anything to convert, it’s a waste of resources.

It is recommended that the will-change element be removed after all animations are completed. Example:

var el = document.getElementById('element'); // Set will-change el.addeventListener (' mouseEnter ', hintBrowser) when the mouse moves over the element; // Remove the will-change el.adDeventListener ('animationEnd', removeHint) when the CSS animation is finished; Function hintBrowser() {// fill in any CSS property names that you know willChange during CSS animations this.style.willchange = 'transform, opacity'; } function removeHint() { this.style.willChange = 'auto'; }Copy the code

Keep elements and their contents as separate from the rest of the document tree as possible.

This property allows you to specify a specific DOM element and its child elements independently of the entire DOM tree structure. The goal is to give the browser the ability to redraw and rearrange only a few elements, rather than the entire page at a time. That is, it allows the browser to recalculate layout, style, drawing, size, or any combination of them for a limited area of the DOM rather than the entire page.

The values

value describe
layout This value indicates that the internal layout of the element is not affected by any external influence, and that the element and its contents are not affected by the upper level;Descendants of a container should not cause the layout of elements outside its container to change, and vice versa)
paint This value indicates that children of the element cannot be displayed outside the scope of the element and that nothing will overflow (or if it does, it will not be displayed);The contents of the container will never be drawn beyond the size of the container, and if the container is fuzzy, the contents will never be drawn at all
size This value indicates that the size of the element box is independent of its contents, that is, the child elements are ignored when calculating the size of the element box.The container should not cause the position on the page to move when its contents change.
content This value is short for contain: Layout paint
strict The value is short for contain: Layout paint size

Scroll behavior makes scrolling smoother

Scroll behavior is a new feature provided by CSSOM View Module, which can easily help us achieve silky scrolling effect. This property specifies the scrolling behavior of a scroll box, and any other scrolling, such as those caused by user action, is not affected by this property.

Scroll behavior accepts two values:

value describe
auto The scroll box immediately scrolls
smooth The scroll box uses the defined time function to achieve smooth scrolling through a user agent defined time period. The user agent platform should follow the convention, if any

Avoid @import containing multiple stylesheets

With @import, we can include a stylesheet in another stylesheet. When working on a large project, using @import makes the code much more concise.

The key fact about @import is that it is a blocking call because it has to fetch the file through a network request, parse the file, and include it in the stylesheet. If we nested @import in the stylesheet, it would hinder rendering performance.

The same functionality is achieved through multiple links, but the performance is much better because it allows us to load the stylesheets in parallel.

Reference address: juejin.cn/post/694266…