Nowości w Chrome 60

  • Interfejs Paint Timing API umożliwia pomiar czasu do pierwszego wyrenderowania oraz do pierwszego wyrenderowania treści za pomocą narzędzia Paint Timings AP.
  • font-display pozwala kontrolować sposób renderowania czcionek przed ich pobraniem.
  • Interfejs WebAssembly jest już dostępny
  • A jest ich wiele więcej.

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

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

Interfejs API renderowania

Użytkownik, który chce otworzyć daną stronę internetową, potrzebuje wskazówek wizualnych, aby upewnić się, że wszystko działa. Nowy interfejs API czasu renderowania pozwala nam to mierzyć.

Interfejs API udostępnia 2 wskaźniki:

  • Czas pierwszego wyrenderowania – wskazuje moment, w którym przeglądarka zaczyna renderować element, czyli pierwszy fragment treści na ekranie.
  • Czas do pierwszego wyrenderowania treści – wskazuje moment, w którym przeglądarka wyrenderuje pierwszy fragment treści z DOM, tekst, obraz itp.

Z artykułu o wykorzystywaniu danych o wydajności, które mają największy wpływ na wygodę użytkowników, dowiesz się, jak śledzić te dane i wykorzystywać je do poprawy komfortu użytkowników.

Właściwość CSS font-display

Czcionki internetowe umożliwiają stosowanie bogatej typografii. Jeśli użytkownik nie ma jeszcze kroju czcionki, trzeba ją pobrać, ponieważ może to spowolnić działanie strony.

Na szczęście większość przeglądarek korzysta z opcji kreacji zastępczej, jeśli pobieranie czcionki będzie trwało zbyt długo. Nowa właściwość font-display pozwala kontrolować sposób renderowania czcionki do pobrania przed jej pełnym wczytaniem.

  • auto wykorzystuje strategię wyświetlania czcionek stosowaną przez klienta użytkownika.
  • block nadaje kroju czcionki krótki okres bloku i nieskończony okres wymiany.
  • swap ustawia 0-sekundowy okres bloku i okres nieskończonej zamiany.
  • fallback nadaje kroju czcionki bardzo krótki okres bloku i krótki okres wymiany.
  • optional nadaje kroju czcionki bardzo mały okres bloku i okres zmiany wynoszący 0 sekund.

Funkcja ta działa w przeglądarkach Chrome 60 i Opera. Pracujemy nad przeglądarką Firefox. Więcej informacji znajdziesz w artykule Kontrolowanie wydajności czcionek za pomocą funkcji font-display.

WebAssembly

Web Assembly, czyli Wasm, to nowy sposób uruchamiania kodu w internecie napisanego w takich językach jak C i C++, z zbliżoną prędkością bezpośrednią.

Zapewnia szybkość niezbędną do opracowania edytora wideo w przeglądarce lub uruchomienia gry na platformie Unity z dużą liczbą klatek dzięki wykorzystaniu istniejących opartych na standardach interfejsów API platformy internetowej.

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

I inne funkcje

  • Nowy interfejs Web Budget API umożliwia witrynom z uprawnieniami Push Notification wysyłanie ograniczonej liczby wiadomości push, które uruchamiają działanie w tle, np. synchronizację danych lub zamykanie powiadomień, bez potrzeby wyświetlania powiadomień widocznych dla użytkowników.
  • Usługa PushSubscription.expirationTime jest teraz dostępna. Informuje witryny o wygaśnięciu subskrypcji i o jej wygaśnięciu.
  • Obsługiwane są teraz właściwości spoczynku i rozłożenia obiektów, co ułatwia scalanie i płytkie klonowanie obiektów oraz implementowanie różnych stałych wzorców obiektów.

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

To tylko kilka zmian, które wprowadziliśmy w Chrome 60 dla deweloperów.

Potem zasubskrybuj nasz kanał w YouTube, aby otrzymywać e-maile z powiadomieniami o każdej publikacji nowego filmu.

Mam na imię Pete LePage i gdy tylko Chrome 61 się ukaże, od razu Ci opowiem – co nowego w Chrome.