Neue Entwicklungen auf der Webplattform, die Entwickler im Jahr 2022 nicht verpassen dürfen

Vom 11. bis 12. Mai veranstaltete Google die Google I/O Global Developer Conference 2022. Auf der Konferenz informierten uns Jake Archibald und Una Kravet über die neuesten Entwicklungen bei Webplattformen. Werfen wir einen Blick auf die Neuerungen auf der Webplattform im Jahr 2022!

In diesem Artikel geht es um neue Funktionen in Bereichen wie Datenschutz und Sicherheit, Leistung, UI-Design, Leistung und Kernmetriken sowie einige neue CSS- und JavaScript-Funktionen zur Verbesserung der Entwicklertools.

1. UI-Funktionen

1. Akzentfarbe

Wir schreiben das Jahr 2022, warum ist es immer noch so schwierig, Dropdown-Menüs und Kontrollkästchen zu gestalten? Die CSS-Eigenschaft accent-color kann dieses Problem leicht lösen. accent-color 属性就可以轻松解决这个问题。

使用该属性，可以轻松更改以前难以访问的表单控件的主题颜色，例如复选框、单选按钮、范围控件和进度条等。

在一行 CSS 中，accent-color 使浏览器能够根据开发人员设置的背景来确定前景色，并且还可以与 color-scheme 属性一起为浅色和深色主题提供一些不错的自动调整。使用下面的代码片段，浏览器会自动创建明暗模式，并为表单控件使用 magenta 强调色。

该属性正在所有现代 Web 引擎中变得稳定。这包括为 Chrome、Edge、Opera、Safari、Firefox。

2. <dialog></dialog>

HTML dialog 是一个全新的开箱即用的 HTML 对话框元素。

通过这个元素可以轻松创建一个对话框，例如警报或提示。当将其添加到页面时，它开始是隐藏的，当使用 showModal 方法来展示它时，它会弹出来：

<dialog id="dialog">
  hello world!
</dialog>

