Influence of reprinting and rearranging of browsers, browser rearranging

Influence of reprinting and rearranging of browsers, browser rearranging

After the browser downloads all the components on the page, it parses and generates two internal data structures:

1. DOM tree: indicates the Page Structure

2. shows how DOM nodes are displayed.

After DOM and the rendering tree are built, the browser starts to display (draw) page elements. When DOM changes affect the geometric attributes of elements (such as changing the border or height) the browser needs to re-calculate the geometric attributes of the element. Similarly, the geometric attributes and locations of other elements will also be affected. the browser will invalidate the affected part and reconstruct the rendering tree, this process is called "shuffling ". After the reconfiguration, the browser will re-draw the affected part to the screen. This process is called "re-painting ".

Not all DOM changes affect the geometric attributes of an element. If the background color of an evolved element does not affect its width and height, only one re-painting will occur, instead of shuffling, because the layout of elements has not changed,

Re-painting and shuffling affect the speed. Generally, the delay is long. Such operations should be minimized.

The following situations usually occur when reshuffling occurs:

1. add or delete visible DOM elements;

2. Change the element position;

3. element size changes (including margin, padding, border, and height)

4. content change (for example, text change or image replacement by another image of different sizes)

5. Page Renderer initialization;

6. Change the size of the browser window;

Based on the range and degree of change, the corresponding part of the rendering tree, which is large or small, also needs to be recalculated. Some changes will trigger the re-arrangement of the entire page: for example, when the scroll bar appears

Computing consumption is produced for each shuffling. Most browsers optimize the shuffling process through queue-based modification and batch execution. However, you may force the refresh queue and require the task to be executed immediately, retrieving layout information will refresh the queue.

A good speed-up policy for improving program response is to reduce the occurrence of repainting and rearranging operations. To reduce the number of operations, we should merge multiple modifications to the DOM and style and then process them once. Operate DOM offline, use cache, and reduce the number of accesses to local information

360 after the browser's text is scaled, how can we rearrange the text?

360 after the browser's text is scaled, the text is automatically arranged.
 
Several Methods for re-painting flash screens and methods for avoiding re-painting

2. When the level of a DisplayObject (ChildIndex) changes, it will also cause re-painting. 3. When you set the buttonMode of a Sprite/MovieClip to true, even if it is a single-Frame Animation, the re-painting will be triggered during MouseEvent. MOUSE_DOWN. Or when you set the DisplayObject level, even if the DisplayObject level does not change, Flash Player will re-paint the Display object. 4. When mouseChild is set to true and the mouse moves from object A to object B, rendering is triggered immediately when there are changes in the list that meet the conditions for triggering rendering. 5. When all Keyboard Events are triggered, rendering is immediately triggered when there are changes in the list that meet the triggering rendering conditions. 6. When you enable the display of the re-painting area in debug mode, rendering will be triggered immediately when there are changes in the display list that meet the triggering rendering conditions (ignore this -_-). In the next three cases, the system ignores the forced unlock () of the locked () object in BitmapData within the visual range of FP (). Method to avoid re-painting: 1. When a DisplayObject with an animation effect is not displayed, it is not only set to false, because re-painting will continue, here you can choose to pause the animation, or use removeChild (displayObject) to directly remove the object from the display list. 2. The display objects that do not change within the visible range will not actually be re-painted. I believe Flash itself has been optimized, that is, my Stage. stageWidth and Stage. when the stageHeight is 200, the coordinates of an object that is changed on the stage are (200,200) and the width and height are all 10. In this case, the Flash Player repainting content does not include this object, the new version of Flash Player Even closes all re-painting when the browser window is minimized. At this time, you will often find that the CPU usage drops sharply, but the application is still running. 3. When setting the DisplayObject level, make a judgment: if (myContainer. getChildIndex (myChild )! = 0) {myContainer. setChildIndex (myChild, 0);} if you are lucky, this can increase the efficiency by more than 200%. 4. When the attribute cacheAsBitmap = true is set for your Sprite/MovieClip, when a small area (or even a hidden object) in the object changes, this will cause the entire Sprite/MovieClip to be repainted. 5. Make sure that the display content of the activity is suspended in the invisible area or the display list is removed directly. The invisible area mentioned here is not only invisible outside the stage, it also includes display objects that are covered by other objects on the stage.