Nieuw in Chrome 63

Piet LePage

En er is nog veel meer !

Ik ben Pete LePage . Laten we erin duiken en kijken wat er nieuw is voor ontwikkelaars in Chrome 63!

Wilt u de volledige lijst met wijzigingen? Bekijk de Chromium-bronrepositorywijzigingslijst .

Dynamische module-import

Het importeren van JavaScript-modules is superhandig, maar het is statisch, je kunt geen modules importeren op basis van runtime-voorwaarden.

Gelukkig verandert dat in Chrome 63, met de nieuwe dynamische importsyntaxis . Hiermee kunt u tijdens runtime code dynamisch in modules en scripts laden . Het kan worden gebruikt om een ​​script alleen lui te laden als dat nodig is, waardoor de prestaties van uw toepassing worden verbeterd.

button.addEventListener('click', event => {
  import('./dialogBox.js')
  .then(dialogBox => {
    dialogBox.open();
  })
  .catch(error => {
    /* Error handling */
  });
});

In plaats van uw hele applicatie te laden wanneer de gebruiker uw pagina voor het eerst bezoekt, kunt u de bronnen gebruiken die u nodig heeft om in te loggen. Uw initiële belasting is klein en snel. Zodra de gebruiker zich heeft aangemeld, laadt u de rest en bent u klaar om te gaan.

Asynchrone iterators en generatoren

Het schrijven van code die enige vorm van iteratie uitvoert met async functies kan lelijk zijn. In feite is dit het kernonderdeel van mijn favoriete codeervraag voor interviews.

Nu, met asynchrone generatorfuncties en het asynchrone iteratieprotocol , wordt het verbruik of de implementatie van streaming-gegevensbronnen gestroomlijnd, en wordt mijn coderingsvraag veel eenvoudiger.

async function* getChunkSizes(url) {
  const response = await fetch(url);
  const b = response.body;
  for await (const chunk of magic(b)) {
    yield chunk.length;
  }
}

Asynchrone iterators kunnen worden gebruikt in for-of lussen en ook om uw eigen aangepaste asynchrone iterators te maken via asynchrone iteratorfabrieken.

Overscroll-gedrag

Scrollen is een van de meest fundamentele manieren om met een pagina te communiceren, maar bepaalde patronen kunnen lastig zijn om mee om te gaan. De browser trekt bijvoorbeeld naar de vernieuwingsfunctie , waarbij naar beneden vegen bovenaan de pagina een harde herlaadbeurt veroorzaakt.

Voorheen, met volledige paginavernieuwing.

Vernieuw daarna alleen de inhoud.

In sommige gevallen wilt u dat gedrag misschien terzijde schuiven en uw eigen ervaring geven. Dat is wat de progressieve webapp van Twitter doet: wanneer je de pagina naar beneden haalt, in plaats van de hele pagina opnieuw te laden, worden eenvoudigweg nieuwe tweets aan de huidige weergave toegevoegd.

Chrome 63 ondersteunt nu de CSS- overscroll-behavior eigenschap, waardoor het gemakkelijk wordt om het standaard overflow-scrollgedrag van de browser te overschrijven.

Je kunt het gebruiken om:

Het beste is dat overscroll-behavior geen negatief effect heeft op de prestaties van uw pagina!

Wijzigingen in de machtigings-UI

Ik ben dol op webpushmeldingen, maar ik ben erg gefrustreerd door het aantal sites dat om toestemming vraagt ​​bij het laden van pagina's, zonder enige context - en ik ben niet de enige.

90% van alle toestemmingsverzoeken worden genegeerd of tijdelijk geblokkeerd.

In Chrome 59 zijn we begonnen dit probleem aan te pakken door een toestemming tijdelijk te blokkeren als de gebruiker het verzoek drie keer heeft afgewezen. Nu zal Chrome voor Android in m63 modale dialoogvensters voor toestemmingsverzoeken indienen.

Houd er rekening mee dat dit niet alleen voor pushmeldingen geldt, maar voor alle toestemmingsverzoeken . Als u op het juiste moment en in de juiste context toestemming vraagt, hebben we ontdekt dat de kans dat gebruikers toestemming geven tweeënhalf keer zo groot is!

En meer!

Dit zijn slechts enkele van de veranderingen in Chrome 63 voor ontwikkelaars. Er is natuurlijk nog veel meer.

  • finally is nu beschikbaar op Promise instanties en wordt aangeroepen nadat een Promise is vervuld of afgewezen.
  • De nieuwe Device Memory JavaScript API helpt u prestatiebeperkingen te begrijpen door u hints te geven over de totale hoeveelheid RAM op het apparaat van de gebruiker. U kunt uw ervaring tijdens runtime aanpassen, waardoor de complexiteit op lagere apparaten wordt verminderd, waardoor gebruikers een betere ervaring krijgen met minder frustraties.
  • Met de Intl.PluralRules API kunt u toepassingen bouwen die de meervoudsvorm van een bepaalde taal begrijpen door aan te geven welke meervoudsvorm van toepassing is op een bepaald getal en een bepaalde taal. En kan helpen met rangtelwoorden.

Zorg ervoor dat je je abonneert op ons YouTube-kanaal , zodat je een e-mailmelding ontvangt wanneer we een nieuwe video lanceren.

Ik ben Pete LePage, en zodra Chrome 64 uitkomt, ben ik hier om je te vertellen: wat er nieuw is in Chrome!