CSS: Content-visiblity i native lazy loading

0:00Część tej lekcji opowiem o content wilczy

0:02bilet czyli takiej właściwości osobie która weszła do przeglądarek.

0:07Konkretnie do grona 85 naprawdę niedawno a ma bardzo szeroko idące efekty.

0:14Tutaj mam po lewej specyfikacje HTML a jest to bardzo długi dokument.

0:18Tutaj możecie zobaczyć że to jest lista numerowane i ta lista jest naprawdę sama

0:22długa to są tylko odnośniki do pojedynczych dokumentów.

0:25W związku z czym tutaj skala projektu czy skala strony jest naprawdę wysoka.

0:30Przeglądarki mają nie lada gwiazdkę.

0:33Jak to faktycznie wędrować w sposób szybki i wydajny.

0:37Tutaj nawet na moim silnym boku faktycznie czuć troszkę to krakowianie.

0:42No i wiadomo że gdyby otwierać takie strony internetowe na urządzeniach

0:46mobilnych to po prostu bardzo łatwo takie urządzenia mogą nawet

0:50przegrać czy po prostu bardzo mocno pracować.

0:53I to co robi przeglądarka no to ona stara się

0:58wygenerować tylko to co jest faktycznie wewnątrz portu a to co jest poza nim nie

1:02jest oderwane no bo po co ma być wędrować skoro i tak nie będzie tego widać.

1:07Natomiast przeglądarka i tak potrzebuje jakby struktury dokumentu aby wiedzieć

1:12który element będzie po którym i jak ma wędrować no bo jeżeli na przykład tutaj na

1:16końcu dokumentu stworzyliśmy sobie jakiegoś Diva który będzie miał

1:20pozycjonowanie absolutnie element wewnątrz siebie czyli dziecko.

1:26I ten DF będzie tutaj na samej górze.

1:29No to tak czy siak przeglądarka musi ten

1:32element na dole wręcz kierować aby ten tutaj pozycjonowania absolutnie element

1:36też się pojawił więc przeglądarka robi naprawdę bardzo dużo operacji aby

1:40wyświetlić nasze strony internetowe które my stosujemy za pomocą CSS.

1:44No i content with bilety pomaga w sytuacjach kiedy

1:48nasze treści na stronach jest tak dużo że po prostu przeglądarka nie daje rady więc

1:53są różne właściwości których możemy do tego użyć content with bilety.

1:58Generalnie uruchamiamy za pomocą właściwości o tej samej nazwie Content ID

2:03i dając tutaj wartość auto mówimy przeglądarce że OK.

2:08Elementy które nie będą w imporcie będą miały swoje dzieci czyli bezpośrednie

2:15elementy wewnątrz nich nie wędrowne tak jakby ich wysokość miała zero dzięki temu

2:20przeglądarka oszczędza faktycznie czas na generowanie.

2:24Ale jeżeli zostawimy to w ten sposób to wszystkie te elementy które są poza portem

2:29mają charakter równy zero teoretycznie no bo ponieważ jeżeli element nie ma

2:34wysokości no to teoretycznie jest pusty i pustej element miałby zero hejtu

2:40jeżeli nie ma żadnego sterowania a element poza portem już nie operuje na

2:45wartościach takich jak wysokość czy szerokość.

2:48W standardowym tego słowa znaczeniu rozumienia.

2:52Więc my możemy podpowiadać przeglądarce za

2:55pomocą drugiej właściwości CONTENT In trick jest bardzo trudna właściwość.

3:03Jakie są rozmiary tego elementu.

3:05Kiedy jest on poza sportem.

3:06Czy jeśli sobie piszemy 200 pikseli na 800

3:09pikseli no to to jest ta wiadomość o tym elemencie HTML.

3:16Którą przeglądarka może zinterpretować jeżeli faktycznie jest on poza sportem.

3:22Tutaj akurat jest on dosyć szybko bo jest to pierwsza lista numerowane.

3:27Natomiast faktycznie jest on poza sportem to te wartości

