Recite 5 every day, be sure to memorize, I hope to find a little help for the small front end of the job

The tenth issue, most of the high-frequency interview questions are almost included, today to supplement a few missing questions, this series should say goodbye to everyone ~~

1. Rearrange and redraw

What is a Reflow?

  • Definition: Each element in the DOM has its own box model that needs to be evaluated by the browser based on the style and placed in a specific location based on the calculation. This is called Reflow
  • Conditions that trigger Reflow
    • Add, delete, alter, and move DOM
    • Modifying CSS Styles
    • Resize the window
    • Page scrolling
    • Change the default font of a web page

What is Repaint?

  • Definition: When the position, size, and other properties of various boxes change, the browser needs to paint the elements according to their properties. This process is called Repaint.
  • Conditions that trigger Repaint:
    • DOM changes
    • The CSS changes

How to reduce redrawing and avoid rearrangement?

Essentially, merge changes. Specific measures include:

  • DOM level: DocumentFragment is essentially a placeholder, and all its descendants nodes are actually inserted into the page. Therefore, the DOM nodes that need to be changed are first summarized into the DocumentFragment and then inserted at one time to reduce the number of DOM operations.
  • CSS layer: When working with multiple styles, you can first summarize them into a single class and then modify them at once

2, cSS3 animation commonly used properties

  • The transition animation:

Transition-property: Indicates the property that participates in the transition

Transition-duration: the duration of transition

Transition-delay: delays the transition time

Transition-timing-function: type of transition animation

Compound writing:

Transition: Attribute value 1 Attribute value 2 Attribute value 3 Attribute value 4Copy the code
  • Animation keyframe animation:

Animation-name: sets the name of the animation to which the object is applied

Animation-duration: sets the duration of the animation of the object. Animation-timing-function: sets the transition type of the animation of the object. Animation-delay: Animation-restage-count: sets the number of iterations of the object animation (default: 1) animation-direction: sets whether the object animation moves backwards in the loop animation-play-state: Sets the state of the object animation

Often used in conjunction with transform:

Translate (X,Y)

Rotate: transform: rotate()

Oblique: ransform: skew (X, Y)

Scale: transform: scale(X,Y)

Such as:

.box{ height:200px; width: 200px; position: relative; margin:200px auto; transform-style:preserve-3d; -webkit-transform-style:preserve-3d; transform:rotateX(20deg) rotateY(20deg); animation:one 5s linear infinite; -webkit-animation:one 5s linear infinite; } @keyframes one{ from{ transform:rotateX(-20deg) rotateY(0deg) ; } to{ transform:rotateX(340deg) rotateY(360deg) ; }}Copy the code

3. Event delegation

Event capture and bubbling allow us to implement a powerful event handling pattern called event delegation.

The idea is that if we have many elements that are handled in a similar way, we don’t have to assign a handler to each element — instead, we put individual handlers on their common ancestor.

In the handler, we get event.target to see where the event actually occurred and process it.

4, which JS operations will cause memory leaks

A memory leak is when a block of allocated memory is neither used nor reclaimed until the browser process terminates.

  • Unexpected global variables
  • closure
  • The DOM element is assigned to the variable and removed by removeChild. But the REFERENCE to the DOM element is still in memory
  • Forgotten timer or callback

5. What are some basic rules for writing JavaScript?

  • 1. Don’t declare multiple variables on the same line
  • 2, use === or! = = to compare
  • Create objects and arrays using literals instead of new Array
  • 4. Don’t use global functions
  • 5. Switch statements must have default branches
  • 6. Functions should not sometimes return and sometimes not return
  • 7, fON-in loop variables, with the var keyword to explain the scope, to prevent variable pollution
  • 8. Declaration of variables follows the camel case nomenclature. Declare constructors with capital letters, and define constants with capital letters, separated by _
  • 9. Ternary expressions can replace if statements
  • 10, &&, | | can short circuit, using && front if a value is wrong, then the value behind the without judging, using | |, if a value is in front of the right, then the value behind the judgment
  • 11, compare data types false in 6 cases and true in all others: false, “”, 0, null, NaN, undefined
  • 12. Typeof is used for data type detection and Instanceof is used for object type detection
  • Load third-party content asynchronously
  • 14, single-line comment //, multi-line comment /**/
  • Use namespaces to resolve variable name conflicts
  • Const const const const const const const const const const const const const const const const const const const const const

In line with the front end of the job for a little help in the original intention, learn from the nuggets inside a lot of big man’s article, if there is infringement please inform