Nowości w Chrome 63

A jest to wiele innych!

Nazywam się Pete LePage. Przyjrzyjmy się, co nowego dla deweloperów w Chrome 63.

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

Dynamiczne importowanie modułów

Importowanie modułów JavaScript jest bardzo przydatne, ale jest statyczne, więc nie można importować modułów w zależności od warunków środowiska wykonawczego.

Na szczęście w Chrome 63 wprowadzono nową składnię dynamicznego importowania. Umożliwia dynamiczne wczytywanie kodu do modułów i skryptów w czasie działania. Można jej używać do leniwego ładowania skryptu tylko wtedy, gdy jest to potrzebne, co zwiększa wydajność aplikacji.

button.addEventListener('click', event => {
  import('./dialogBox.js')
  .then(dialogBox => {
    dialogBox.open();
  })
  .catch(error => {
    /* Error handling */
  });
});

Zamiast wczytywać całą aplikację, gdy użytkownik po raz pierwszy wyświetli Twoją stronę, możesz pobrać zasoby potrzebne do zalogowania się. Na początku jest ono małe i szybko krzyczy. Gdy użytkownik się zaloguje, wczytaj pozostałe pliki i gotowe.

Generatory i iteratory asynchroniczne

Pisanie kodu, który wykonuje jakiekolwiek iteracje za pomocą funkcji async, może być brzydkie. To podstawa mojego ulubionego pytania związanego z kodowaniem wywiadów.

Dzięki async generator functions i iteracji asynchronicznej protokół kodowanie i implementacja strumieniowych źródeł danych staje się uproszczone.

async function* getChunkSizes(url) {
  const response = await fetch(url);
  const b = response.body;
  for await (const chunk of magic(b)) {
    yield chunk.length;
  }
}

Ieratorów asynchronicznych można używać w pętlach for-of, a także do tworzenia własnych niestandardowych iteratorów asynchronicznych przez fabryki iteratorów asynchronicznych.

Zachowanie podczas przewijania

Przewijanie to jeden z najważniejszych sposobów interakcji ze stroną, jednak z niektórymi wzorcami może być trudno się radzić. Na przykład w przeglądarce funkcja pociągnij, aby odświeżyć: przesunięcie w dół u góry strony powoduje twarde ponowne załadowanie.

Wcześniej, z pełnym odświeżeniem strony.

Następnie odśwież tylko treść.

W niektórych przypadkach możesz zmienić to zachowanie i dostosować ustawienia do swoich potrzeb. Właśnie to robi progresywna aplikacja internetowa na Twitterze – gdy przeciągniesz w dół, zamiast odświeżać całą stronę, po prostu dodają nowe tweety do bieżącego widoku.

Chrome 63 obsługuje teraz właściwość CSS overscroll-behavior, która ułatwia zastąpienie domyślnego działania nieprzewijanego przewijania w przeglądarce.

Za jego pomocą możesz:

Co najlepsze, overscroll-behavior nie ma negatywnego wpływu na wydajność strony.

Zmiany w interfejsie uprawnień

Uwielbiam powiadomienia push w internecie, ale mnie irytuje liczba witryn, które proszą o zgodę przy wczytywaniu strony bez żadnego kontekstu i nie jestem samotna.

90% wszystkich próśb o przyznanie uprawnień jest ignorowanych lub tymczasowo blokowanych.

W Chrome w wersji 59 zaczęliśmy rozwiązywać ten problem, tymczasowo blokując uprawnienie w przypadku, gdy użytkownik 3 razy odrzuci prośbę. Teraz w wersji M63 Chrome na Androida wyświetla modalne okna dialogowe z prośbami o uprawnienia.

Pamiętaj, że dotyczy to nie tylko powiadomień push – dotyczy to wszystkich żądań uprawnień. Zauważyliśmy, że gdy poprosisz o zgodę w odpowiednim momencie i w kontekście, okazuje się, że 2,5 raza częściej udzielają oni uprawnień.

…i wiele innych.

To tylko niektóre ze zmian w Chrome 63 dla deweloperów, oczywiście jest ich znacznie więcej.

  • Metoda finally jest teraz dostępna w Promise instancjach i jest wywoływana po spełnieniu lub odrzuceniu żądania Promise.
  • Nowy interfejs Device Memory JavaScript API ułatwia zrozumienie ograniczeń wydajności, podając wskazówki dotyczące łącznej ilości pamięci RAM na urządzeniu użytkownika. Możesz dostosowywać środowisko w czasie działania aplikacji, upraszczając obsługę na słabszych urządzeniach i ułatwiając użytkownikom obsługę.
  • Interfejs API Intl.PluralRules umożliwia tworzenie aplikacji, które rozumieją liczbę mnogą w danym języku, wskazując, która forma liczby mnogiej ma zastosowanie do danej liczby i jakiego języka. Pomocne mogą być też liczby porządkowe.

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 64, zajmę się tym, co nowego w Chrome.