Nowości w Chrome 64

Pete LePage

A to nie wszystko – to dopiero początek.

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? A może dodałeś(-aś) 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 niego jest bardzo proste. Utwórz obiekt ResizeObserver i przekaż konstruktorowi funkcję wywołania zwrotnego. 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);

Aby dowiedzieć się więcej i zobaczyć praktyczne przykłady, zapoznaj się z artykułem 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, aby umożliwić mu przejście na nową stronę, jeśli zechce.

import.meta

Podczas pisania modułów JavaScripta często potrzebujesz dostępu 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 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 wiele więcej!

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”, bardzo mnie to cieszy. window.alert() nie przenosi już karty z tła na pierwszy plan. 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 każdym nowym filmie.

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