Perkembangan baharu dalam platform web yang tidak boleh dilepaskan oleh pembangun pada tahun 2022

Pada 11-12 Mei, Google mengadakan Persidangan Pembangun Global Google I/O 2022. Pada persidangan itu, Jake Archibald dan Una Kravet mengemas kini kami tentang perkembangan terkini dalam platform web. Mari lihat perkara baharu pada platform web pada tahun 2022!

Artikel ini akan melihat ciri baharu dalam bidang seperti privasi dan keselamatan, kuasa, reka bentuk UI, prestasi dan metrik teras, serta beberapa CSS dan JavaScript baharu untuk meningkatkan alatan pembangun.

1. Fungsi UI

1 Sudah 2022, mengapa masih sukar untuk menggayakan menu lungsur dan kotak pilihan? Atribut CSS boleh menyelesaikan masalah ini dengan mudah.

accent-color

Menggunakan sifat ini, anda boleh menukar warna tema kawalan borang yang tidak boleh diakses sebelum ini, seperti kotak semak, butang radio, kawalan julat dan bar kemajuan.

Dalam satu baris CSS, membolehkan penyemak imbas menentukan warna latar depan berdasarkan latar belakang yang ditetapkan oleh pembangun, dan juga boleh menjadi warna terang bersama-sama dengan atribut

warna aksen untuk kawalan borang. accent-colorcolor-schememagenta

Harta ini menjadi stabil di semua enjin web moden. Ini termasuk untuk Chrome, Edge, Opera, Safari, Firefox.

2.

<dialog></dialog>Dialog HTML ialah elemen dialog HTML luar kotak yang serba baharu.

Elemen ini memudahkan untuk mencipta dialog, seperti makluman atau gesaan. Apabila anda menambahkannya pada halaman, ia mula tersembunyi, dan apabila anda menggunakan kaedah showModal untuk menunjukkannya, ia muncul:

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

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

Sudah tentu, ini ialah Contoh paling mudah, kita boleh menggayakannya dalam apa jua cara yang kita mahu melalui CSS,

Bahagian yang sangat berguna ialah ia mengendalikan kebolehaksesan. Ia dipanggil kotak dialog. Menghalang fokus papan kekunci daripada meninggalkan elemen. Ia juga muncul di atas segala-galanya dalam lapisan atas khas, jadi walaupun elemen dialog dicipta jauh di dalam beberapa struktur komponen bersarang, ia boleh mengisi port pandangan walaupun jika elemen induk disembunyikan oleh penyembunyian limpahan atau sesuatu yang lain Jenis penyembunyian.

3. pilih menu

Kumpulan komuniti Open UI sedang menyelidik secara aktif cara menyelesaikan kawalan borang yang lebih kompleks dan lanjutan. Mereka mencadangkan beberapa penyelesaian percubaan, seperti komponen dan

selectmenupop-up

boleh menyediakan rangkaian gaya yang lebih luas untuk menu lungsur turun. Berikut ialah demonstrasi daripada Microsoft tentang komponen

selectmenuselectmenu

UI Terbuka juga sedang mempertimbangkan untuk menyelesaikan pengalaman komponen lain, seperti tab dan kedudukan sauh.

4. datetime-local

ialah ciri merentas penyemak imbas, ia adalah jenis input.

datetime-local

Kita boleh menggunakannya seperti ini, pengguna boleh memilih tarikh dan masa:

Ini dia pada Chrome pada PC dan Chrome pada Penampilan Android:

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

Kami juga boleh menetapkan kekangan pengesahan seperti tarikh minimum dan maksimum.

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. Petua Keutamaan

Apabila mendapat kandungan, penyemak imbas akan menjadi sepintar mungkin dan akan menghalang kandungan daripada diberikan keutamaan yang sangat tinggi bahawa kandungan adalah di mana, ia memberikan keutamaan yang lebih tinggi kepada kandungan dalam viewport. Tetapi dalam beberapa kes, penyemak imbas tidak mempunyai maklumat yang mencukupi untuk membuat keputusan yang betul, seperti dua skrip yang dimuatkan secara tak segerak, dua imej pramuat, dua iframe, dua imej kelihatan, salah satunya adalah lebih penting.

