Nowości w Chrome 77

Pete LePage

Wdrażamy Chrome 77.

Jestem Pete LePage. Przyjrzyjmy się nowościom dla programistów w Chrome 77.

największe wyrenderowanie treści

Zrozumienie i zmierzenie rzeczywistej skuteczności witryny może być trudne. Dane takie jak load czy DOMContentLoaded nie informują o tym, co użytkownik widzi na ekranie. Pierwsze wyrenderowanie i pierwsze wyrenderowanie treści rejestrują tylko początek materiału. Pierwsze wyrenderowanie elementu znaczącego jest lepsze, ale jest złożone, a czasem błędne.

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

Aby zmierzyć największe wyrenderowanie treści, musisz użyć obserwatora wydajności i wyszukać zdarzenia 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ę etapowo, więc może się zdarzyć, że zmieni się jej największy element. Dlatego należy raportować do usługi analitycznej 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);

Phil na stronie web.dev napisał świetnego posta na temat największego wyrenderowania treści.

Nowe funkcje Formularzy

Wielu programistów tworzy niestandardowe elementy sterujące formularza, aby dostosować wygląd i działanie dotychczasowych elementów lub utworzyć nowe elementy sterujące, które nie są wbudowane w przeglądarkę. Zwykle wymaga to użycia JavaScriptu i ukrytych elementów <input>, ale nie jest to rozwiązanie doskonałe.

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

Zdarzenie formdata

Zdarzenie formdata to interfejs API niskiego poziomu, który umożliwia udział w przesłaniu formularza dowolnemu kodowi JavaScript. Aby go używać, dodaj detektor zdarzeń formdata do formularza, z którego chcesz korzystać.

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

Gdy użytkownik kliknie przycisk przesyłania, formularz wywoła zdarzenie formdata zawierające obiekt FormData przechowujący wszystkie przesyłane dane. Następnie w module obsługi zdarzeń formdata możesz zaktualizować lub zmodyfikować formdata przed przesłaniem.

Elementy niestandardowe powiązane z formularzem

Elementy niestandardowe powiązane z formularzem pomagają wypełnić lukę między elementami niestandardowymi a natywnymi elementami sterującymi. Dodanie statycznej właściwości formAssociated informuje przeglądarkę, że ma traktować element niestandardowy jak wszystkie inne elementy formularza. Dodaj też typowe właściwości, które można znaleźć w elementach wejściowych, np. name, value i validity, aby zapewnić spójność z natywnymi ustawieniami.

class MyCounter extends HTMLElement {
  static formAssociated = true;

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

Więcej informacji znajdziesz na stronie web.dev w sekcji Ulepszone elementy sterujące formularzy.

Natywne leniwe ładowanie

Nie wiem, dlaczego w ostatnim filmie umknęło leniwe ładowanie natywnego ekranu. To niesamowite, więc włączę to teraz. Leniwe ładowanie to technika, która pozwala odroczyć ładowanie zasobów niekrytycznych, np. zasobów <img> lub <iframe> niewyświetlających się na ekranie, do momentu, gdy będą potrzebne. Zwiększy to wydajność strony.

Od wersji Chrome 76 przeglądarka obsługuje leniwe ładowanie bez konieczności pisania niestandardowego kodu leniwego ładowania lub używania osobnej biblioteki JavaScript.

Aby poinformować przeglądarkę, że chcesz użyć obrazu, lub leniwego ładowania elementu iframe, użyj atrybutu loading="lazy". Obrazy i elementy iframe, które znajdują się w części strony widocznej na ekranie, są wczytywane normalnie. Te, które znajdują się poniżej, są pobierane tylko wtedy, gdy użytkownik przewija stronę w ich pobliżu.

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

Więcej informacji znajdziesz w artykule Leniwe ładowanie stron internetowych na poziomie przeglądarki na web.dev.

Chrome Dev Summit 2019

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

To świetna okazja, aby poznać najnowsze narzędzia i aktualizacje nad platformą internetową, a także posłuchać wykładów prosto od zespołu inżynierów Chrome.

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

…i wiele innych.

To tylko niektóre z zmian wprowadzonych w Chrome 77 dla deweloperów, a oczywiście jest ich jeszcze więcej.

Interfejs Contact Picker API, dostępny w ramach wersji próbnej origin, to nowy selektor na żądanie, który umożliwia użytkownikom wybranie wpisów z listy kontaktów i udostępnienie witrynie ograniczonych informacji o wybranych kontaktach.

W interfejsie API intl.NumberFormat pojawiły się też nowe jednostki miary.

Więcej informacji

To tylko niektóre z najważniejszych kwestii. Kliknij poniższe linki, aby dowiedzieć się więcej o zmianach w Chrome 77.

Subskrybuj

Jeśli chcesz być na bieżąco z naszymi filmami, zasubskrybuj kanał w YouTube dla deweloperów Chrome, aby otrzymywać e-maile z powiadomieniami o każdej publikacji nowego filmu.

Jestem Pete LePage i jak tylko pojawi się Chrome 78, dam Ci znać, co nowego w Chrome.