This is the 20th day of my participation in the August Text Challenge.More challenges in August

👾 preface

  • Really?? Really?? It’s 2021. Who can’t tell the difference between redrawing and rearranging?
  • I don’t want to talk to you. I want to talk to you.

🏙️ about rendering

  • When a page begins to renderthingsWhen you hear this a lot, basically the browser downloads everything, righthtmlResources andcssResources are built separatelyDomTrees andStyleTrees, and when both brothers are ready there will be render treesRender TreeThe generated.
  • Render tree Render tree you know what it does when you hear the name, it just putsthingsTo the page, and this process is called rendering.
  • How did he do this rendering? You can understand that the specific structure of the page to determine the first good, such as the page is divided into several parts of the several parts of the number of places, and then he begandrawTo the screen that we’re looking atDrawing a pictureYou can imagine drawing something without firstGet the general structureAnd then slowlyRepair details? It’s the same process, and this process involvesredrawandrearrangement.

🚥 redraw

  • heavy drawRedraw as the name implies, you can also think of it as adding color or trimming to an object on your palette.
  • We can think of the page as a drawing board, and when our element position does not change and some shape or color changes, that element causes a redraw.

  • For example… I changed the radius of my avatar’s border, so it didn’t change its position. Naturally, I just redrew it and didn’t rearrange it (more on that below).
  • Give some examples of redrawing
    • The element color changes
    • The background color of the element changes
    • Element border radius changes
    • Element shadow change
  • If you really don’t know which styles are redrawn you can see this website CSS Triggers

  • This site has a lot of introductions and elements, like this oneborder-top-left-radiusTop left border radius it says: no geometry changes will be triggered, which is good. But because it’s a visual property, it leads topaintingTo happen.paintingIs usually a very expensive operation, so you should be careful.
  • So a change like this that doesn’t change position or affect anything else is a redraw.

🚦 rearrangement

  • heavy rowAs the name implies, rearrange. You can also say that by adding a few characters or objects to the drawing board, other objects are in a different position, and the entire page is different and needs to be rearranged.
  • Of course we can also use the page as a drawing board, when we change the width, height, left margin, right margin of an element, as long as it affects other elements, it is considered to cause a rearrangement.

  • For example… I made the avatar wider, which obviously changed the layout of the page, and you can see that my name is squeezed out at the end.
  • Give some examples of rearrangements
    • Add and remove DOM elements
    • Change element position
    • The height, width and size of the element change
    • The browser window size changes
    • The contents of the container become less variable
  • If you still don’t know which ones are rearranged you can also look at the website above.

  • Take this toowidthFor example, it says changewidthIt changes the geometry of the element. This means that it can affect the position or size of other elements on the page, both of which require the browser to dolayoutOperation. Then thislayoutThe operation essentially rearranges us.
  • Each of these relayouts can have a huge impact on the page, and you can’t see it from just one element, but imagine how many elements are changed and how each element affects the other.

🛫 the relationship between redrawing and rearrangement

  • Here’s a sentence you’ve heard so bad:Redraw does not necessarily rearrange, rearrange will redraw.
  • Ah… Indeed, when we draw, if we color one item it doesn’t affect the rest of the layout. If we have to re-add one item between the items on the palette, it not only changes the layout but also makes it necessary to re-draw the other items.
  • That’s what it means, and it’s the same thing on a web page as long as you change the size of the element and the position and so onrearrangementThen it must cause redrawing, so the question is:Can absolutely positioned elements change size and displacement to cause rearrangement?
  • I’ve been thinking about this for a long time. Let me give you my opinion: We all know that an element that is absolutely positioned is out of the document stream, so if we change the position of an element that is not out of the document stream, it will inevitably cause rearrangement. Since it is out of the document stream, it is not the page’s business.
  • So it’s likeThe floating elementandAbsolute location elementtheseOut of the document flowThe element changes the width and so onI’ve redrawn and rearranged myselfwhileIt didn’t cause the entire page to be rearranged“, maybe I am not very accurate, this is also my own view, if you have different views can point out in the comments section of 🚘

🛬 How to optimize

  • Now that we know that rearranging and redrawing can affect page performance, how can we optimize performance?
  1. Use out of document flow: As we said above, useOut of the document flowThis effectively reduces reordering, and his changes do not affect other elements of the page.
  2. Style set changes: Dynamically changing the style of an element we make as few changes as possible to its single style, change it all at once, give it a class name change once.
  3. Elemental disappearance: When we change or addDOMNode, first set the element toDisplay: noneThen the page layout and other operations; Set the element toDisplay: block,This only causes two redraws and rearrangements, because when we setdisplay:noneElements will not appear in the render tree, and subsequent operations will not trigger rearrangements or redraws.
  4. Try not to use tables: When we usetableWhen he may be very small a small change will cause the wholetableRelayout.

👋 is at the end

  • Ok, this time a simple summary of the difference between redrawing and rearrangement, I hope to help students in need.
  • If you feel this article is helpful to your words might as well 🍉 attention + like + favorites + comments + forward 🍉 support yo ~~😛

🌅 past wonderful

Fix echarts map rotation highlighting ⚡

How hard is style naming? Discussion on BEM naming conventions ⚡

How to elegantly write component examples using Vuepress (1) 👈

How to elegantly write component examples using Vuepress (below) 👈