Kini kita boleh menggunakan Petua Keutamaan, disokong baru-baru ini dalam Chrome, untuk mendapatkan imej dengan lebih pantas:

Bagaimanakah caranya kerja? Mengambil kod di atas sebagai contoh, atribut fetch-priority membolehkan kami menambah keutamaan pemuatan pada fail luaran:

6 🎜>

size-adjust

Bagaimana ia dilakukan? Fon datang dalam pelbagai bentuk dan saiz, malah fon dengan saiz yang sama boleh kelihatan berbeza sama sekali. Satu fon 16 mata mungkin kelihatan lebih besar daripada yang lain. Di sinilah

, pengguna boleh membuat pelarasan visual pada saiz fon (termasuk fon tempatan) supaya bentuknya kelihatan lebih hampir dengan fon web yang ingin mereka gantikan. Memandangkan fon web menggantikan fon tempatan selepas memuat turun, ini mengurangkan keseluruhan susun atur terkumpul mengimbangi halaman. size-adjustssize-adjusts

Pada tahun lalu, SIMD telah mendarat dalam versi stabil Chromium dan Firefox. SIMD bermaksud Single Instruction Multiple Data, satu set arahan yang boleh menyalin berbilang operan dan membungkusnya ke dalam daftar besar. Ia ialah cara peringkat rendah untuk menjalankan operasi kecil tertentu secara selari, dan ia merupakan pengoptimuman biasa dalam pelaksanaan C proses imej, video dan audio.

Sehingga kini, pengoptimuman ini hilang apabila menyusun atur cara ini ke WebAssembly. Kini, pelayar utama telah melaksanakan ciri ini, tetapi Safari masih belum menyokongnya. Kami boleh menyusun WebAssembly dua kali, mencipta pakej yang menggunakan SIMD dan pakej lain yang tidak menggunakan SIMD. Dengan cara ini, Chrome dan Firefox akan mendapat manfaat daripada WebAssembly yang lebih pantas dan masih berfungsi dengan baik dalam Safari. Inilah yang dilakukan pada Squoosh untuk mempercepatkan pemampatan imej.

Akhir sekali, bahagian ini akan melihat penunjuk prestasi baharu eksperimen: Interaksi dengan Cat Seterusnya (interaksi dengan cabutan seterusnya), Ia mempertimbangkan bukan sahaja interaksi pertama, tetapi semua interaksi pada halaman. Sebagai contoh, ia akan mengukur masa antara pengguna menekan butang main dan melihat butang jeda menggantikannya.

Lebih khusus lagi, ia merekodkan masa daripada interaksi pengguna sehingga bingkai seterusnya dilukis selepas semua pengendali acara dijalankan. Metrik ini juga lebih baik menangkap kependaman interaksi yang dialami oleh pengguna, menyerlahkan sebarang kelambatan yang tidak dijangka dalam cara UI bertindak balas.

Salah satu projek jangka panjang kami adalah untuk menghentikan langkah ketiga. pihak oleh Kuki dan penjejakan merentas tapak untuk meningkatkan privasi pengguna. Pelayar lain sudah melakukannya, tetapi ini menimbulkan beberapa isu keserasian. Oleh itu, kami telah berusaha membangunkan API yang membantu kami mengekalkan ciri mesra pengguna sedia ada kami.

Andaikan anda mempunyai aplikasi sembang yang dibenamkan dalam tapak anda yang mengurus status log masuknya sendiri. Secara tradisinya, ini akan dicapai dengan membenarkan tapak terbenam mempunyai set kuki mereka sendiri, tidak kira di mana tapak itu dibenamkan. Ini ialah gelagat kuki pihak ketiga yang akan hilang. Ini bagus untuk privasi, tetapi ia memusnahkan kes mesra yang sah berguna seperti sembang terbenam ini. Jika sembang tidak mempunyai kuki sendiri, ia tidak akan ingat bahawa pengguna telah log masuk dan akan log keluar setiap kali.

