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 został dodany 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 wyświetli użytkownikowi część natywnego interfejsu użytkownika, 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, które są specyficzne dla hosta. Chrome 64 obsługuje teraz właściwość import.meta w modułach i ujawnia 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 przepustowości i zasobów, 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.