57 lines
3.8 KiB
Markdown
57 lines
3.8 KiB
Markdown
## Réduire l'overdraw
|
||
|
||
### Identifiants
|
||
|
||
// TODO
|
||
|
||
### Catégories
|
||
|
||
| Cycle de vie | Tiers | Responsable |
|
||
|:---------:|:----:|:----:|
|
||
| 3. Réalisation (fabrication / développement) | Utilisateur/Terminal | Architecte Logiciel/Développeur |
|
||
|
||
### Indications
|
||
|
||
| Degré de priorité | Mise en oeuvre | Impact écologique |
|
||
|:-------------------:|:-------------------------:|:---------------------:|
|
||
| 4 | 4 | 4 |
|
||
|
||
|Ressources Economisées |
|
||
|:----------------------------------------------------------:|
|
||
| Processeur |
|
||
|
||
### Description
|
||
|
||
Un pixel a l'écran peut être dessiné ("Draw") plusieurs fois durant le processus chargé d'afficher l'interface exacte à l'écran. Le fait de redessiner plusieurs fois un pixel est appelé "Overdraw". Pour réduire le nombre de Redraw et ainsi soulager le processeur, il convient d'éviter ce genre de pratique :
|
||
* Ajouter un fond a un layout via la propriété `background` si celui-ci est ensuite recouvert complétement par ses enfants.
|
||
* Réduire l'imbrication de layout. Par exemple utiliser un `ConstraintLayout` plutôt que plusieurs `LinearLayout` imbriqués permet d'éviter ce genre de situation.
|
||
* Réduire le nombre de composants utilisant la transparence (propriété `alpha`). En effet, pour afficher un pixel en appliquant une valeur d'alpha, le processeur dessine d'abord le pixel sans alpha, avant de redessiner le pixel en appliquant le bon calcul pour la couleur.
|
||
|
||
|
||
### Exemple
|
||
|
||
* Pour afficher un texte en gris, plutôt que de définir la couleur de la `TextView` en noir, et de lui appliquer un alpha
|
||
|
||
For example, you can get gray text by drawing black text in a TextView with a translucent alpha value set on it. However, you can get the same effect with better performance by drawing the text in gray.
|
||
|
||
|
||
A pixel on the screen can be drawn multiple times during the process of showing the exact layout of the UI in a frame, These multiple draws on pixel called as overdraw, represented in four stages which are 1x, 2x, 3x and 4x. It doesn’t mean that x number of nested view groups will cause x number of overdraws. In other words, we may have a complicated nested view group, but there may be no overdraws at all. It is not about the nested view groups but the pixel that is used to draw the UI element. If a pixel is drawn for the first time we call it a “true color”, if the same pixel is drawn the second time, it is called as 1x overdraw. As many times as a pixel has drawn on top of an existing pixel, that many overdraws are made. So drawing it 1 time after the original drawing means the UI has 1x overdraws, 2 times means 2x overdraws and so on. Overdraw is unavoidable sometimes, but it has to be kept at a minimum.
|
||
|
||
Le repaint est le changement d’apparence d’un élément du DOM (Document Object Model), tandis que le reflow est le changement/recalcul de la position des éléments dans le DOM. Ces deux opérations sont coûteuses en ressources, notamment en cycles CPU : il faut donc éviter de les déclencher.
|
||
|
||
### Exemple
|
||
|
||
Pour éviter les repaint, ne pas modifier les propriétés stylistiques d’un élément (couleur de fond, style de bordure, couleur du texte, taille, etc.).
|
||
|
||
Pour éviter les reflow, limiter les changements de propriétés de position, de dimension, de type de positionnement, de contenu, etc. Cette suggestion est notamment valable pour certains éléments HTML tels que les tables, dont le reflow peut nécessiter jusqu’à trois fois plus de temps qu’un élément équivalent avec un block display.
|
||
|
||
Pour aller plus loin :
|
||
https://developers.google.com/speed/articles/reflow
|
||
|
||
|
||
### Principe de validation
|
||
|
||
| Le nombre ... | est inférieur ou égal à |
|
||
|-------------------|:-------------------------:|
|
||
| de modifications n'affectant pas le layout et occasionnant un repaint (ex: color, background, visibility) | 1 |
|