Jadi apa yang boleh kita lakukan? Bagaimana jika terdapat cara untuk menyimpan bahagian berguna kuki tetapi mengalih keluar bahagian penjejakan merentas tapak. Untuk melakukan ini, kami sedang bereksperimen dengan kuki dengan keadaan pembahagian bebas.

Ini ialah atribut yang diluluskan semasa menetapkan kuki, bermakna kuki tidak akan disekat, tetapi tidak akan dikongsi sama ada.

Jika kuki ditetapkan apabila aplikasi sembang membenamkan A, ia hanya akan tersedia apabila tapak membenamkan A. Apabila aplikasi sembang dibenamkan dalam tapak lain, ia akan mempunyai balang kuki yang berbeza sama sekali, jadi ia tidak boleh digunakan untuk penjejakan merentas tapak. Walau bagaimanapun, kita masih boleh mengekalkan sesi itu.

2. Topik

Platform pengiklanan pada masa ini menggunakan teknologi penjejakan untuk menyiarkan iklan yang berkaitan, tetapi pintu kepada model ini telah ditutup . Oleh itu, kami sedang melihat cara kami boleh membolehkan platform menyiarkan iklan yang bermakna tanpa menjejaskan privasi secara negatif. Kami mencadangkan API Topik percubaan.

Ia memberikan halaman beberapa topik yang pelayar fikir pengguna akan berminat, yang boleh digunakan untuk menentukan iklan terbaik untuk dipaparkan. Hanya tema premium dikongsi secara luaran, bukan sejarah penyemakan imbas pengguna, dan tapak yang berbeza mendapat tema yang berbeza untuk pengguna yang sama, menjadikannya tidak begitu berguna sebagai pengecam merentas tapak.

3. Petua Pengguna-Ejen Pelanggan

Kami sedang mengambil langkah bersama-sama pelayar lain untuk mengurangkan bilangan pembayang automatik dalam rentetan Ejen Pengguna Jumlah data yang dikongsi adalah sangat penting untuk membina pengalaman tersuai pengguna. Tetapi secara amnya bukanlah idea yang baik untuk menggunakan rentetan Ejen Pengguna untuk membuat keputusan penggayaan atau menyediakan kandungan yang berbeza secara bersyarat. Walau bagaimanapun, kadangkala ia adalah perlu untuk perkara seperti polyfill atau untuk membetulkan pepijat yang sangat jahat.

Jangan gunakan rentetan Ejen Pengguna, tetapi lihat API Petunjuk Pelanggan Ejen Pengguna, yang kini disokong oleh penyemak imbas berasaskan Chromium:

4. WebAuth

Adakah kata laluan cara paling selamat untuk mengurus akaun pengguna? Walaupun kita belum lagi menjadi dunia yang bebas kata laluan sepenuhnya, terdapat cara baru untuk menyediakan sokongan yang lebih baik untuk pengurus kata laluan untuk menjadikan pengalaman pengguna lancar dan lebih selamat.

Kami sedang membangunkan Kata Laluan dalam WebAuth sebagai sebahagian daripada FIDO Alliance. Ini akan membolehkan bukti kelayakan berdaftar disegerakkan antara peranti Android, jadi kata laluan tidak perlu dimasukkan selalu. Untuk log masuk merentas peranti, anda boleh menggunakan telefon anda sebagai kunci keselamatan dengan mengimbas kod QR.

4. Keupayaan aplikasi web

1 API Sesi Media

Kami berharap Web mempunyai fungsi seperti APP supaya kaya. kandungan boleh dicipta pengalaman merentas platform. Sebagai contoh, kebanyakan sistem pengendalian pada desktop dan peranti mudah alih mempunyai beberapa jenis penyepaduan media yang memberitahu kami perkara yang sedang dimainkan dan menyediakan kawalan untuk menjeda, melangkau dan mencari.

