Polymer 1,0 dom-jeśli vs ukryty

Question

Od https://www.polymer-project.org/1.0/docs/api/dom-if

Kiedy jeśli staje falsey, opieczętowane treść jest ukryta, ale nie usuwa się z DOM. Kiedy ponownie stanie się prawdą, zawartość zostanie po prostu ponownie wyświetlona. Takie podejście jest stosowane ze względu na jego korzystną charakterystykę wydajnościową: koszt tworzenia zawartości szablonu jest płatny tylko raz i leniwie.

Myślałem, że to zachowanie atrybutu hidden, więc hidden jest tańsze niż dom-if ponieważ szablon nie dostanie restamped z hidden. Ponieważ ustawienie "no restamp" jest domyślnym dom-if, jaka jest różnica między dom-if i hidden i jak jest hidden lepsze dla wydajności? Najlepsze praktyki w zakresie polimerów wskazują, że tańsze jest stosowanie hidden.

Answer 1

moim rozumieniu jest to, że dom-if nie pieczęć aż wyrażenie staje truthy, ale po zrobieniu tak zachowuje się podobnie jak [hidden] robi. W ten sposób dom-if jest pesymistyczny [hidden], który odradza stemplowanie tak długo, jak to możliwe.

To podejście polegające na leniwym obciążeniu jest korzystne w pewnych sytuacjach, w których stemplowanie szablonu wiązałoby się z dużym nakładem zasobów. Na przykład, jeśli szablon był bardzo duży z wieloma niestandardowymi komponentami, które należy zainicjować. Gdybyś użył atrybutu hidden, zapłaciłbyś koszty związane z wydajnością tworzenia całego tego DOM tylko po to, aby był niewidoczny dopiero później.

Dla prostych przypadków, takich jak ukrywanie lub pokazywanie tekstu, elementu div lub dwóch, itp. Atrybut hidden może być szybszy, ponieważ koszt utworzenia tych elementów, a następnie ich ukrycia może być mniejszy niż utworzenie instancji <template> do przechowywania Twój kod, Polymer ustawiający nasłuchiści, aby monitorować wyrażenie dla prawdy, a następnie, gdy staje się to prawdą, cały narzut związany z tłoczeniem szablonu, analizowaniem go pod kątem wiążących wyrażeń itp. Jest to szczególnie prawdziwe w przypadku przeglądarek, w których obsługa języków jest polyfilowana.

Przemyślenie całej sytuacji (i idealne sprawdzenie jej) jest najlepszą drogą do podjęcia. Często różnice mogą być nieistotne, ale należy zachować szczególną ostrożność, jeśli ta część kodu znajduje się w dom-repeat z wieloma przedmiotami lub cokolwiek, co zdarza się często. Różnica może się sumować.

Answer 2

Ukryte koliduje z właściwością CSS display, a zatem dom-if jest lepszym rozwiązaniem.

Jeśli masz

:host {display: block;} 

ustawienie hidden na elemencie elementy gospodarza nie ukryje go. byłoby Trzeba także dodać styl globalny jak

[hidden] { display: none !important;} 

aby pracować niezawodnie (i aby to działało w IE9, która nie obsługuje hidden AFAIR).