Nowości w Chrome 77

Pete LePage

Chrome 77 jest już wprowadzana.

Nazywam się Pete LePage. Zapraszam do obejrzenia nowości dla deweloperów w Chrome 77.

największe wyrenderowanie treści

Zrozumienie i zmierzenie rzeczywistej wydajności witryny może być trudne. Dane takie jak load lub DOMContentLoaded nie podają, co użytkownik widzi na ekranie. Pierwsze wyrenderowanie i Pierwsze wyrenderowanie treści rejestrują tylko początek wczytywania strony. Pierwsze wyrenderowanie elementu znaczącego jest lepsze, ale jest bardziej skomplikowane i czasami nieprawidłowe.

Interfejs Largest Contentful Paint API, dostępny od wersji Chrome 77, podaje czas renderowania największego elementu treści wyświetlanego w widocznym obszarze i umożliwia pomiar czasu wczytywania głównej zawartości strony.

Aby mierzyć największe wyrenderowanie treści, musisz użyć obserwatora wydajności i szukać zdarzeń largest-contentful-paint.

let lcp;
const po = new PerformanceObserver((eList) => {
  const e = eList.getEntries();
  const last = e[e.length - 1];
  lcp = last.renderTime || last.loadTime;
});

const poOpts = {
  type: 'largest-contentful-paint',
  buffered: true
}
po.observe(poOpts);

Strona często wczytuje się etapami, więc największy element na stronie może się zmienić. W takim przypadku do usługi analitycznej należy przesłać tylko ostatnie zdarzenie largest-contentful-paint.

addEventListener('visibilitychange', function fn() {
  const visState = document.visibilityState;
  if (lcp && visState === 'hidden') {
    sendToAnalytics({'lcp': lcp});
    removeEventListener('visibilitychange', fn, true);
  }
}, true);

Na stronie web.dev Phil opublikował świetny artykuł na temat największego wyrenderowania treści.

Nowe funkcje formularzy

Wielu deweloperów tworzy niestandardowe elementy formularza, aby dostosować wygląd i działanie istniejących elementów lub stworzyć nowe elementy, których nie ma wbudowanych w przeglądarkę. Zazwyczaj wymaga to użycia JavaScriptu i ukrytych elementów <input>, ale nie jest to idealne rozwiązanie.

2 nowe funkcje internetowe dodane w Chrome 77 ułatwiają tworzenie niestandardowych elementów sterujących w formularzach i usuwają wiele dotychczasowych ograniczeń.

Zdarzenie formdata

Zdarzenie formdata to interfejs API niskiego poziomu, który umożliwia dowolnemu kodom JavaScriptu przesyłanie formularzy. Aby go użyć, dodaj do formularza, z którym chcesz wchodzić w interakcje, odbiornik zdarzeń formdata.

const form = document.querySelector('form');
form.addEventListener('formdata', ({formData}) => {
  formData.append('my-input', myInputValue);
});

Gdy użytkownik kliknie przycisk przesyłania, formularz uruchamia zdarzenie formdata, które zawiera obiekt FormData zawierający wszystkie przesyłane dane. Następnie w obiekcie funkcji formdata możesz zaktualizować lub zmodyfikować zdarzenie formdata, zanim zostanie ono przesłane.

Elementy niestandardowe powiązane z formularzem

Elementy niestandardowe powiązane z formularzem pomagają wypełnić lukę między elementami niestandardowymi a elementami natywnymi. Dodanie statycznej właściwości formAssociated powoduje, że przeglądarka traktuje element niestandardowy jak wszystkie inne elementy formularza. Aby zapewnić spójność z elementami natywnymi, dodaj też typowe właściwości występujące w elementach wejściowych, takie jak name, value i validity.

class MyCounter extends HTMLElement {
  static formAssociated = true;

  constructor() {
    super();
    this._internals = this.attachInternals();
    this._value = 0;
  }
  ...
}

Więcej informacji znajdziesz w artykule Bardziej zaawansowane elementy sterujące formularzem na stronie web.dev.

Natywne leniwe ładowanie

Nie wiem, jak mogłem przeoczyć natywny wczytywanie opóźnione w moim ostatnim filmie. To naprawdę świetny film, więc go załączam. Lazy loading to technika, która pozwala opóźnić wczytywanie nieistotnych zasobów, takich jak elementy <img> lub <iframe>, które nie są widoczne na ekranie, do momentu, gdy będą potrzebne, co zwiększa wydajność strony.

Od wersji 76 przeglądarka samodzielnie obsługuje opóźnione wczytywanie, bez konieczności pisania niestandardowego kodu opóźnionego wczytywania ani używania osobnej biblioteki JavaScript.

Aby poinformować przeglądarkę, że chcesz obraz lub iframe wczytywane z opóźnieniem, użyj atrybutu loading="lazy". Obrazy i ramki iframe, które znajdują się „nad obszarem roboczym”, wczytują się normalnie. Te, które są poniżej, są pobierane tylko wtedy, gdy użytkownik przewinie ekran w ich pobliżu.

<img src="image.jpg" loading="lazy" width="400" height="250" alt="...">

Więcej informacji znajdziesz w artykule Leniwe wczytywanie na poziomie przeglądarki na stronie web.dev.

Chrome Dev Summit 2019

Konferencja Chrome Dev Summit odbędzie się 11 i 12 listopada.

To świetna okazja, aby dowiedzieć się więcej o najnowszych narzędziach i aktualizacjach platformy internetowej oraz poznać opinie zespołu inżynierów Chrome.

Transmisja na żywo będzie dostępna na naszym kanale w YouTube. Jeśli chcesz wziąć udział osobiście, możesz poprosić o zaproszenie na stronie Chrome Dev Summit 2019.

I inne funkcje

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

Interfejs Contact Picker API, dostępny w ramach próbnej wersji źródłowej, to nowy selektor na żądanie, który umożliwia użytkownikom wybieranie pozycji na liście kontaktów i udostępnianie ograniczonych informacji o wybranych kontaktach witrynie.

Dodaliśmy też nowe jednostki miary do interfejsu intl.NumberFormat API.

Więcej informacji

Obejmuje to tylko niektóre najważniejsze informacje. Aby dowiedzieć się więcej o dodatkowych zmianach w Chrome 77, kliknij linki poniżej.

Subskrybuj

Jeśli chcesz być na bieżąco z naszych filmów, zasubskrybuj kanał YouTube dla programistów Chrome. Otrzymasz wtedy e-maila z powiadomieniem, gdy opublikujemy nowy film.

Nazywam się Pete LePage i zaraz po wydaniu Chrome 78 opowiem Ci, co nowego w tej wersji przeglądarki.