Rendering Optimization
- Minimize reflow
The purpose of Rendering Optimization
The goal of rendering optimization is reducing use of memory and responding user action fast on 60fps.
Browsers processes these steps from JS execution to render. Some steps could be skipped depends on which property you change. Rendering Optimization is reducing execution time of each steps.
Javascript
This is a execution phase of Javascript code. Once user clicks a button, Javascript function is invoked and it modifies UI by changing CSS property or adding css class. This phase is illustrates the period from user action to the end of execution.
https://developers.google.com/web/fundamentals/performance/rendering/optimize-javascript-execution
Style
At Style phase, CSS recalculation happens and consists of 2 steps to do so. First, CSS engine matches and finds CSS selectors corresponding to JS execution. Suppose you add CSS class `.modal--open` from JS. Browser starts finding newly added class from your CSS files and applying new class. And Second is constructing RenderStyle.
At the time of writing, roughly 50% of the time used to calculate the computed style for an element is used to match selectors, and the other half of the time is used for constructing the RenderStyle (computed style representation) from the matched rules. Matching selectors to figure out exactly which elements need to have the style recalculated and then do a full match is probably too expensive too.
We landed on using what we call descendant invalidation sets to store meta-data about selectors and use those sets in a process called style invalidation to decide which elements need to have their computed styles recalculated.
To improve this phase, reduce the time of matching selectors. In order to accomplish it, we need to reduce the number of selectors to set a rule.
div span:nth-last-child(1) {}
.modal {}
| Term | Description |
|---|---|
| First Invalidated | Showing the file to make style change happen |
| Elements Affetcted | The number of elements to be recalculated |
Layout (Reflow)
After browser recognizes the new style rule, it starts calculating the positions of each elements on screen. It does layouting
個々の要素は、使用された CSS、要素の内容、親要素に基づく明示的または暗黙的なサイジング情報を持ちます。 このプロセスは、Chrome、Opera、Safari、および Internet Explorer では、レイアウトと呼ばれます。 Firefox ではリフローと呼ばれますが、実質上は同じプロセスです。
Layout is where stores the information of the size and position of elements.
We have to consider two things on layout (reflow) phase.
The number of elements to be layout
The complexity of layout
The solution
- Avoid Layout (Reflow)
- Use flexbox instead of flow based layout
- Avoid forcing layout
Avoid Layout (Reflow)
.box {
width: 0px;
height: 0px;
}
.box--open {
width: 120px;
height: 120px;
}
This kind of modification (adding class to expand width) requires a lot of things. First it has be calculated again and check new layout on whole document.
Use flexbox instead of float based layout
flexbox is better performance than float based (float: left, right or position: absolute) layout.
Avoid forcing layout
Paint
Once it finished calculation of layout, it is time to paint text, color, image, line, shadow etc to screen.
Composite
It is almost finished but it is important stack each layer on proper order. This composite phase takes care of stacking order of each layer.
