Nowości w Chrome 63

Pete LePage

I wiele innych.

Mam na imię Pete LePage. Sprawdź, co nowego w Chrome 63 dla deweloperów.

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

Importy modułów dynamicznych

Importowanie modułów JavaScript jest bardzo wygodne, ale jest to rozwiązanie statyczne, ponieważ nie możesz importować modułów na podstawie warunków działania.

Na szczęście w Chrome 63 zmieniliśmy to za pomocą nowej składni importu dynamicznego. Umożliwia dynamiczne wczytywanie kodu do modułów i skryptów w czasie działania. Możesz go używać do wczytywania skryptu tylko wtedy, gdy jest to potrzebne, co poprawia 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 wejdzie na Twoją stronę, możesz pobrać zasoby potrzebne do zalogowania się. Początkowy ładunek jest niewielki i bardzo szybki. Gdy użytkownik się zaloguje, wczytaj pozostałe elementy i gotowe.

Async iterators and generators

Pisanie kodu, który wykonuje jakiekolwiek iteracje za pomocą funkcji async, może być nieestetyczne. To w istocie główna część mojego ulubionego pytania dotyczącego kodowania na rozmowie kwalifikacyjnej.

Teraz dzięki funkcjom generatora asynchronicznego i iteracji asynchronicznej protokołu, konsumpcja lub implementacja strumieniowych źródeł danych staje się bardziej płynna, a moje pytanie dotyczące kodowania staje się znacznie łatwiejsze.

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

Iteratorów asynchronicznych można używać w pętlach for-of, a także do tworzenia własnych asynchronicznych iteratorów za pomocą fabryk iteratorów asynchronicznych.

Przewijanie

Przewijanie to jeden z najbardziej podstawowych sposobów interakcji ze stroną, ale radzenia sobie z niektórymi wzorcami może być trudne. Na przykład funkcja przeciągania do odświeżenia w przeglądarce, która polega na przesunięciu palcem w dół u góry strony, powoduje pełne ponowne wczytanie.

Wcześniej, z odświeżeniem całej strony.

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

W niektórych przypadkach możesz chcieć zastąpić to zachowanie i zastosować własne. Właśnie tak działa progresywna aplikacja internetowa Twittera: gdy przewijasz w dół, zamiast wczytywać całą stronę, po prostu dodaje nowe tweety do bieżącego widoku.

Chrome 63 obsługuje teraz właściwość CSS overscroll-behavior, dzięki czemu można łatwo zastąpić domyślne zachowanie przewijania w przypadku przepełnienia.

Możesz go używać do:

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

Zmiany w interfejsie uprawnień

Uwielbiam powiadomienia push, ale irytuje mnie liczba witryn, które proszą o pozwolenie podczas wczytywania strony, bez żadnego kontekstu.

90% wszystkich próśb o uprawnienia jest ignorowanych lub tymczasowo blokowanych.

W Chrome 59 zaczęliśmy rozwiązywać ten problem, tymczasowo blokując uprawnienia, jeśli użytkownik odrzuci prośbę trzy razy. W wersji 63 m przeglądarka Chrome na Androida będzie wyświetlać prośby o uprawnienia w oknach dialogowych.

Pamiętaj, że nie dotyczy to tylko powiadomień push, ale wszystkich próśb o przyznanie uprawnień. Jeśli poprosisz o pozwolenie w odpowiednim momencie i w odpowiednim kontekście, użytkownicy będą dwa i pół razy bardziej skłonni do udzielenia Ci zgody.

I inne funkcje

To tylko kilka z wielu zmian w Chrome 63 dla deweloperów.

  • Metoda finally jest teraz dostępna w instancjach Promise i jest wywoływana po wypełnieniu lub odrzuceniu Promise.
  • Nowe Device Memory JavaScript API pomaga zrozumieć ograniczenia wydajności, podając wskazówki dotyczące łącznej ilości pamięci RAM na urządzeniu użytkownika. Możesz dostosować środowisko wykonawcze, aby zmniejszyć złożoność na mniejszych urządzeniach i zapewnić użytkownikom lepsze wrażenia i mniej frustracji.
  • Interfejs Intl.PluralRules API umożliwia tworzenie aplikacji, które rozumieją liczbę mnogą w danym języku, wskazując, która forma liczby mnogiej ma zastosowanie w przypadku danej liczby i języka. Może też pomóc w przypadku liczb porządkowych.

Zasubskrybuj nasz kanał w YouTube, aby otrzymywać e-maile z powiadomieniami o publikowaniu nowych filmów.

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