Nowości w Chrome 60

Pete LePage

  • Interfejs Paint Timing API umożliwia pomiar czasu do pierwszego wyrenderowania i czasu do pierwszego wyrenderowania treści za pomocą interfejsu Paint Timings.
  • font-display pozwala kontrolować sposób renderowania czcionek przed ich pobraniem.
  • WebAssembly jest dostępny
  • A jest to wiele innych!

Chcesz zobaczyć pełną listę zmian? Sprawdź listę zmian repozytorium źródłowego Chromium.

Nazywam się Pete LePage. Zobaczmy, co nowego dla deweloperów w Chrome 60.

Interfejs Paint Times API

Gdy użytkownik wchodzi na stronę internetową, oczekuje wskazówek wizualnych, aby upewnić się, że wszystko działa prawidłowo. Dzięki nowemu interfejsowi paint Timings API możemy teraz to mierzyć.

Interfejs API udostępnia 2 wskaźniki:

  • Czas do pierwszego wyrenderowania – oznacza moment, w którym przeglądarka zaczyna coś renderować, czyli pierwszy fragment treści na ekranie.
  • Czas do pierwszego wyrenderowania treści – oznacza moment, w którym przeglądarka renderuje pierwszy bit treści z DOM, tekstu, obrazu itp.

Przeczytaj artykuł o wykorzystywaniu danych o wydajności, które mają największy wpływ na wrażenia użytkowników, aby dowiedzieć się, jak możesz śledzić te dane i jak wykorzystać je do poprawy komfortu korzystania z aplikacji.

Właściwość CSS font-display

Czcionki internetowe umożliwiają stosowanie bogatej typografii. Jeśli jednak użytkownik nie ma jeszcze czcionki, trzeba ją pobrać, co może spowodować spowolnienie działania witryny.

Na szczęście większość przeglądarek korzysta z kreacji zastępczych, jeśli pobieranie czcionki za długo trwa. Nowa właściwość font-display umożliwia kontrolowanie sposobu renderowania czcionki do pobrania przed jej pełnym wczytaniem.

  • auto używa dowolnej strategii wyświetlania czcionek używanej przez klienta użytkownika.
  • block ustawia dla kroju czcionki krótki okres bloku i nieskończony okres zamiany.
  • swap ustawia dla kroju czcionki 0-sekundowy okres bloku i okres nieskończonego zamiany.
  • fallback ustawia dla kroju czcionki bardzo krótki okres blokowy i krótki okres zamiany.
  • optional ustawia dla kroju czcionki bardzo krótki okres blokowy i 0-sekundowy okres zamiany.

Jest ona obsługiwana w przeglądarkach Chrome 60 i Opera, a prace nad nią pracujemy w Firefoksie. Więcej informacji znajdziesz w artykule o kontrolowaniu wydajności czcionek za pomocą font-display.

WebAssembly

Web Assembly, czyli Wasm, to nowy sposób uruchamiania kodu napisany w językach takich jak C i C++ w internecie, z niemal szybkością natywną.

Zapewnia szybkość niezbędną do stworzenia edytora wideo w przeglądarce lub uruchomienia gry na Unity z dużą liczbą klatek przy użyciu istniejących, opartych na standardach internetowych interfejsów API.

Więcej informacji znajdziesz na stronie webassembly.org, w tym prezentacje, dokumenty i wskazówki, jak zacząć.

…i wiele innych.

  • Nowy interfejs Web Budget API umożliwia witrynom z uprawnieniami powiadomień push wysyłanie ograniczonej liczby wiadomości push, które uruchamiają działania w tle, na przykład synchronizowanie danych lub zamykanie powiadomień, bez konieczności wyświetlania powiadomień widocznych dla użytkowników.
  • Usługa PushSubscription.expirationTime jest teraz dostępna. Witryny są powiadamiane o wygaśnięciu subskrypcji i o tym, czy i kiedy.
  • Obsługiwane są teraz właściwości przesłania i rozproszenia obiektów, które ułatwiają scalanie i tworzenie płytkich klonów oraz implementowanie różnych stałych wzorców obiektów.

Uwaga: interfejs Payment Request API został przekazany do Chrome 61.

To tylko niektóre ze zmian w Chrome 60 dla deweloperów.

Potem zasubskrybuj nasz kanał w YouTube, a za każdym razem, gdy opublikujemy nowy film, otrzymasz e-maila z powiadomieniem.

Nazywam się Pete LePage i jak tylko pojawi się Chrome 61, zajmę się tym, co nowego w Chrome.