Dalam sesetengah kes, kawalan ini muncul pada peranti yang berbeza. Lagu yang dimainkan dari telefon boleh memaparkan kawalan media pada jam tangan. API Sesi Media membolehkan kami melakukan semua ini melalui web, memaparkan dan bertindak balas terhadap kawalan media pada Windows, Mac OS, Android dan iOS, termasuk peranti berkaitan seperti jam tangan pintar.

Sokongan penyemak imbas sangat baik mulai tahun ini.

2. Tindanan Kawalan Tetingkap

Tindanan Kawalan Tetingkap ialah ciri bersepadu sistem pengendalian, dan ciri ini lebih baharu. Pada masa ini ia merupakan ciri Chromium sahaja, tetapi ia merupakan ciri peningkatan progresif yang bagus untuk apl yang dipasang.

Apabila anda memasang apl web pada desktop anda, ia akan dibuka dalam tetingkap yang serupa dengan ini.

Tetapi ciri baharu dalam Chrome 99 boleh menjadikannya lebih seperti ini:

Nampaknya ia mungkin Oops . Tetapi ini membolehkan kami meletakkan kandungan web di kawasan itu di tengah, seperti ini:

Ciri ini boleh diaktifkan menggunakan pilihan dalam Manifes Apl Web, dan kemudian , kami akan mendapat pembolehubah persekitaran CSS dan API untuk memberitahu lokasi semua kawalan tetingkap supaya elemen boleh diletakkan di sekelilingnya.

3. API Navigasi

Untuk mengawal navigasi, penyemak imbas mempunyai beberapa API, seperti acara history.pushState dan popstate untuk mengendalikan sejarah sesi.

Kami mereka bentuk semula dan memanggilnya API Navigasi. Ini memberi kami paparan Windows semasa tentang sejarah sesi asal yang sama, melainkan kami memintas navigasi, yang bermaksud tidak perlu bergantung pada acara klik pada pautan. Ini akan memudahkan untuk mengurus muat semula dan merentasi keadaan antara apl web.

Ia kini dalam percubaan mentah dalam Chrome dan akan distabilkan tidak lama lagi.

4. PageTransition API

PageTransition API ialah API yang menggunakan konsep biasa seperti animasi CSS untuk memudahkan mencipta peralihan animasi yang kaya antara halaman dan keadaan halaman . Gunakan API ini untuk mendapatkan peralihan tersuai yang lancar antara negeri.

5. Skema warna Apl Web

Skim warna Apl Web ialah tambahan kepada Manifes Apl Web, yang membolehkan kami mencipta tema terang dan gelap Tersedia dalam warna yang berbeza.

Ini serupa dengan gaya skema warna, tetapi lebih sesuai dengan skema warna tapak web. Ia berfungsi dengan baik dengan antara muka PWA. Ini adalah tambahan yang kelihatan kecil, tetapi ia membuat perbezaan besar kepada pengalaman pengguna. Ciri ini sedang dalam percubaan mentah dalam Chromium.

6. Eyedropper API

Eyedropper API ialah jenis input dan merupakan eyedropper untuk memilih nilai warna.

Pada masa ini hanya disokong dalam Chromium pada desktop, kerana ia adalah interaksi yang agak khusus desktop. Penitis mata boleh diaktifkan apabila interaksi pengguna dengan panggilan API pantas, dan pengguna kemudian boleh mengklik suatu tempat dan menghantar warna yang ditangkap kembali ke aplikasi web. Ia juga boleh menangkap warna di luar penyemak imbas, menjadikannya pengalaman seperti aplikasi sepenuhnya.

7. API Papan Kekunci Maya

Peranti seperti tablet atau telefon mudah alih selalunya mempunyai papan kekunci maya untuk memasukkan teks. Tidak seperti papan kekunci fizikal, papan kekunci maya muncul dan hilang berdasarkan tindakan dan keperluan pengguna.

