Neu in Chrome 64

Powered by Google Translate

Und es gibt plenty more !

Ich bin Pete LePage. Sehen wir uns an, was für Entwickler in Chrome 64 neu ist!

ResizeObserver

Das Nachverfolgen, wenn sich die Größe eines Elements ändert, kann ein wenig schmerzhaft sein. Wahrscheinlich verbinden Sie einen Listener mit dem resize Ereignis des Dokuments und resize dann getBoundingClientRect oder getComputedStyle . Aber beide können Layout-Thrashing verursachen.

Und was, wenn das Browserfenster nicht die Größe ändert, sondern ein neues Element zum Dokument hinzugefügt wurde? Oder du hast display: none zu einem Element hinzugefügt? Beide können die Größe anderer Elemente innerhalb der Seite ändern.

ResizeObserver benachrichtigt Sie, wenn sich die Größe eines Elements ändert, und bietet die neue Höhe und Breite des Elements, wodurch das Risiko von Layout-Thrashing verringert wird.

Wie bei anderen Beobachtern ist es ziemlich einfach, ein ResizeObserver Objekt zu erstellen und einen Callback an den Konstruktor zu übergeben. Der Callback erhält ein Array von ResizeOberverEntries - ein Eintrag pro beobachtetem Element -, das die neuen Dimensionen für das Element enthält.

const ro = new ResizeObserver( entries => {
  for (const entry of entries) {
    const cr = entry.contentRect;
    console.log('Element:', entry.target);
    console.log(`Element size: ${cr.width}px × ${cr.height}px`);
    console.log(`Element padding: ${cr.top}px ; ${cr.left}px`);
  }
});

// Observe one or multiple elements
ro.observe(someElement);

Weitere Einzelheiten und Beispiele aus der ResizeObserver: It's like document.onresize for Elements Sie unter ResizeObserver: It's like document.onresize for Elements .

Ich hasse Tab-Unders. Sie kennen sie, wenn eine Seite ein Pop-up zu einem Ziel öffnet UND die Seite navigiert. Normalerweise ist einer von ihnen eine Anzeige oder etwas, das Sie nicht wollten.

Ab Chrome 64 werden diese Navigationsarten blockiert, und Chrome zeigt dem Benutzer eine native Benutzeroberfläche an, mit der diese der Weiterleitung folgen können, wenn sie dies wünschen.

import.meta

Wenn Sie JavaScript-Module schreiben, möchten Sie oft auf hostspezifische Metadaten über das aktuelle Modul zugreifen. Chrome 64 unterstützt jetzt die import.meta Eigenschaft in Modulen und macht die URL für das Modul als import.meta.url .

Dies ist sehr hilfreich, wenn Sie Ressourcen relativ zur Moduldatei im Gegensatz zum aktuellen HTML-Dokument auflösen möchten.

und mehr!

Dies sind nur einige der Änderungen in Chrome 64 für Entwickler, natürlich gibt es noch viel mehr.

  • Chrome unterstützt nun named captures und Unicode property escapes in regulären Ausdrücken.
  • Der voreingestellte preload Wert für <audio> und <video> Elemente lautet jetzt metadata . Dies bringt Chrome in Einklang mit anderen Browsern und hilft, die Bandbreite und die Ressourcennutzung zu reduzieren, indem nur die Metadaten und nicht die Medien selbst geladen werden.
  • Sie können jetzt Request.prototype.cache , um den Cache-Modus eines Request und zu bestimmen, ob es sich bei einer Anforderung um eine Request handelt.
  • Mit der Focus-Management-API können Sie jetzt ein Element fokussieren, ohne mit dem preventScroll Attribut zu scrollen.

window.alert()

Oh, und noch eins! Das ist zwar kein "Entwickler-Feature", aber es macht mich glücklich. window.alert() bringt keine Hintergrund-Registerkarte mehr in den Vordergrund! Stattdessen wird die Warnung angezeigt, wenn der Benutzer zu dieser Registerkarte zurückwechselt.

Kein zufälliges Wechseln mehr, weil etwas window.alert auf mich abgefeuert hat. Ich sehe dir den alten Google Kalender an.

subscribe Sie darauf, subscribe zu unseren YouTube channel , und Sie erhalten eine E-Mail-Benachrichtigung, wenn wir ein neues Video starten, oder fügen Sie unsere RSS feed zu Ihrem Feed-Reader.

Ich bin Pete LePage, und sobald Chrome 65 veröffentlicht wird, bin ich hier, um Ihnen zu sagen, was ist neu in Chrome!

rss_feed Subscribe to our RSS or Atom feed and get the latest updates in your favorite feed reader!