(高性能 Web アプリの要件

Qu'est-ce qu'une « application Web haute performance » ou un « frontend » exactement ?

Depuis le déclin de l'ère Internet Explorer, l'écosystème JavaScript est devenu de plus en plus puissant et le terme « frontend » est devenu synonyme de clients Web modernes et performants. Au cœur de ce monde « frontend » se trouve React. En fait, ne pas utiliser React dans le développement frontend donne souvent l'impression d'être une valeur aberrante.

Mais tout comme tous les jeux ne sont pas AAA, nous devons soigneusement réfléchir à ce que nous entendons par « hautes performances » lorsque nous parlons d'applications Web. Cette distinction est cruciale pour le sujet abordé aujourd’hui.

1. La portée des applications Web hautes performances

Dans la plupart des cas, le terme « application Web haute performance » fait référence à un client Web interactif et dynamique construit à l'aide de frameworks basés sur JavaScript comme React, Vue ou Angular. Ces applications offrent généralement des temps de chargement rapides et un routage côté client, et le DOM virtuel de React joue un rôle majeur dans l'amélioration de la vitesse de rendu.

Cependant, certaines applications Web utilisent les 4 Go de la limite de mémoire du module WASM, sont conçues dans un souci de gestion systématique de la mémoire et visent des performances comparables à celles des programmes natifs comme Blender ou 3Ds Max. Ces applications s'alignent davantage sur le concept de « programmes » qui exploitent toutes les ressources d'un onglet de navigateur, plutôt que sur les « pages Web » traditionnelles optimisées pour le référencement.

Bien que les environnements de navigateur actuels puissent encore avoir du mal à offrir des performances natives en raison des limites de mémoire et de la surcharge, les objectifs de ces applications sont fondamentalement différents. Ils gèrent de grands ensembles de données et visent à utiliser la totalité des 2 à 4 Go de mémoire, tout en recherchant les vitesses de rendu les plus élevées.

Étant donné que les problèmes rencontrés par ces types d'applications Web diffèrent de ceux rencontrés par les applications « hautes performances » typiques, les directions qu'elles poursuivent divergent également.

La « web app haute performance » évoquée au début et celle que je décris ici sont fondamentalement différentes dans leurs parcours. Les regrouper sous un seul terme serait problématique. Nous avons besoin d'une terminologie différente pour refléter ces différences.

C'est pourquoi je propose que nous arrêtions de parler de cette dernière comme d'une « application web haute performance » ou d'un « frontend » et que nous utilisions plutôt les termes suivants :

• Ingénierie de framework haute performance basée sur un navigateur (BBHPFE)
• (Basé sur un navigateur) Ingénierie système haute performance (HPSE)

Je pense que ces termes définissent clairement la différence d'exigences entre le frontend et HPSE. Tous les clients basés sur un navigateur ne sont pas des interfaces ; certains sont des HPSE. Considérez l'exemple suivant pour comprendre pourquoi cette distinction est importante :

[Conversation 1]

A : "Je développe une application frontale mais je n'utilise pas React."
B : "Une application frontend sans React ? React détient plus de 60 % de part de marché dans le frontend ! Pourquoi ne l'utiliseriez-vous pas ?"

[Conversation 2]

A : "Je développe une application HPSE mais je n'utilise pas React."
B : "Cela a du sens pour HPSE. Les sociétés de jeux personnalisent souvent leurs moteurs de manière approfondie, mais les fonctions internes et le pipeline de rendu de React ne peuvent pas être modifiés. Il n'a jamais été conçu à cet effet."

Parlons maintenant des composants essentiels qu'un HPSE doit avoir.

2-1. Gestion de la mémoire
Vous ne pouvez pas parler de programmes hautes performances sans aborder la mémoire. Qu'il s'agisse d'utiliser un garbage collector ou de libérer manuellement la mémoire allouée dynamiquement, la mémoire inutilisée doit toujours être libérée.

Considérons un jeu par navigateur dans lequel le joueur se déplace vers une nouvelle carte. Le jeu devra récupérer de nouvelles données cartographiques du serveur de manière asynchrone, créer de nouveaux maillages et supprimer les anciens. Les données utilisées pour générer l'ancien maillage doivent également être libérées.

Si les références aux anciennes données ne sont pas correctement publiées, l'utilisation de la mémoire continuera d'augmenter à chaque transition de carte. Une fois qu'il atteint environ 2 Go, vous pouvez rencontrer une erreur « Mémoire insuffisante » et le navigateur plantera.

Il est vrai que JavaScript n’a pas été conçu pour le contrôle de la mémoire de bas niveau : ni le langage ni la philosophie de ses développeurs ne lui donnent la priorité. Je ne dis pas que la gestion de la mémoire est toujours cruciale, mais comme on dit, « il n’y a rien de gratuit ». Si la gestion de la mémoire est nécessaire, il faut le faire.

2-2. Flexibilité pour répondre aux exigences
J'ai entendu un jour quelqu'un dire : "Au moment où vous passerez du statut de développeur junior à celui de développeur intermédiaire, vous devriez être capable de créer tout ce qui vous est demandé."

JavaScript est déjà un langage impressionnant avec peu de limitations inhérentes (en dehors des limites de mémoire). Si vous voulez construire quelque chose, cela peut probablement être fait.

本当の問題は、現在のプロジェクトが本当にさまざまな要件に対応できるかどうかです。

工場の機械が連続稼働後に故障するのと同じように、高性能でカスタマイズされた機能を追求すると、予期せぬ課題に遭遇することは避けられません。このような状況が発生した場合、柔軟性と固有の要件を満たす能力が不可欠です。

たとえば、Lost Ark が Unreal Engine 3 で構築されたことを聞いたことがありますか?アンリアル エンジン 5 はすでにリリースされていますが、彼らは 2004 年に作成されたアンリアル エンジン 3 をまだ使用しています。これまでプロジェクトを維持するには、エンジンに大規模な変更を加えたに違いありません。実質的には完全なオーバーホールです。ゲームの特性により、パフォーマンスと美的要件を満たすために、遅延レンダリング、インスタンス化、カリング、画面空間の反射などの技術を使用して、レンダリング パイプラインとループを常にカスタマイズする必要がありました。

エンジンのソース コードを変更できる機能は重要でした。もしエンジンが閉鎖されていたり、改造ができないほど密接に結合されていたなら、ロストアークは決して開発されなかったかもしれません。

HPSEも同様です。ブラウザベースの環境に変わっても、カスタム機能や柔軟な変更が必要な点は変わりません。したがって、HPSE で使用されるライブラリと外部モジュールは変更可能である必要があり、ブラウザのレンダリング パイプラインや内部モジュールの結合が厳格すぎてこれらの変更ができない場合、重大な問題になります。

2-3.必然のオブジェクト指向アプローチ
大規模なプログラムを扱う場合、避けられないことが 1 つあります。それはオブジェクト指向プログラミング (OOP) です。

JavaScript はマルチパラダイム言語であり、関数型プログラミング (FP) が広く使用されています。ただし、FP は Web クライアントには適していますが、FP のインスタンスには内部状態がないため、複数のオブジェクトが複雑な方法で相互作用する大規模なプログラムではほとんど使用されません。

React はグローバルな状態管理と useEffect でこれを補いますが、各インスタンスが独自の状態を維持し、パブリック メソッドを通じてメソッド呼び出しを制御するほど直感的ではありません。

OOP が常に最良の選択であるとは限りませんが、HPSE の高度にカスタマイズされた開発ニーズを考慮すると、これより良い代替手段を考えるのは困難です。オペレーティング システムやゲームなどの大規模プログラムの多くは、OOP 原則を使用して構築されています。最も一般的なエンジン ソースでさえオブジェクト指向ですが、方法論には多少の違いがあります。

大規模プロジェクトに参加したことのある開発者は、OOP に精通している可能性があります。これにより、OOP ベースの開発がコラボレーションを促進します。

とはいえ、JavaScript の長所を捨てる必要はありません。 JavaScript は関数と const 宣言をサポートしているため、インスタンスを必要としない単純なモジュール関数は、const または関数を使用してオブジェクト リテラルとして定義できます。これにより、生産性が向上し、JavaScript の多用途性を活用できます。

結論として、オブジェクト指向の原則を組み込んだマルチパラダイム アプローチが HPSE にとって理想的であると私は信じています。

以上が(高性能 Web アプリの要件の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。