Nowości w Chrome 64

Pete LePage

A to nie wszystko – to tylko część.

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

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

ResizeObserver

Śledzenie zmian rozmiaru elementu może być uciążliwe. Najprawdopodobniej dodasz detektor do zdarzenia resize dokumentu, a potem wywołasz metodę getBoundingClientRect lub getComputedStyle. Oba te rozwiązania mogą jednak powodować utratę wydajności układu.

A co, jeśli rozmiar okna przeglądarki się nie zmienił, ale do dokumentu dodano nowy element? Czy dodasz display: none do elementu? Oba te elementy mogą zmieniać rozmiar innych elementów na stronie.

ResizeObserver informuje o każdej zmianie rozmiaru elementu i podaje jego nową wysokość i szerokość, co zmniejsza ryzyko niestabilności układu.

Podobnie jak w przypadku innych obserwatorów, korzystanie z tego typu jest bardzo proste. Utwórz obiekt ResizeObserver i przekaż wywołanie zwrotne do konstruktora. Funkcja wywołania zwrotnego otrzyma tablicę ResizeOberverEntries (jeden wpis na każdy obserwowany element), która zawiera nowe wymiary elementu.

const ro = new ResizeObserver( entries => {
  for (const entry of entries) {
    const cr = entry.contentRect;
    console.log('Element:', entry.target);
    console.log(`Element size: ${cr.width}px × ${cr.height}px`);
    console.log(`Element padding: ${cr.top}px ; ${cr.left}px`);
  }
});

// Observe one or multiple elements
ro.observe(someElement);

Więcej informacji i przykładów znajdziesz w artykule ResizeObserver: document.onresize dla Elementów.

Nie cierpię kart pod spodem. Znasz je, gdy strona otwiera wyskakujące okienko z przekierowaniem do jakiegoś miejsca i przechodzi do tej strony. Zwykle jest to reklama lub coś, czego nie chcesz.

Od wersji 64 Chrome takie przejścia będą blokowane, a przeglądarka będzie wyświetlać użytkownikowi część natywnego interfejsu, aby umożliwić mu przejście na inną stronę, jeśli zechce.

import.meta

Podczas pisania modułów JavaScripta często potrzebny jest dostęp do metadanych dotyczących bieżącego modułu w przypadku konkretnego hosta. Chrome 64 obsługuje teraz właściwość import.meta w modułach i udostępnia adres URL modułu jako import.meta.url.

Jest to bardzo przydatne, gdy chcesz rozwiązać zasoby w powiązaniu z pliku modułu, a nie bieżącego dokumentu HTML.

I inne funkcje

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

  • Chrome obsługuje teraz nazwane uchwyty i znaki ucieczki właściwości Unicode w wyrażeniach regularnych.
  • Domyślna wartość preload dla elementów <audio> i <video> to teraz metadata. Dzięki temu Chrome będzie działać tak samo jak inne przeglądarki i pomoże zmniejszyć wykorzystanie zasobów i pasma, wczytując tylko metadane, a nie same multimedia.
  • Teraz możesz użyć Request.prototype.cache, aby wyświetlić tryb pamięci podręcznej Request i określić, czy żądanie to żądanie ponownego załadowania.
  • Dzięki interfejsowi Focus Management API możesz teraz ustawić element w centrum bez przewijania za pomocą atrybutu preventScroll.

window.alert()

Jeszcze jedno. Chociaż nie jest to „funkcja dla deweloperów”, cieszy mnie to. window.alert() nie powoduje już wyświetlania karty w tle na pierwszym planie. Zamiast tego alert będzie wyświetlany, gdy użytkownik przełączy się na tę kartę.

Nie ma już przypadkowego przełączania kart, ponieważ coś wywołało u mnie window.alert. Widzę Twój stary Kalendarz Google.

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

Nazywam się Pete LePage i zaraz po wydaniu Chrome 65 opowiem Ci, co nowego w Chrome.