How browsers render

Render step

  1. Building an HTML tree (DOM) from HTML
  2. Building a CSS Tree from CSS (CSSOM)
  3. Combine two trees into one render tree
  4. Layout (document flow, box model, calculated size and location)
  5. Paint (to draw border colors, text colors, shadows, etc.)
  6. Compose (display screen according to cascade relationship)

Three update modes

The first type of update – full watch

Div.remove () triggers the current element to disappear and other elements to relayout

The second update method skips layout

Just change the background color, repaint+ Composite

Third way — Skip Layout and Paint

Just change transform, just composite

The transform usage

Commonly used functions

Translate: displacement

transform: translate(12px, 50%); transform: translateX(2em); transform: translateY(3in); transform: translateZ(length); transform: translate3d(x,y,z); Translate (-50%,-50%) Can do absolute positioning element centerCopy the code

Scale: zoom

The transform: scale (2, 0.5); transform: scaleX(2); The transform: scaleY (0.5);Copy the code

Rotate: rotating

The transform: rotate in turn (0.5); transform: rotateX(10deg); transform: rotateY(10deg); transform: rotateZ(10deg); Transform: Rotate3D is generally used for rotation loading by 360°Copy the code

Skew: tilt

transform: skew(30deg, 20deg); transform: skewX(30deg); The transform: skewY 1.07 rad ();Copy the code

Note: The above elements generally require a transition ** inline elements do not support a transform and need to become a block **

Transform combination

Translate the transform: scale (0.5) (100%, 100%); transform: none;Copy the code

The transition transition

Add intermediate frames

grammar

Div {transition: <property> <duration> <timing-function> <delay>; } Standard syntax:  <single-transition># where <single-transition> = [ none | <single-transition-property> ] || <time> || <timing-function>  || <time> where <single-transition-property> = all | <custom-ident> <timing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function> where <cubic-bezier-timing-function> = ease | ease-in | ease-out  | ease-in-out | cubic-bezier(<number <a href="/zh-CN/docs/CSS/Value_definition_syntax#Brackets" title="Brackets: Enclose several entities, combinators, and multipliers to transform them as a single component">[0,1]>, <number>, <number <a href="/zh-CN/docs/CSS/Value_definition_syntax#Brackets" title="Brackets: Enclose several entities, combinators, and multipliers to transform them as a single component">[0,1]> <number>) <step-timing-function> = step-start | step-end | steps(<integer>[, <step-position>]?) where <step-position> = jump-start | jump-end | jump-none | jump-both | start | endCopy the code

** Note: Not all attributes can transition, for example display: None =>block cannot transition

Use transform to find the midpoint of the transition — use transform twice

For example:. A ===transform===>. B. b===transform===>. C Use setTimeout or listen for transitionEnd events

animation

@ keyframes grammar

The first is from to. @keyframes slidein { from { transform: translateX(0%); } to { transform: translateX(100%); }} The second way is to write a percentage; @keyframes identifier { 0% { top: 0; left: 0; } 30% { top: 50px; } 68%, 72% { left: 50px; } 100% { top: 100px; left: 100%; }}Copy the code

Animation abbreviation syntax

Animation: | | transition way long delay | | | times direction whether filling | | suspended animation;

Standard grammar

where <single-animation> = <time> || <timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state> || [ none | <keyframes-name> ] where <timing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function> <single-animation-iteration-count> = infinite | <number> <single-animation-direction> = normal | reverse | alternate | alternate-reverse <single-animation-fill-mode> = none | forwards | backwards | both <single-animation-play-state> = running | paused <keyframes-name> = <custom-ident> | <string> where <cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number <a href="/zh-CN/docs/CSS/Value_definition_syntax#Brackets" title="Brackets: Enclose several entities, combinators, and multipliers to transform them as a single component">[0,1]>, <number>, <number <a href="/zh-CN/docs/CSS/Value_definition_syntax#Brackets" title="Brackets: Enclose several entities, combinators, and multipliers to transform them as a single component">[0,1]> <number>) <step-timing-function> = step-start | step-end | steps(<integer>[, <step-position>]?) where <step-position> = jump-start | jump-end | jump-none | jump-both | start | endCopy the code

CSS animation small practice (beating hearts) jsbin.com/kanigulaga/…

Optimization of CSS animation


CSS command performance table



Specific method query

Developers.google.com/web/fundame…



JS optimization

Use requestAnimationFrame instead of setTimeout or setLnterVal



CSS optimization

Use will-change or translate