A. Browser rendering principle

First, a quick summary of the browser rendering steps:

  • Build an HTML tree from HTML. (DOM)
  • Build a CSS tree based on the CSS. (CSSOM)
  • Merge the two trees into one render tree. (render tree)
  • Layout, the Layout. (Document flow, box model, computed size and location)
  • Paint, Paint. (Draw border colors, text colors, shadows, etc.)
  • Compose, synthesis. (Composite display screen according to cascade relationship)

As shown in the figure below, three trees are schematic.

The browser then renders according to the updated style to achieve an “animated” visual effect.

As shown below, there are three ways to update:

  1. JS/CSS > Styles > Layout > Draw > Composition

Example: div.remove() will trigger the current disappearance of other elements relayout.

  1. JS/CSS > Styles > Draw > Composition

Example: Change the background color to repaint > Composite.

  1. JS/CSS > Styles > Composition

Example: Change transform, just composite

iniframeProcedure For displaying the Paint Flashing light in full screen, there is an error.

In this sharing communitycsstriggers.com/, shares the test results of what processes each element triggers in different browser kernels.

Two.CSS animation two ways

  1. throughtransformThe displacement oftranslate, scalingscale, rotation,rotateAnd tiltskew, cooperatetransitionTransition frame complement and::hoverHover, through the mouse trigger display animation.

Example code: Animation Example Mouse over hearts to enlarge effect animation.

  1. throughtransform , transition 和 animationGenerate automatic effects animation.

Effect animation of beating hearts.

The sample code

Note:inlineElement not supportedtransformNeed to becomeblockElements.

Other feelings

The study of CSS common styles and properties will come to an end in a week. CSS is a complex variety of styles and attributes, and is constantly updated and added, so the learning of CSS is not to memorize hundreds of styles, but to use them. To be good at searching FOR MDN style documents in Google, not a close reading of the document can be understood, but the active use of MDN document demo, grammar and demonstration, CMR, that is, copy, modify and run, through continuous trial and error, in practice to understand the document, complete the explanation of the document. And for the future study of CSS, to regard it as a reference book, standardized documents, because CSS is not orthogonal, in the cascading style of the bug, the method to solve the bug, should be a correction scheme, and should not be too much on its cause.

The resources

Render tree construction, layout, and rendering Rendering performance Uses Transform to animate