Nowości w Chrome 77

Pete LePage

Chrome 77 jest już wprowadzana.

Nazywam się Pete LePage. Porozmawiajmy o nowościach deweloperów w Chrome 77.

największe wyrenderowanie treści

Zrozumienie i pomiar 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 bywa skomplikowane i czasem błędne.

Interfejs Largest Contentful Paint API, dostępny od Chrome 77, raportuje czas renderowania największego elementu treści widocznego w widocznym obszarze i umożliwia pomiar czasu wczytywania głównej treś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 sterujące formularzy, aby dostosować wygląd i działanie istniejących elementów lub tworzyć nowe, które nie są wbudowane 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 JavaScript udział w przesyłaniu formularza. 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 uruchomi zdarzenie formdata, które zawiera obiekt FormData, w którym znajdują się 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 właściwości statycznej formAssociated informuje przeglądarkę, że ma traktować element niestandardowy tak samo jak wszystkie pozostałe 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 Więcej zaawansowanych elementów sterowania formularzem na stronie web.dev.

Natywne leniwe ładowanie

Nie wiem, dlaczego w ostatnim filmie przegapiłam natywne leniwe ładowanie. To niesamowite, więc dodaję to teraz. 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 elementy iframe w części strony widocznej na ekranie wczytują się normalnie. a te poniżej są pobierane tylko wtedy, gdy użytkownik przewinie stronę w 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

W dniach 11–12 listopada odbędzie się konferencja Chrome Dev Summit.

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 zmian, które wprowadziliśmy w Chrome 77, ale oczywiście jest ich znacznie więcej.

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 nasz kanał w YouTube dla deweloperów Chrome. Otrzymasz wtedy e-maila z powiadomieniem, gdy tylko opublikujemy nowy film.

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