Redraw, reflux (rearrange)

Redraw, reflux (rearrange)

Backflow occurs when part (or all) of the Render Tree needs to be rebuilt due to changes in element size, layout, hiding, etc. Each face also needs to be refluxed at least once, the first time the page loads.

When elements in the REder TRR need to update attributes that only affect the appearance and style of the element, but do not affect the layout, such as background-color, it is redrawn

redraw

Changing only its own style does not affect other elements

Element style changes (width, height, size, position unchanged)

For example, visibily, background-color, etc

backflow

The size or position of the element changes, triggering a rearrangement that causes the render tree to recalculate the layout and render

Such as adding and removing visible DOM elements

The position and size of the element changed

Content changes (e.g. text changes or an image is replaced by another image of a different size)

At the beginning of the page rendering (unavoidable)

Backflow calculates the location and size of elements based on viewport size, so browser window size changes can also cause backflow

Conditions causing reflux:

1. Initial rendering of the page

2, change the font, change the size of the element (width, height, inside margin, border, change the position of the element, etc.), note: changing the attributes does not affect the layout and does not backflow

3. Change the content of the element (text, image, etc., or for example, when the user enters text in the input)

4. Add and delete visible DOM elements

5, fixed positioned elements will continue to flow back when dragging the scroll bar

6. Resize the window

7. Calculate offsetWidth and offsetHeight properties

Note: Backflow must trigger redraw, redraw does not necessarily backflow

2, pre-analysis of frequently seen test questions

Function and variable declarations are promoted to the front of the current scope, because JS is a scripting language that interprets execution from top to bottom. If a function call appears before the function definition, it will fail

2. Variables are promoted by declarations, not assignments. Functions are promoted by declarations and not called

3. Functions belong to first-class citizens in JS. If the variable name conflicts with the function, the function will be executed first

1, alert(a) console.log(a) // a is not defined 2, console.log(a) // undefined var a = 0 console.log(a) // 0 3, Console.log (a) // a() {console.log(' I am a function ')} Var a = 'I am a variable' function a() {console.log(' I am a function ')} console.log(a) // I am a variable 4, Console.log (a) // a() {console.log(' I am a function ')} a++ console.log(a) // NaN var a = 'I am a variable' function a() {console.log(' I am a function ') } console.log(a) // I am variable 5, console.log(a) // undefined var a = 0 console.log(a) // 0 function fn() { console.log(a) // undefined var a = 1 Console.log (a) // 1} fn() console.log(a) // 0 console.log(a) // undefined var a = 0; Console.log (a) // 0 function fn() {console.log(a) // 0 function fn() {console.log(a) // 0 Console. log(a) // 1} fn() console.log(a) // 1 I'm just going to add an A to the whole world, Log (a) // undefined var a = 0 console.log(a) // 0 function fn () {console.log(a) a = 1 Console. log(a)} // If the function has the same name, the lower one will overwrite the upper one, Function fn() {console.log(a) // undefined var a = 2 console.log(a++) // 2 ++ // I ++ and ++ I are the same thing as I = I + 1, but generally they are associated with assignment, I = I + 1 // a = I + 1 // a = I + 1 // a = I + 1 // a = I + 1 } console.log(a) {console.log(a) {console.log(a) {console.log(a) {console.log(a) {console.log(a) {console.log(a) {console.log(a) {console.log(a) {console.log(a) {console.log(a) {console.log(a) {console.log(a) {console.log(a) {console.log(a) {console.log(a) {console.log(a); Console. log(a) // undefined var a = 1 console.log(a) // 1 function a () {console.log(2)} Console. log(a) // 1 var a = 3 // Var a = undefined Console.log (a) // 3 function a () {console.log(4) // Function a () {console.log(4) // } console.log(a) // 3 9, f1() console.log(c) // 10 console.log(b) // 10 console.log(a) // a is not defined function f1 () { var a = b = c = 10 Log (a) console.log(b) console.log(c)} 10, f1() console.log(a) // a is not defined Log (b) console.log(c) function f1 () {var a = b = c = 10 console.log(a) // 10 console.log(b) // 10 Console. log(c) // 10} 11, MyFun (10, 20) myFun is not a function var myFun = function (a, b) {return a + b} Var I = 1 I = I ++ // I should be 2. I =1 var j= I ++ // ++ I = 2 var k = I ++ + // k = 2 + 3 * 3 Log (I, j, k) // 4 1 11 var k = I ++ + I ++ * I ++ // k = 4 + 5 * 6Copy the code