Nieuw in Chrome 63

Pete LePage

En er is nog veel meer !

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

Wilt u de volledige lijst met wijzigingen bekijken? Bekijk de wijzigingenlijst in de Chromium-bronrepository .

Dynamische module-importen

Het importeren van JavaScript-modules is erg handig, maar het is statisch. Je kunt modules niet importeren op basis van runtime-voorwaarden.

Gelukkig verandert dat in Chrome 63 met de nieuwe dynamische importsyntaxis . Hiermee kun je dynamisch code laden in modules en scripts tijdens runtime. Je kunt het gebruiken om een ​​script alleen lazy te laden wanneer dat nodig is, wat de prestaties van je applicatie verbetert.

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

In plaats van je hele applicatie te laden wanneer de gebruiker voor het eerst je pagina bezoekt, kun je de resources pakken die je nodig hebt om in te loggen. Je initiële laadtijd is klein en razendsnel. Zodra de gebruiker zich aanmeldt, laad je de rest en ben je klaar.

Async-iteratoren en generatoren

Het schrijven van code die iteraties uitvoert met async functies kan lelijk zijn. Sterker nog, het is de kern van mijn favoriete programmeervraag tijdens een sollicitatiegesprek.

Dankzij async-generatorfuncties en het async-iteratieprotocol wordt het gebruik of de implementatie van streaminggegevensbronnen 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;
  }
}

Async-iterators kunnen worden gebruikt in for-of lussen en ook om uw eigen async-iterators te maken via async-iteratorfactory's.

Over-scrollgedrag

Scrollen is een van de meest fundamentele manieren om met een pagina te interacteren, maar bepaalde patronen kunnen lastig zijn. Bijvoorbeeld de 'tap to refresh' -functie van de browser, waarbij naar beneden vegen bovenaan de pagina een 'hard reload'-effect heeft.

Voorheen, met volledige paginavernieuwing.

Vernieuw daarna alleen de inhoud.

In sommige gevallen wil je dat gedrag misschien negeren en je eigen ervaring bieden. Dat is wat de progressieve webapp van Twitter doet: wanneer je naar beneden sleept, worden nieuwe tweets niet opnieuw geladen, maar worden ze gewoon aan de huidige weergave toegevoegd.

Chrome 63 ondersteunt nu de CSS overscroll-behavior eigenschap, waardoor u het standaard overloop-scrollgedrag van de browser eenvoudig kunt overschrijven.

U kunt het gebruiken om:

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

Wijzigingen in de gebruikersinterface voor toestemmingen

Ik ben dol op web push-meldingen, maar ik word echt gefrustreerd door het aantal sites dat toestemming vraagt ​​om een ​​pagina te laden, 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 afwees. Vanaf m63 maakt Chrome voor Android toestemmingsverzoeken modale dialoogvensters.

Onthoud dat dit niet alleen geldt voor pushmeldingen, maar voor alle verzoeken om toestemming . Als je toestemming vraagt ​​op het juiste moment en in de juiste context , hebben we ontdekt dat gebruikers tweeënhalf keer vaker toestemming geven!

En nog veel meer!

Dit zijn slechts enkele van de wijzigingen 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 apparaten van lagere kwaliteit wordt verminderd en gebruikers een betere ervaring met minder frustraties krijgen.
  • Met de Intl.PluralRules API kunt u applicaties 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. De API kan ook helpen met rangtelwoorden.

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

Ik ben Pete LePage en zodra Chrome 64 uitkomt, vertel ik u wat er nieuw is in Chrome!