- Chrome 63 umożliwia dynamiczne importowanie modułów JavaScript.
- Moje ulubione pytania służące do kodowania wywiadów nabierają gotowego formatu dzięki asynchronicznym iteratorom i generatorom.
- Możesz zastąpić domyślne działanie przeglądarki w trybie przewijania nadmiarowego za pomocą właściwości CSS
overscroll-behavior
. - Zmieniliśmy też sposób, w jaki użytkownicy są proszeni o prośby o zgodę
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:
- Anuluj łańcuch przewijania
- Wyłączanie lub dostosowywanie działania „przeciągnij, by odświeżyć”
- Wyłączanie efektów pasma gumowego na iOS
- Dodaj nawigację przesuwaną
- I wiele innych…
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 wPromise
instancjach i jest wywoływana po spełnieniu lub odrzuceniu żądaniaPromise
. - 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.