Question 1: What does the following code look like

 <style>
    .child2{
      transform: translateY(200px);
    }
  </style>
<div class="parent">
    <div class="child1">child1</div>
    <div class="child2">child2</div>
    <div class="child3">child3</div>
  </div>
Copy the code

Page effect:

Q: Why isn’t Child3 where Child2 was before?

The transform property is located on the Composite Layers layer. When the GPU process starts a new compound layer, it does not affect the default compound layer (normal document flow), so it does not affect the surrounding DOM structure. So the transform does not cause backflow. The GPU cannot understand the HTML code, so it needs to be parsed by the browser engine, and then the GPU can draw.

Q2: How do I draw a triangle in CSS

The code is as follows:

.parent { width: 0; height: 0; border-bottom: 10px solid #000; border-left: 10px solid transparent; Border-right: 10px solid transparent; border-right: 10px solid transparent; }Copy the code

Question 3: How do I draw a sector in CSS

The code is as follows:

.parent{
            width: 0;
            height: 0;
            border: 50px ;
            border-style: solid;
            border-color: #000 transparent transparent;
            border-radius: 50px;   
        }
Copy the code

Question 3: How many rearrangements (reflow) and how many redraws have occurred in the code above

<script>
        let el=document.getElementById('app')
        el.style.width=(el.offsetWidth+1)+'px'
        el.style.width=1+'px'
</script>
Copy the code

A: Two rearrangements (reflux) two redraws occurred

What is rearrangement (reflux) and what is redraw?

  • Rearrangement: changes to page layout and geometry; After the GPU gets the rendering tree, the layout is drawn
  • Redraw: changes that do not affect geometric positions, such as color changes; When the DOM node on the page changes without layout, the GPU needs to draw it again
  • DOM tree (pure HTML) : represents the page structure,
  • Render tree (DOM tree plus CSS) : this is something that the GPU can read and understand
  • Either rearrangement or redrawing is a drain on browser performance

How to trigger a rearrangement:

  • Page first render
  • Remove or add visible DOM elements
  • Change element position
  • Changing element size
  • Resize the window
  • offsetWidth offset… clientTop client

How to trigger redraw:

  • When the DOM on the page changes the properties of non-geometric information

Reflux must redraw, redraw does not necessarily reflux

Question 4: What does the following code output?

var name = 'world! '; (function() {if (typeof name === 'undefined') {var name = 'Jack' console.log('Goodbye' + name); } else { console.log('Hello' + name); }}) ()Copy the code

Execution Result:

  • This code has two scopes, the global scope and the function scope. Inside the function var name = 'Jack'Will be promoted to the top of the current function scope, which is the declaration of promotion.