3:31pomagają przeglądarce wiedzieć kiedy powinna zacząć wędrować.

3:35Te dodatkowe elementy.

3:36Im więcej content with It z takimi wartościami sobie tutaj ustalimy.

3:40Oczywiście one powinny być jak najbardziej

3:42podobne do tych które faktycznie dany element posiada.

3:46Teoretycznie przeglądarka będzie nam szybciej pasować nasze elementy i.

3:51W przypadku takich dużych dokumentów gdzie możemy mieć problem z ilością

3:56domen cudów faktycznie content lider potrafi zwiększyć performer i zwiększyć

4:02wydajność naszej strony o rząd wielkości naprawdę naprawdę bardzo dużo.

4:08Jest to właściwość która jest.

4:11Od wersji 85.

4:13Wydaje mi się że inne przeglądarki też mają jakieś dlatego wsparcie wydaje mi się

4:17że Firefox ma jakąś pierwszą implementację tego no i oczywiście

4:23pozwoli nam to na robienie naszych stron w sposób poprawny ponieważ nie będziemy

4:28musieli już robić takich dynamicznych lodu w tekście np.

4:32Infinity Scola. Oczywiście część informacji dalej będziemy

4:35musieli czasem ironicznie doładować po prostu żeby oszczędzać dane.

4:40Ale jeśli np.

4:41chcielibyśmy mieć dalej wsparcie dla kontrolera czy komend szefa czyli tutaj

4:46wyszukiwania tekstu na naszej stronie czyli np.

4:49DD no to w przypadku jeżeli robimy Infinity Kroll i usuwamy te elementy z

4:55dołu bądź z góry portu czyli te elementy których nie ma faktycznie ich nie ma w

4:59drzewie no to takie funkcjonalności jak wyszukiwanie tekstu na stronie

5:04internetowej niestety nam przestanie działać.

5:06A skąd content with bilety te elementy dalej tam są.

5:08Dalej możemy je wyszukiwać dalej bo nie cierpi ponieważ cała treść jest do

5:14ładowane od razu poza ładowaniu witryny itd itd.

5:18Ja wam jeszcze materiał po angielsku który

5:22stara się naprawdę dogłębnie wytłumaczyć jak działa content with it.

5:26Więc to jest dobre źródło.

5:27Jeżeli chcecie poszerzyć swoją wiedzę na

5:29ten temat a jest to naprawdę potężna właściwość więc polecam.

5:33A to co możecie zrobić jeszcze jako bonus

5:35aby zwiększyć szybkość waszych stron internetowych.

5:38No to możecie co prawda już nie chce się w HTML u ustawić sobie na dowolne medium

5:43takie jak obrazek audio video czy ramkę np.

5:48frejma.

5:50Atrybut lobbing równa się LiS czyli jeśli

5:53tutaj znajdziemy jakiś obrazek wydaje mi się że akurat w tej specyfikacji jest

5:56tylko jeden i ustawiamy sobie lobbing na las.

6:01No to powie przeglądarce tyle że.

6:05W momencie kiedy ten element nie jest jeszcze w porcie nie ma sensu go ładować.

6:10Czyli tutaj w zakładce Network nie pojawiłby się ten obrazek.

6:13Dopiero jak wejdziemy na port z tym

6:15elementem to wtedy on zostanie pobrany z serwera zdalnego.

6:21Jest to o tyle fajne rozwiązanie że faktycznie nie psuje nic.

6:24W starszych przeglądarkach tak samo jak kontent.

6:29XXX czy content wizy bilety są to właściwości które jeżeli

6:33przeglądarki nie zrozumieją ich nie zrozumieją.

6:36Ale te przeglądarki które będą wspierały dostaną naprawdę duży.

6:41Performance Boost czyli dodatek do

6:44wydajności naszej strony internetowej więc jeśli pracuje się na takiej skali content.

6:50Bilety i.

6:52Wartości do tego pochodne oraz lobbing to są rzeczy które ja tutaj osobiście polecam

6:57aby optymalizować działania naszych stron internetowych.