Webページ上の10,000要素のレンダリングをどのように最適化しますか？
私はフルスタックのWeb開発者です。最近、企業での仕事の経験がないため、後輩としての仕事を探していますが、過去に設計から導入までいくつかのプロジェクトを行ってきました（約6年間）。
就職の面接で、私は最近、フロントエンドのCSSの質問のコンテキストで奇妙な質問だと思うものを尋ねられました。
Interviewer： "ページに多くの要素をレンダリングするパフォーマンスを最適化するにはどうしますか？"
Me：「私が従うとは思わない、正確に何を最適化するのか？「レンダリング」とはどういう意味ですか？」
Interviewer：「バックエンドから10,000件の検索結果を得たとしましょう。ページへのレンダリングのパフォーマンスを最適化するにはどうすればよいでしょうか」
Me： "申し訳ありませんが、質問がわかりません。フロントエンドで、すべてをレンダリングする必要がある場合、レンダリングを「最適化」する方法がわかりません。話しているのですか？ここCSSについて？それともJS？Ajax？」
インタビュアー：「...その問題を解決するのにふさわしいと思うものは何でも...」
Me： "正直なところ、そもそも10,000件の検索結果を送信することはありません。必要な場合は、一度にほんの一握りの検索結果のみをユーザーに表示します。読み込み要素のプレースホルダー（後で仮想リストを意味することを明確にしました）。ただし、すべてを一度に表示したい場合は解決策がわかりません...」
インタビュアーは私が間違っているようでした...
私は何かを逃しましたか？答えをウェブで検索しても何も見つかりませんでした。正直に言うと、フロントエンド（特に）の知識に自信があります...しかし、その質問は、フィールドで何かを逃したのだと思いました.
編集：明確にするために、それがインタビュアーが望んでいた答えであるかどうかは特に気にしません。その量のレンダリングを最適化する方法がわからないかどうか知りたいです。私が与えた例以外の要素。
あなたが探しているのは 遅延読み込み だと思います。 「仮想」リストが意味するものである場合とそうでない場合がありますが、私の長年の経験では、これは10,000個の要素をDOMにレンダリングするための最適化された方法です。
ここにもう少し洞察があります。まず、10,000個の要素をDOMにロードする必要はありません。ブラウザに過度のストレスがかかり、Webページが非常に応答しなくなります。結局のところ、フロントエンドはユーザー中心であるため、ユーザーに必要なものだけを表示する必要があります。そうは言っても、後でAPI呼び出しを減らすためにフロントエンドにキャッシュできるので、10,000個の要素を検索しても問題はありません。
フロントエンドでは、VisibilityとDisplayの間に違いがあります。 Visibilityは要素をDOMにレンダリングしますが、ユーザーには非表示にしますが、Displayはレンダリングしません。最適化の観点から、display: none;は もっとvisibility: hidden;よりも効率的ですが、要素の表示状態を切り替えるために要素セレクターを使用するべきではありません。 10,000個の要素をループしてその状態を切り替えます 効率的？
結論として、ベストプラクティスは、1アイテム、5アイテム、10アイテムのいずれであっても、ユーザーが表示するものだけをロードすることです。リストを10,000のサブセットとして動的にロードして、DOM内の要素の数を減らします。
インタビュアーが期待していた答えを知ることは不可能です。
しかし、それが現実の状況である場合、唯一の正解は「ボトルネックはどこにあるのか」です。パフォーマンスに問題がある場合は、プロファイリングを使用して問題の場所を特定する必要があります。これは、スタックのどこにでもある可能性があるためです。