目次
序文
最近開催された 2023 Google Developers Conference で、Google は、開発作業を簡素化し、AI をサポートできる、より強力でオープンな Web を提案しました。Googleのシニア開発技術推進エンジニアでありChrome開発技術推進部門のディレクターであるポール・キンラン氏は、Web開発における注目に値するアップグレードや成果など、Googleが2023年のGoogle Developer Conferenceで発表した新機能と、Webがどのように開発を加速できるかについて説明した。 。この記事では主に、Web プラットフォームにおける Google の新機能のいくつかについて説明します。
一、WordPress プレイグラウンドで開く
WordPress playgroundこれは Google App Store の拡張機能であり、実際にはWebAssembly（WASM）ブラウザで実行されるwordpressプロジェクトであるため、ユーザーはローカル開発環境をセットアップせずにプラグインやテーマを迅速にテストできます。、、または作成されたアプリケーションからコードを抽出し、そのコードを Web プラットフォームで実行する
WebAssembly機能。WebAssembly はと をサポートするようになり、開発者はこれを利用してネイティブ パフォーマンスを活用し、既存のコードを再利用しながら Web 上の新しいユーザーにアプローチできるようになりました。C++C#KotlinSwift KotlinDartAndroidFlutter
2.WebGPU
長年の開発を経て、Chrome チームはWebGPUWeb 上で高性能 3D グラフィックスとデータ並列コンピューティングを可能にする (Web グラフィック プロセッサ) を立ち上げ、ブラウザのパフォーマンスをオフロードして 3 倍にし、ブラウザの 3D 爆発的なパフォーマンスを実現JavaScript工作负载しました机器学习模型推理。最後にブラウザ ゲームをレンダリングします。現在、広く使用されている多くの WebGL ライブラリは WebGPU サポートを段階的に実装しています。たとえば、他のライブラリの既存のゲームも改善され、予備的なサポートが発表され、最適化されたバージョンがほとんどのオペレータにサポートされます。サポートが進行中です。レンダリング パフォーマンスの点では、WebGPU は webGL の 3 倍以上、コンピューティング パフォーマンスの点では、WebGPU は webGL の 50 倍以上高速です。具有许多不同对象的高度详细的场景Babylon.jsJavascript3DPlayCanvasWebGPUTensorFlow.js WebGPUThree.jsWebGPU
3. 新しいコアWebインジケーターINP
INPはい、これはInteraction to Next Paint略語であり、次の描画との相互作用を意味します。2023 年の Google 開発者カンファレンスでは、INP が 2024 年 3 月に Google のコア Web 要素インジケーターの 1 つになることがPaul Kinlan言及されました。INP は、FID インジケーターに取って代わり、コア Web 要素インジケーターになります。これは、ユーザー インターフェースの応答性、つまりクリックやキーストロークなどのユーザー インタラクションに Web サイトがどれだけ早く反応するかを測定する Web サイトのパフォーマンス指標であり、応答性が悪いと Google のランキングに影響を与える可能性があります。善悪の法則をどう解釈するか? 詳細は以下のとおりです。INPINP
4.ウェブビュー
Google の開発者は、Webview(ビュー) を通じて Web のコンテンツをアプリケーションに統合し、ユーザー エクスペリエンスを向上させるためにパフォーマンスとセキュリティを大幅に更新しました。Webview分割画面表示モードの場合は、画像を別のアプリケーションにドラッグできます。これは、アプリケーションでのネットワーク エクスペリエンスを向上させるために Google が行った多くの変更と改善の 1 つです。もちろん、時間によるものであれば、制約、場合によっては Webview 予想を超えて、Google Chrome 技術チームは 2 つの優れたオプションを提供しました。
1、カスタムタブ
Custom Tabs(カスタム タグ) は、アプリケーションがユーザーの好みのブラウザとシームレスかつ安全に統合できる優れた方法を提供し、 を使用する必要がなくなりますWebview。ユーザーは自分のブックマーク履歴とパスワードを保持でき、ラベルをカスタマイズすることもできます。カスタム タブを使用する場合、ブラウザーのタブ オーバーレイは画面全体を覆うため、タブ オーバーレイの高さをカスタマイズして、ユーザーがアプリケーションと Web コンテンツを同時に操作できるようにすることができます。
2、JavaScriptエンジン
Google Chromeが公開しているJavaScriptEngineアルファ版はJavaScript、他のエンジンの解釈や実行原理とは異なり、直接JavaScriptバイナリコードにコンパイルして実行するため、そのパフォーマンスは非常に強力です。これにより、アプリケーションはWebviewインスタンス を作成せずに評価JavaScriptおよびコーディングWebAssemblyできるようになり、最も重要なことに、アプリケーションは別のプロセスで実行されるため、JavaScriptアプリケーションを非常に安全かつ安定して実行できます。
5. パスキー
2023 年の Google 開発者カンファレンスでPaul Kinlan彼が述べたのPasskeysは、ユーザーはこれを使用してすぐに再認証できるということです。指紋、顔、画面ロック設定、物理的なセキュリティ キーなどの生体認証センサーを備えたPasskeysユーザーは、各パスワードを覚えて管理する必要がなく、Google アカウントに安全にログインできます。システムはユーザーのパスワード管理を自動的に支援します。パスキーは、フィッシング攻撃などの脅威に対する強力かつ効果的な保護メカニズムを提供します。パスキーを作成すると、それを使用して Google アカウントに簡単にログインし、機密変更を行うときに ID を認証できます。これは、パスワードを要求し、場合によっては 2 要素認証を必要とする従来の方法よりもはるかに簡単です。以下の設定が可能です。
クリックしてパスキーを作成し、設定することができます。
六、ビュートランジションAPI
Google Chromeを呼び出すstartViewTransition()と、各段階でスナップショットを記録できるため、異なるページ状態間のスムーズな移行が可能になり、まさにネイティブのようなスムーズなエクスペリエンスが得られます。具体的な使い方は以下の通りです。
document.startViewTransition(() => 触发DOM变化);
この API はビデオなどのインタラクティブなメディアに非常に適しており、ユーザー エクスペリエンスも優れています。現在、スペインのアリババの小売プラットフォームはすでにこの API を使用しています。
7. Google Chrome 開発者ツールの最適化
Google Chrome は、問題をより迅速に特定し、Web サイトのデバッグ時間を短縮するのに役立ついくつかの新機能を開発者ツールに導入しました。次のような側面があります。
1. HTTP 応答ヘッダーをオーバーライドする
以前は、HTTP ヘッダーを設定するにはネットワーク サーバーにアクセスする必要がありましたが、現在はネットワーク パネルで対応するヘッダーを直接オーバーライドし、カスタム ヘッダーを追加できるようになりました。
2.スタックトランスを変更する
フレームワークをデバッグすると、無関係なコンテンツが頻繁に表示されますstack trance。これは実際には、開発者のコードからではなく、フレームワーク自体から来ているため、Google 開発チームはそれを改善し、冗長なコンテンツを削除しました。これは、記述されたstack tranceコードのみに焦点を当てているためです。サードパーティのコードを含むその他のコードは削除されます。
8. ベースライン
Google は他のパートナーと協力して、Baseline機能が使用されているかどうかについて推測を排除する、安定した予測可能なビューの作成に取り組んでいます。毎年バージョンがリリースされておりBaseline、互換性が非常に高いため、すでにNPMリリースされています。
要約する
Web は、パフォーマンスの継続的な向上や、Web アプリケーションがより豊かでインタラクティブなユーザー エクスペリエンスを提供できるようにする新しい機能や機能の追加など、毎年新しい開発と変化をもたらします。Google は、開発者がこれらの新しいテクノロジーを最大限に活用してプロジェクトの問題を解決できるよう、この分野で一連の強力なツールとソリューションを提供しています。これらのツールとソリューションは、開発者が特定のプロジェクトのニーズを満たすのに役立つだけでなく、Web サイトがさまざまなデバイスやブラウザーで最高のパフォーマンスとユーザー エクスペリエンスを提供できるようにします。
2023 年の Google Developers Conference について詳しく知りたい場合は、選択された基調講演のリプレイ ビデオをお見逃しなく。
直接リンク: https://marketing.csdn.net/p/8b1b4b3f5f0fe4c3cdf1c2d5e42a05c3
カンファレンスの知識を深く学びたい人にとって、Google が公式に作成した Google Developer Online Course は、カンファレンス テクノロジーの新しい知識を体系的に習得でき、2 度の学習で学習できる素晴らしい学習プラットフォームです。半分の労力で結果が得られます。
https://developers.google.cn/learn/pathways?hl=zh-cn&utm_source=csdn