<script>
  someBotton.onclick = () => {
    const dialog = document.getElementById(&#39;dialog&#39;);
    dialog.showModal();
  };
</script>

当然，这是一个最简单的例子，我们可以通过 CSS 来为它设置任何想要的样式，

它真正有用的部分是它处理可访问性。它被称为对话框。可以防止键盘焦点离开元素。它还会在一个特殊的顶层中弹出所有内容的顶部，因此即使对话框元素是在某些嵌套组件结构的深处创建的，它也可以填充视口，即使父元素隐藏了溢出隐藏或其他类型的隐藏。

如果在对话框的对话中有一个表单，提交该表单将自动关闭框对话并通过对话框的返回值告诉我们单击了哪个按钮。

3. selectmenu

Open UI 社区组正在积极的研究如何解决更复杂和扩展的表单控件。它们提出了一些实验性解决方案，例如 selectmenu 组件和pop-up属性。

selectmenu 组件可以为下拉菜单提供更广泛的样式。下面是微软的一个关于 selectmenu 组件的演示：

Open UI 也在考虑解决其他组件的体验，比如选项卡和锚定位等。

4. datetime-local

datetime-local

Verwenden Mit dieser Eigenschaft können Sie die Designfarbe zuvor unzugänglicher Formularsteuerelemente wie Kontrollkästchen, Optionsfelder, Bereichssteuerelemente und Fortschrittsbalken ganz einfach ändern.

at In einer CSS-Zeile ermöglicht accent-color dem Browser, die Vordergrundfarbe basierend auf dem vom Entwickler festgelegten Hintergrund zu bestimmen, und kann auch mit dem color-scheme verwendet werden Eigenschaft für helle und dunkle Farben Das Farbthema bietet einige nette automatische Anpassungen. Mithilfe des folgenden Codeausschnitts erstellt der Browser automatisch helle und dunkle Modi und verwendet Magenta-Akzentfarben für Formularsteuerelemente.

Dieses Attribut wird erstellt Wird von allen verwendet. Wird in modernen Web-Engines stabil. Dies gilt für Chrome, Edge, Opera, Safari und Firefox. 🎜

🎜2. <dialog></dialog>🎜🎜🎜HTML-Dialog ist ein brandneues, sofort einsatzbereites HTML-Dialogelement. 🎜🎜🎜🎜Bestanden Dieses Element erleichtert das Erstellen eines Dialogs, z. B. einer Warnung oder einer Eingabeaufforderung. Wenn Sie es zur Seite hinzufügen, ist es zunächst ausgeblendet, und wenn Sie es mit der Methode showModal anzeigen, wird es angezeigt: 🎜

<label>
  Start data & time:
  <input type="datetime-local" />
</label>

🎜🎜🎜Natürlich ist dies das einfachste Beispiel, wir können über den CSS-Stil festlegen, was wir wollen, 🎜 🎜🎜 🎜Das wirklich Der nützliche Teil davon ist, dass es sich um die Barrierefreiheit handelt. Es wird als Dialogfeld bezeichnet. Verhindert, dass der Tastaturfokus das Element verlässt. Es wird außerdem über allem in einer speziellen obersten Ebene angezeigt. Selbst wenn das Dialogelement also tief in einer verschachtelten Komponentenstruktur erstellt wird, kann es das Ansichtsfenster ausfüllen, selbst wenn das übergeordnete Element durch Überlaufausblenden oder eine andere Art des Ausblendens ausgeblendet wird. 🎜🎜Wenn sich im Dialogfeld ein Formular befindet, wird durch das Absenden des Formulars automatisch das Dialogfeld geschlossen und uns wird anhand des Rückgabewerts des Dialogfelds mitgeteilt, auf welche Schaltfläche geklickt wurde. 🎜🎜🎜

🎜3. selectmenu🎜🎜🎜Die Open UI-Community-Gruppe erforscht aktiv, wie komplexere und erweiterte Formularsteuerelemente gelöst werden können. Sie schlagen einige experimentelle Lösungen vor, beispielsweise die Komponente selectmenu und das Attribut pop-up. 🎜🎜🎜🎜selectmenu kann eine größere Auswahl an Stilen für Dropdown-Menüs bereitstellen. Das Folgende ist eine Demonstration der selectmenu-Komponente von Microsoft: 🎜🎜🎜🎜Open UI erwägt auch, die Erfahrung anderer Komponenten wie Tabs und Ankerpositionierung zu lösen. 🎜

🎜4. datetime-local🎜🎜🎜datetime-local ist eine browserübergreifende Funktion, es ist ein Eingabetyp. 🎜🎜🎜🎜🎜 Wir können es so verwenden, der Benutzer kann Datum und Uhrzeit auswählen: 🎜

<img src="..." alt="..." loading="lazy" />
<iframe src="..." loading="lazy"></iframe>

🎜 So sieht es auf Chrome auf dem PC und Chrome auf Android aus: 🎜🎜🎜🎜🎜 Wir können auch Validierungsbeschränkungen festlegen wie Mindest- und Höchstdaten. 🎜

5. COLRv1

COLRv1 是浏览器中的一种新的字体格式。它是 COLRv0 字体格式的演变，其添加了渐变、合成和混合，并改进了内部形状重用，以获得更清晰、更紧凑的字体文件，从而更有效地压缩。

和该方法的替代方案bitmap相比，这种压缩带来了不错的性能提升：

COLRv1 字体往往更清晰，而且它们的缩放效果也更好。

这种新格式可以更轻松地在风格上使用彩色字体和表情符号等图标来创建富有表现力的标题和高性能界面。

例如，可以将它们呈现为彩色字体，而不是使用图像作为图标。有一些新的实验性属性，例如 font-palette和 override-colors，它们为用户提供了使用 COLRv1 设置 Web 字体样式的新方式。下面的例子就使用override-colors属性来重新设置 Bungee 字体的样式。

二、性能

1. bfcache

bfcache 意为往返缓存。它在 Firefox和 Safari 中已存在多年，现在 Chromium 中也支持了该功能。

在一个网页上点击一个链接到另一个页面后，但前一页会保留一段时间，在后台冻结，这意味着如果按下返回，它会立即触发。

并非所有页面都会发生这种情况，只有不太可能导致问题的页面才会发生这种情况。DevTools 可以告诉我们它是否适用于给定页面，如果不适用，会给出相应的理由。

2.  图片懒加载

图像是页面的一部分，它会提前开始加载。一旦浏览器在源代码中看到它们，就会提示下载。即使图像被隐藏，即使它位于一个非常长的页面的底部，也会提前加载。现在，一个简单的 loading 属性就可以让浏览器在开始下载时考虑图像的可见性和位置。

它也适用于 iframe：

<img src="..." alt="..." loading="lazy" />
<iframe src="..." loading="lazy"></iframe>

如果将 loading="lazy" 放在页面顶部的重要大图上，它们的加载速度会变慢，所以要格外小心。如果将它添加到不太重要和屏幕外的图像中时，它们不会争夺带宽，而更重要的东西（如样式、脚本和更高优先级的图像）会优先考虑。

现在它可以跨浏览器使用，并且可以在WordPress、Wix、Silverstripe、Drupal 等中使用。

3. aspect-ratio

如果我们为图像设置了height和width属性，并将高度设置为自动，它们将保持其纵横比，在加载之前，这避免了布局的变化。CSS 新增的 aspect-ratio 属性可以你为所有元素实现相同的效果，而不仅仅是图像。

在 iframe、组件div、网格布局和元素上使用该属性都可以得到一个固定的纵横比。

.whatever {
  aspect-ratio: 16 / 9;
}

这对于嵌入的内容、占位符或非HTML中的图像（如 CSS 背景）特别有用。

4.  containment

containment是一个具有性能优势的 CSS 特性。该属性让开发人员可以告诉浏览器如何在屏幕上呈现内容，并隔离 DOM 子树。这反过来又使浏览器能够延迟渲染大小、窗格和布局，以提高速度和效率。

containment 也是容器查询的先决条件，下面会进行介绍。

5. Hinweise zur Priorität

Beim Abrufen von Inhalten ist der Browser so intelligent wie möglich und verhindert, dass das Rendern von Inhalten eine besonders hohe Priorität erhält. Wenn der Browser dann weiß, wo sich der Inhalt befindet, gibt er Inhalte im Ansichtsfenster aus höhere Priorität. In einigen Fällen verfügt der Browser jedoch nicht über genügend Informationen, um die richtige Entscheidung zu treffen, z. B. zwei asynchron geladene Skripte, zwei vorinstallierte Bilder, zwei Iframes, zwei sichtbare Bilder, von denen eines wichtiger ist.

Jetzt können wir Bilder schneller erhalten, indem wir Priority Hints verwenden, die kürzlich in Chrome unterstützt werden:

Wie funktioniert es? Am Beispiel des obigen Codes können wir mit dem Attribut „fetch-priority“ externen Dateien eine Ladepriorität hinzufügen:

6size-adjust ist ein Experiment CSS-Eigenschaft für das Webseitenlayout, die die Leistung durch Reduzierung kumulativer Layoutverschiebungen (CLS) verbessert.

size-adjust是一个用于网页排版的实验性 CSS 属性，通过减少累积布局偏移（CLS）来提高性能。

它是怎么做到的？字体有各种形状和大小，即使是相同大小的字体也可能看起来完全不同。一种 16 号字体可能看起来比另一种大很多。这就是 size-adjusts 可以发挥作用的地方。使用 size-adjustsit Wie wird es gemacht? Schriftarten gibt es in allen Formen und Größen, und selbst Schriftarten gleicher Größe können völlig unterschiedlich aussehen. Eine 16-Punkt-Schriftart sieht möglicherweise viel größer aus als eine andere. Hier kommt size-adjusts ins Spiel. Mithilfe von size-adjusts können Benutzer visuelle Anpassungen an Schriftgrößen (einschließlich lokaler Schriftarten) vornehmen, sodass sie in ihrer Form der Webschriftart, durch die sie sie ersetzen möchten, näher kommen. Da Web-Schriftarten nach dem Herunterladen lokale Schriftarten ersetzen, verringert sich dadurch der gesamte kumulative Layout-Offset der Seite.

7. SIMD

Im vergangenen Jahr ist SIMD in den stabilen Versionen von Chromium und Firefox gelandet. SIMD steht für Single Instruction Multiple Data, eine Reihe von Anweisungen, die mehrere Operanden kopieren und in große Register packen können. Es handelt sich um eine einfache Möglichkeit, bestimmte kleine Vorgänge parallel auszuführen, und es handelt sich um eine häufige Optimierung in C++-Implementierungen von Bild-, Video- und Audioprozessen.

Bisher gingen diese Optimierungen beim Kompilieren dieser Programme zu WebAssembly verloren. Mittlerweile haben die meisten Browser diese Funktion implementiert, Safari unterstützt sie jedoch noch nicht. Wir können WebAssembly zweimal kompilieren und dabei ein Paket erstellen, das SIMD verwendet, und ein anderes Paket, das SIMD nicht verwendet. Auf diese Weise profitieren Chrome und Firefox von schnellerem WebAssembly und funktionieren weiterhin einwandfrei in Safari. Dies geschieht bei Squoosh, um die Bildkomprimierung zu beschleunigen.

8. Interaktion mit dem nächsten Mal

Abschließend befasst sich dieser Abschnitt mit einer experimentellen neuen Leistungsmetrik: Interaktion mit dem nächsten Mal (Interaktion mit dem nächsten Mal), die nicht nur die erste Interaktion, sondern auch den Inhalt des nächsten Mals berücksichtigt Seite alle Interaktionen. Es misst beispielsweise die Zeit zwischen dem Drücken der Wiedergabetaste durch den Benutzer und dem Erscheinen der Pausetaste, die diese ersetzt.

Genauer gesagt zeichnet es die Zeit von der Benutzerinteraktion bis zum Zeichnen des nächsten Frames auf, nachdem alle Event-Handler ausgeführt wurden. Diese Metrik erfasst auch die von Benutzern erlebte Interaktionslatenz besser und macht jede unerwartete Verlangsamung der Reaktion der Benutzeroberfläche deutlich.

3. Datenschutz und Sicherheit Andere Browser tun dies bereits, es entstehen jedoch einige Kompatibilitätsprobleme. Deshalb haben wir an der Entwicklung von APIs gearbeitet, die uns helfen, unsere bestehenden benutzerfreundlichen Funktionen beizubehalten.

Angenommen, Sie haben eine Chat-Anwendung in Ihre Website eingebettet, die ihren eigenen Anmeldestatus verwaltet. Traditionell würde dies dadurch erreicht, dass eingebettete Websites unabhängig davon, wo die Website eingebettet ist, ihren eigenen Satz von Cookies verwenden dürfen. Dies ist das Verhalten von Drittanbieter-Cookies, das verschwindet. Das ist großartig für den Datenschutz, zerstört aber rechtmäßig nützliche benutzerfreundliche Fälle wie diesen eingebetteten Chat. Wenn der Chat kein eigenes Cookie hat, merkt er sich nicht, dass der Benutzer angemeldet ist und meldet sich jedes Mal ab.

Was können wir also tun? Was wäre, wenn es eine Möglichkeit gäbe, die nützlichen Teile des Cookies beizubehalten, aber den Teil des Cross-Site-Trackings zu entfernen? Zu diesem Zweck experimentieren wir mit Cookies mit unabhängigem Partitionierungsstatus.

Dies ist das Attribut, das beim Setzen des Cookies übergeben wird, was bedeutet, dass das Cookie nicht blockiert, aber auch nicht weitergegeben wird.

Wenn das Cookie gesetzt wird, wenn die Chat-Anwendung A einbettet, dann ist es nur verfügbar, wenn die Website A einbettet. Wenn die Chat-Anwendung in eine andere Site eingebettet ist, verfügt sie über ein völlig anderes Cookie-Fenster und kann daher nicht für standortübergreifendes Tracking verwendet werden. Wir können die Sitzung jedoch weiterhin beibehalten.

2. Themen

Werbeplattformen nutzen derzeit Tracking-Technologie, um relevante Anzeigen zu schalten, aber die Tür zu diesen Modellen ist geschlossen. Deshalb prüfen wir, wie wir Plattformen in die Lage versetzen können, aussagekräftige Anzeigen zu schalten, ohne die Privatsphäre zu beeinträchtigen. Wir schlagen eine experimentelle Topics-API vor.

Es gibt der Seite einige Themen, an denen der Browser denkt, dass der Benutzer interessiert ist, und anhand derer ermittelt werden kann, welche Anzeigen am besten angezeigt werden. Nur Premium-Themen werden extern geteilt, nicht der Browserverlauf des Benutzers, und verschiedene Websites erhalten unterschiedliche Themen für denselben Benutzer, sodass sie als Cross-Site-Identifikatoren nicht besonders nützlich sind.

3. Hinweise zum User-Agent-Client

Wir unternehmen Schritte mit anderen Browsern, um die Menge der automatisch im User-Agent-String geteilten Daten zu reduzieren, was für die Erstellung benutzerspezifischer Erlebnisse sehr wichtig ist. Aber es ist im Allgemeinen keine gute Idee, User-Agent-Strings zu verwenden, um Stilentscheidungen zu treffen oder unterschiedliche Inhalte bedingt bereitzustellen. Allerdings ist es manchmal notwendig, beispielsweise für Polyfills oder um besonders schlimme Fehler zu beheben.

Anstatt die User-Agent-Zeichenfolge zu verwenden, schauen Sie sich die User-Agent-Client-Hints-API an, die derzeit von Chromium-basierten Browsern unterstützt wird:

4. WebAuth

Ist das Passwort der beste Weg dazu Benutzerkonten verwalten? Wie sieht es mit sicheren Methoden aus? Obwohl wir noch keine völlig passwortfreie Welt haben, gibt es neue Möglichkeiten, Passwort-Manager besser zu unterstützen, um das Benutzererlebnis nahtloser und sicherer zu gestalten.

Wir entwickeln Passwörter in WebAuth als Teil der FIDO Alliance. Dadurch können registrierte Anmeldeinformationen zwischen Android-Geräten synchronisiert werden, sodass nicht immer Passwörter eingegeben werden müssen. Um sich geräteübergreifend anzumelden, können Sie Ihr Telefon durch Scannen eines QR-Codes als Sicherheitsschlüssel verwenden.

4. Web-App-Funktionen

1. Media Session API

Wir hoffen, dass das Web über APP-ähnliche Funktionen verfügt, damit reichhaltige plattformübergreifende Erlebnisse geschaffen werden können. Beispielsweise verfügen die meisten Betriebssysteme auf Desktop- und Mobilgeräten über eine Art Medienintegration, die uns mitteilt, was abgespielt wird, und Steuerelemente zum Anhalten, Überspringen und Suchen bereitstellt.

In einigen Fällen werden diese Steuerelemente auf verschiedenen Geräten angezeigt. Über das Telefon abgespielte Songs können Mediensteuerelemente auf der Uhr anzeigen. Mit der Media Session API können wir all dies über das Web erledigen und Mediensteuerelemente auf Windows, Mac OS, Android und iOS anzeigen und darauf reagieren, einschließlich verwandter Geräte wie Smartwatches.

Seit diesem Jahr ist die Browserunterstützung sehr gut.

2. Window Controls Overlay

Window Controls Overlay ist eine integrierte Funktion des Betriebssystems, und diese Funktion ist viel neuer. Derzeit ist es eine reine Chromium-Funktion, aber es ist eine nette progressive Verbesserungsfunktion für installierte Apps.

Wenn Sie eine Web-App auf Ihrem Desktop installieren, wird sie in einem Fenster ähnlich diesem geöffnet.

Aber eine neue Funktion in Chrome 99 kann es eher so machen:

Es könnte schlecht aussehen. Dies ermöglicht es uns jedoch, den Webinhalt in diesem Bereich in der Mitte zu platzieren, wie folgt:

Diese Funktion kann mithilfe der Optionen im Web-App-Manifest aktiviert werden, und dann erhalten wir CSS-Umgebungsvariablen und eine API dazu Teilen Sie allen Fenstersteuerelementen die Position mit, damit Elemente um sie herum platziert werden können.

3. Navigations-API

Um die Navigation zu steuern, verfügen Browser über einige APIs, wie z. B. history.pushState- und popstate-Ereignisse zur Verarbeitung des Sitzungsverlaufs. history.pushState 和 popstate事件来处理会话历史。

我们对其进行了重新设计，并将其称为 Navigation API。这为我们提供了同源 session history 的当前 Windows 视图，除非我们拦截导航，这意味着不需要依赖链接上的点击事件。这将使管理重新加载和遍历 Web app 之间的状态变得更加容易。

它现在正在 Chrome 中进行原始试验，很快就会稳定下来。

4. PageTransition API

PageTransition API 是一个使用 CSS 动画等熟悉的概念来简化在页面和页面状态之间创建丰富动画转换的 API。使用该 API 可以在状态之间获得平滑的自定义转换。

5. Web App color scheme

Web App color scheme 是对 Web App Manifest 的补充，它可以让我们为浅色和深色主题提供不同的颜色。

这类似于配色方案样式，但它更适合网站的配色方案。它适用于 PWA 界面。这是一个看似很小的补充，但它对用户体验产生了很大的影响。该功能目前正在 Chromium 中进行原始试验。

6. Eyedropper API

Eyedropper API 是一种输入（input）类型，是用于选择颜色值的吸管。

目前仅在桌面端的 Chromium 中支持，因为它是一个相当具体的桌面交互。通过快速的 API 调用就可以在用户交互后激活吸管，然后用户可以单击某处并将捕获颜色发送回 Web 应用程序。它甚至可以在浏览器之外捕捉颜色，使其成为完全类似于应用程序的体验。

7. Virtual Keyboard API

平板电脑或手机等设备通常具有用于输入文本的虚拟键盘。与物理键盘不同，虚拟键盘会根据用户的操作和需求出现和消失。

使用 Virtual Keyboard API，用户可以通过 JavaScript 以编程方式访问虚拟键盘，将有关键盘的信息传递到 CSS及其环境变量中，并为其设置样式，并提供确定是否应显示虚拟键盘的策略。

五、原生功能

1. 结构化克隆

可以使用 structuredClone

uns Es wurde neu gestaltet und Navigation API genannt. Dadurch erhalten wir die aktuelle Windows-Ansicht des Sitzungsverlaufs desselben Ursprungs, es sei denn, wir fangen die Navigation ab, was bedeutet, dass wir uns nicht auf Klickereignisse bei Links verlassen müssen. Dadurch wird es einfacher, Neuladevorgänge zu verwalten und den Status zwischen Web-Apps zu wechseln.

🎜it Rohversuche in Chrome laufen derzeit und sollten bald stabilisiert werden. 🎜🎜🎜

4. PageTransition API🎜🎜PageTransition API ist eine API, die bekannte Konzepte wie CSS-Animationen verwendet, um die Erstellung reich animierter Übergänge zwischen Seiten und Seitenzuständen zu vereinfachen. Verwenden Sie diese API, um reibungslose benutzerdefinierte Übergänge zwischen Zuständen zu erhalten. 🎜🎜🎜

5. Web-App-Farbschema🎜🎜Das Web-App-Farbschema ist eine Ergänzung zum Web-App-Manifest, das es uns ermöglicht, unterschiedliche Farben für helle und dunkle Themen bereitzustellen. 🎜🎜🎜🎜Dies Ähnlich dem Farbschema-Stil, passt aber besser zum Farbschema der Website. Es funktioniert gut mit PWA-Schnittstellen. Dies ist eine scheinbar kleine Ergänzung, die jedoch einen großen Unterschied für das Benutzererlebnis macht. Die Funktion befindet sich derzeit in Rohversuchen in Chromium. 🎜

6. Eyedropper API🎜🎜Eyedropper API ist ein Eingabetyp und ein Strohhalm, der zur Auswahl von Farbwerten verwendet wird. 🎜🎜🎜🎜Derzeit Wird nur in Chromium auf dem Desktop unterstützt, da es sich um eine ziemlich Desktop-spezifische Interaktion handelt. Die Pipette kann bei Benutzerinteraktion mit einem schnellen API-Aufruf aktiviert werden, und der Benutzer kann dann irgendwo klicken und die erfasste Farbe zurück an die Webanwendung senden. Es kann sogar Farben außerhalb des Browsers erfassen, was es zu einem völlig App-ähnlichen Erlebnis macht. 🎜🎜🎜

7. Virtuelle Tastatur-API🎜🎜Geräte wie Tablets oder Mobiltelefone verfügen häufig über virtuelle Tastaturen zur Texteingabe. Im Gegensatz zu einer physischen Tastatur erscheint und verschwindet eine virtuelle Tastatur je nach den Aktionen und Bedürfnissen des Benutzers. 🎜🎜🎜🎜Verwenden Mit der Virtual Keyboard API können Benutzer programmgesteuert über JavaScript auf die virtuelle Tastatur zugreifen, Informationen über die Tastatur an CSS und ihre Umgebungsvariablen übergeben, sie formatieren und Strategien bereitstellen, um zu bestimmen, ob die virtuelle Tastatur angezeigt werden soll. 🎜🎜🎜

5. Native Funktionen

1 Sie können structuredClone verwenden, um auf einfache Weise eine tiefe Kopie von JavaScript-Werten zu implementieren. Es funktioniert derzeit in allen gängigen Browsern. 🎜🎜🎜🎜🎜Es ist nicht nur sauberer, Sie können auch mehr Dinge klonen, wie Blobs, Bildbitmaps und typisierte Arrays. Es können sogar Objektstrukturen mit Zirkelverweisen geklont werden. 🎜

const clone = structuredClone(obj)

这不是 JavaScript 中的功能，它来自 HTML 规范。但它也在 Node.js 和 Deno 中实现。

2. createimageBitmap

下面来介绍如何将图像 blob 转换为可以在 Canvas 中显示的内容。使用以下方式就很容易导致内存泄漏：

但是现在所有浏览器都支持 createimageBitmap API：

使用它，上面的代码就变成了这样：

不仅如此，我们还可以更好地控制图像的加载方式。它对于为 2D canvas 和 WebGL 加载纹理非常有用。

3. JavaScript 功能

（1）顶层等待

现在可以像这样在 JavaScript 模块的顶层使用 await：

（2）私有属性和方法

类现在可以拥有私有属性和私有方法：

只要以#开头的属性和方法，就只有类内部的代码可以访问它。

（3）array.at

array.at 方法可以通过索引从数组中获取一个元素，如果传入的值为负数，就会从元素后边开始查找：

该方法也适用于字符串和类型化数组。所有这些现在都是跨浏览器的。

4. SharedArrayBuffer

SharedArrayBuffer 也是跨浏览器的。它 允许在页面和 workers 之间共享内存，内存共享对于使用 WebAssembly 的多个线程来说非常重要，因为它允许从 C++ 和 Rust 等移植代码，而性能损失最小。!

该功能在2018年出现了一些非常糟糕的 CPU 错误，浏览器出于安全原因不得不取消此功能。从那时起，浏览器一直在合作开发一种称为跨域隔离的功能，这大大减少了这些 CPU 错误的影响。所以现在，该功能已在所有引擎和平台上安全恢复。

5. URLPattern

URLPattern 允许我们根据模式验证 URL，并提取部分。该功能去年年底在 Chromium 浏览器中发布。它还没有出现在其他浏览器中，但是有一个 polyfill，让我们现在可以跨浏览器使用它。

6. WebCodecs API

WebCodecs API 实际上是一整套 API，可以对图像和视频解码和图像编码进行低级控制，从将帧从动画 GIF 中拉出，到对 WebGL 生成的场景进行编码，再到 H.264 视频，所有这些浏览器内。

多年来，浏览器已经内置了图像和视频编解码器，但这个 API 让我们可以对它们进行低级控制。这是 Chromium 领先的功能，期待未来有更多的跨引擎支持。

7. CSS 功能

（1）级联层

有时我们添加的选择器只是为了打败另一条规则的特异性，级联层就解决了这个问题。

我们可以将导入的样式放入图层中：

Stile können auch mit diesen Ebenenblöcken gruppiert werden:

Jetzt können nacheinander erscheinende Ebenen standardmäßig alle Stile der vorherigen Ebene überschreiben, unabhängig von der Auswahlspezifität (Gewicht) wie. Wir können auch die Reihenfolge der Ebenen vordefinieren. Stile innerhalb einer Ebene sind weniger spezifisch als Stile außerhalb der Ebene, es sei denn, der Stil ist mit !important gekennzeichnet. Wenn Sie dies tun, wenden die Stile es in umgekehrter Ebenenreihenfolge an. !important。执行此操作时，这些样式会以相反的图层顺序应用它。

（2）:has()

:has() 是 CSS 选择的强大工具，可以用来检查父级在其范围内的任何属性，它被称为父选择器，用来检查父级中是否包含某个子元素。

例如，使用

figure:has(figcaption) 时，figure 如何包含figcaption

(2):has()

:has() ist ein leistungsstarkes Tool zur CSS-Auswahl, mit dem überprüft werden kann, ob das übergeordnete Element vorhanden ist Innerhalb seines Gültigkeitsbereichs wird jedes Attribut, das als übergeordneter Selektor bezeichnet wird, verwendet, um zu überprüfen, ob das übergeordnete Element ein untergeordnetes Element enthält.

Für Beispiel: Wenn Sie

figure:has(figcaption) verwenden und FIG das figcaption-Element enthält, können Sie Stile für untergeordnete Elemente, übergeordnete Elemente oder andere Elemente festlegen.

(3) Containerabfragen

Wir können Medienabfragen verwenden, um responsive Designs zu erstellen, die basierend auf der Breite des Browserfensters ändern, welche Stile angewendet werden. Ein breiteres Browserfenster bedeutet jedoch nicht immer auch breitere Komponenten. Dies mithilfe von Medienabfragen zu erreichen, ist schwierig. Containerabfragen lösen dieses Problem, indem sie Stile basierend auf der Breite, Höhe, dem Stil oder dem Status eines beliebigen übergeordneten Containers anwenden und so wirklich reaktionsfähige komponentenbasierte Schnittstellen erstellen.

Bei Verwendung von Containerabfragen verfügt jede Komponente über ihre eigenen Antwortinformationen und reagiert entsprechend, unabhängig davon, wo sie sich in der Benutzeroberfläche befindet.

Eine weitere coole Sache bei Containerabfragen sind benannte Container. Wenn Sie ein untergeordnetes Element haben, das in einem übergeordneten Element verschachtelt ist, aber ein anderes übergeordnetes Element abfragen muss, können Sie für genau diese Situation eine Containerregel erstellen.

6. Zusammenfassung

Im vergangenen Jahr hat das Web einen langen Weg zurückgelegt. Wir haben Browser-Anbieter getroffen und mit ihnen zusammengearbeitet, um Entwicklern im Rahmen einer Initiative namens Interop 2022 ein noch besseres Webentwicklungserlebnis zu bieten. Unser Ziel war es, einige der am häufigsten nachgefragten Entwicklerfunktionen einzuführen und einige der lästigsten Kompatibilitätsfehler zu beheben.

Im Jahr 2022 wollen wir uns auf diese 15 Schlüsselbereiche konzentrieren, um sicherzustellen, dass das Verhalten browserübergreifend vollständig kompatibel ist.

Letztendlich möchten wir, dass Entwickler großartige Erfahrungen im Web erstellen können, und Interoperabilität oder Browserunterstützung sollten kein Hindernis darstellen. Es kommen viele Neuerungen! 🎜🎜🎜Sprache: https://io.google/2022/program/3c60e411-5340-4c54-a037-3aceb2825b16/🎜🎜🎜🎜Originaladresse: https://juejin.cn/post/7100815944833826824🎜🎜 🎜Autor: CUGGZ🎜🎜