Co to jest DOM reflow?

Czytałem o różnicy między dwoma właściwościami css display:none i visibility:hidden i napotkałem Dom reflow term.

Wypowiedź była

display: none powoduje, że DOM reflow gdzie jest visibility: hidden NIE.

Więc moje pytanie brzmi:

Co to jest DOM reflow i jak to działa?

Author: eirenaios, 2014-12-24
Source

3 answers

A reflow oblicza układ strony. Przepływ na elemencie rekomplikuje wymiary i położenie elementu, a także uruchamia dalsze przepływy na dzieciach tego elementu, przodkach i elementach, które pojawiają się po nim w DOM. Potem nazywa się ostateczne przemalowanie. Ponowne napełnianie jest bardzo kosztowne, ale niestety można je łatwo uruchomić.

Reflow występuje, gdy:

  • Wstaw, Usuń lub zaktualizuj element w DOM
  • modyfikuj zawartość strony, np. tekst w polu wprowadzania
  • przenieś element DOM
  • Animacja elementu DOM
  • wykonaj pomiary elementów takich jak offsetHeight lub getComputedStyle
  • Zmień styl CSS
  • Zmień nazwę klasy elementu
  • Dodaj lub usuń arkusz stylów
  • zmiana rozmiaru okna
  • scroll

Aby uzyskać więcej informacji, zobacz tutaj: Repaints and Reflows: manipulowanie DOM odpowiedzialnie

 60
Author: Karlen Kishmiryan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-08-07 06:42:16

Reflow to nazwa procesu przeglądarki internetowej do ponownego obliczenia pozycji i geometrii elementów w dokumencie, w celu ponownego renderowania części lub całości dokumentu.

Https://developers.google.com/speed/articles/reflow

display:none Ukryj div tak, jakby {[1] } nie był renderowany, podczas gdy visibility:hidden tylko się ukrywa, ale przestrzeń jest nadal zajęta

 6
Author: Vitorino fernandes,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-12-24 12:51:33

Oznacza to, że jeśli ustawisz wartość dinamically display: none;, twoja przeglądarka przeliczy pozycje elementów DOM, jeśli visisbility: hidden; - not. Think, it ponieważ visibility: hidden; nie zmienia rozmiarów elementów w dom.

 0
Author: degr,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-12-24 12:51:35