Menggunakan API Papan Kekunci Maya, pengguna boleh mengakses papan kekunci maya secara pengaturcaraan melalui JavaScript, menghantar maklumat tentang papan kekunci ke dalam CSS dan pembolehubah persekitarannya, dan menggayakannya, serta menyediakan dasar untuk menentukan sama ada papan kekunci maya perlu dipaparkan.

5. Fungsi asli

1 Melaksanakan salinan dalam nilai JavaScript dengan mudah. Ia kini berfungsi dalam semua pelayar utama.

structuredClone

Bukan sahaja ia lebih bersih, tetapi anda boleh mengklon lebih banyak perkara, seperti gumpalan, peta bit imej, tatasusunan ditaip. Ia juga boleh mengklon struktur objek dengan rujukan bulat.

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）级联层

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

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

Ia juga mungkin untuk mengumpulkan gaya menggunakan blok lapisan ini:

Lapisan yang muncul satu demi satu kini menimpa semua yang sebelumnya secara gaya lalai, tanpa mengira kekhususan pemilih (berat). Kita juga boleh mentakrifkan susunan lapisan. Gaya dalam lapisan mempunyai kekhususan yang kurang daripada gaya di luar lapisan, melainkan gaya ditandakan !important. Apabila anda melakukan ini, gaya menggunakannya dalam susunan lapisan terbalik.

(2):has()

:has() ialah alat yang berkuasa untuk pemilihan CSS dan boleh digunakan untuk menyemak induk Sebarang atribut dalam skopnya, yang dipanggil pemilih induk, digunakan untuk menyemak sama ada induk mengandungi elemen anak.

Contohnya, apabila menggunakan

figure:has(figcaption), cara angka mengandungi elemen figcaption boleh ditetapkan untuk elemen anak, elemen induk atau elemen lain gaya.

(3) Pertanyaan kontena

Kami boleh menggunakan pertanyaan media untuk mencipta reka bentuk responsif yang mengubah gaya yang digunakan berdasarkan lebar tetingkap penyemak imbas. Tetapi tetingkap penyemak imbas yang lebih luas tidak selalu bermakna komponen yang lebih luas. Memenuhi ini menggunakan pertanyaan media adalah sukar. Pertanyaan kontena menyelesaikan masalah ini dengan menggunakan gaya berdasarkan lebar, ketinggian, gaya atau keadaan mana-mana bekas induk, mewujudkan antara muka berasaskan komponen yang benar-benar responsif.

Menggunakan pertanyaan kontena, setiap komponen mempunyai maklumat responsnya sendiri dan akan bertindak balas dengan sewajarnya tidak kira di mana ia berada dalam UI.

Satu lagi perkara menarik tentang pertanyaan kontena dinamakan bekas. Jika anda mempunyai anak yang bersarang dalam satu ibu bapa, tetapi ia perlu menanyakan ibu bapa yang lain, anda boleh membuat peraturan bekas untuk situasi yang tepat ini.

6 Ringkasan

Web telah berjalan jauh sepanjang tahun lalu. Kami telah bertemu dan bekerjasama dengan vendor penyemak imbas untuk memastikan pengalaman pembangunan web yang lebih baik untuk pembangun melalui inisiatif yang dipanggil Interop 2022. Kami berhasrat untuk melancarkan beberapa ciri pembangun yang paling diminta dan membetulkan beberapa pepijat keserasian yang paling menjengkelkan.

Pada tahun 2022, kami menyasarkan untuk menumpukan pada 15 bidang utama ini untuk memastikan tingkah laku boleh dikendalikan sepenuhnya merentas penyemak imbas.

Akhirnya, kami mahu pembangun dapat membina pengalaman hebat di web dan kebolehoperasian atau sokongan penyemak imbas tidak seharusnya menjadi penghalang jalan. Terdapat banyak inovasi yang akan datang!

Ucapan: https://io.google/2022/program/3c60e411-5340-4c54-a037-3aceb2825b16/

Alamat asal: https //juejin.cn/post/7100815944833826824

Pengarang: CUGGZ