CSS selector weights

How do flex’s children center vertically and horizontally with their parents

Difference between sass and less

reference

Method of selecting CALSS in VUE (1)

The use of querySelector

this.$refs.tree.querySelector(".el-scrollbar__wrap").classList.add("lw-tree-scrollbar")
Copy the code

Say something about CSS inheritance

Very few properties can be inherited, only color, text, font spacing, line height alignment, and list style.

  • All elements are inheritable: visibility and cursor.
  • Inline elements are inheritable: Font-size: 16px; word-spacing: 15px; word-spacing: 16px; word-spacing: 16px; word-spacing: 16px; word-spacing: 16px; word-spacing: 16px , text-decoration, text-transform, direction.
  • Terminal block elements are inheritable: text-indent and text-align.
  • List elements are inheritable: list-style, list-style type, list-style position, list-style image.

What are the characteristics of THE CSS layout

reference

What is landing

Style weight

How are ICONS and text horizontally centered

Return to redraw

It is important that the browser renders pages using the Flow Based Layout model by default.

Since the browser rendering interface is based on the streaming layout model, that is, if the information of a DOM node is changed, the DOM structure needs to be recalculated and the interface is rearranged, causing backflow again. However, the change degree of this structure will determine the change scope of the surrounding DOM, namely the global scope and the local scope. Global scope is to rearrange the entire render tree from the root HTML, for example when we change the window size or orientation or change the root element size or font size; A local layout can be a rearrangement of a part of the render tree or a render object.

Backflow refers to the reconfiguration of part or the whole of the Render tree when information such as the layout or display of an element changes, i.e. the layout of the page is adjusted.

Redraw refers to the updating of node attributes in the Render tree. Redraw does not necessarily cause redraw.

An operation that causes backflow

  • Page first render
  • The browser window size changed. Procedure
  • The size or position of the element changed(Width, height, border, position)
  • Element content changes (number of words or image size, etc.)
  • Element font size changes
  • Add or remove visible DOM elements
  • Activate CSS pseudo-classes (such as: :hover)
  • Setting the style property
  • Query some properties or call some methods

An operation that causes a redraw

Redraw is a much simpler process than backflow. Redraw is the process in which the browser applies a new style to an element on a page and redraws it when a change in style does not affect its position in the document flow, such as a change in font color

Operations on element attributes that are not related to layout will only cause redraw, otherwise they will cause both backflow and redraw. Common attributes that cause the browser to draw include:

The cost of backflow is larger. If a node is inserted at the top of the body, it causes the entire body to backflow; If a node is inserted at the end, only part of the content will be recycled, so the overhead is low. Browsers build queues to perform batch processing to improve the performance of reflux and redraw. However, accessing the offsetTop, scrollTop, clientTop, Width, height class attributes of a node or calling the getComputedStyle method will force the browser to execute the queue ahead of time to get the latest style.

Performance optimization

Reduce DOM manipulation

  • ClassName or cssText batch update styles to avoid frequent backflow or redraw caused by single-attribute operations
  • Insert the document after styling the newly created element; Or set the display property of the node to None, adjust the style, and then return to the display state
  • Use variables to cache the style of the element to avoid reading the style too often and causing the browser to queue back early (to calculate the layout of the element)
  • Specify the width and height of the image to avoid backflow when the newly loaded image is resized
  • RenderLayer: Use the video element, WebGL, Canvas, CSS3 3D, CSS filter,
  • Minimize DOM access times and cache DOM access style information to avoid excessive backflow.
  • If you need to access the same DOM multiple times in a local method, store a reference to it first

Replace expensive apis with better apis

  • QuerySelectorAll () instead of getElementByXX().
  • Turn on GPU acceleration for animation and hand over rendering calculations to GPU.
  • Avoid traversal with HTML collections (arrays of classes), because collection traversal is more expensive than true array traversal.
  • Reduce the number of event handlers with event delegates.

Reduce reflux

  • Avoid setting a lot of style attributes because changing the style of a node will trigger a reflow every time it is set, so it is better to use the class attribute
  • Implement the animation of the element, and its position property is best set to absoulte or fixed, so that it does not affect the layout of other elements
  • Animation implementation speed selection. For example, implementing an animation that moves at 1 pixel is the smoothest, but reflow is too frequent, consuming CPU resources, and moving at 3 pixels is much better.
  • Do not use a table layout, because if one element in the table triggers a reflow, the entire table will trigger a reflow. If you have to use a table, you can set table-layout: Auto; Or table-layout: Fixed renders the table line by line, which is also used to limit the scope of reflow

CSS and animation processing

  • Use less CSS expressions
  • Reduce the use of JavaScript code to modify element styles and use class names to manipulate styles or animations.
  • Animation should be used on absolutely positioned or fixed positioned elements;
  • Hide out of the screen, or when the page is scrolling, try to stop the animation;

This section reference from: www.jianshu.com/p/33c222133…