問題タブ [webpage-rendering]

stackoverflow.comブラウザーが Web サイトを解析する方法と、入力からブラウザーにページを表示するまでのすべての作業をブラウザーがどのように行うかについては、大まかに知っています。

ここでの問題は、特定の一連のタスクを必要な順序で強制するために、その動作をオーバーライドまたは操作するにはどうすればよいかということです。

私は次のようなことを意味します：

1. Web サイトのスクロールせずに見える部分の上にある HTML コードのみをダウンロードします。
2. Web サイトのスクロールせずに見える部分の上にあるスタイルシートをダウンロードして解析します。
3. スクロールせずに見える範囲でレンダリング
4. スクロールせずに見える範囲の画像をダウンロードする
5. アバブ ザ フォールドの JS をダウンロードする
6. JS の解析中に、Web サイトの別のセクションをダウンロードします
7. 繰り返す...

私の例では、スクロールせずに見える部分をできるだけ早くレンダリングしてから、ページの残りの部分をレンダリングしたいと考えています。

明らかに、これは何ができるかを尋ねる非常に単純化された例であり、この機能 (または同様のもの) を実装するライブラリがあるかどうかも知りたいです。

私の質問は Chrome DevTools についてです。具体的には、タイムライン タブについて質問があります。そのため、何度も読んだことがありますが、私のブラウザーは 60 fps の速度でピクセルをレンダリングする必要があります。ただし、重い JS が実行され、60fps が発生するのを妨げている場合があります。また、DOM ツリー (ツリーの一部または全体) の再計算と再描画を引き起こす CSS と JS がある場合、1 フレームに 16 ミリ秒以上かかることもあります。これは、私たちのアプリからのそのような長いフレームの写真です:

わかりました、ここで私は明確に見ることができます.2つのリクエストは非常に長い時間(192ms + 14ms)を要し、ブラウザは60fpsを描くことができず、そこに近づくことさえできません.

ここに別の写真がありますが：

だから今はずっと良くなっています。今は〜42fpsです。しかし、今では理由がわかりません..

「レイヤーツリーの更新」と「ペイント」の機会がいくつかあります。いくつかのマウス イベントがありますが、ここではすべて 1 ミリ秒未満です。

このフレームには、このような「イベント」が 12 回あります。それらの 10 は 0.30 ミリ秒未満であるため、それらをすべて合計すると、間違いなく 16 ミリ秒未満 (正しく数えると 3.57 ミリ秒) になりますが、Chrome はこのフレームが 23.9 ミリ秒であると言います。

タイムラインで、ここにジャンクがあると表示されるのはなぜですか? それを取り除くにはどうすればよいですか?また、ボトルネックがどこにあるかを知る方法は?

タイムラインを調べる際に間違いなく何かを見落としているため、ここで少し混乱しています..そのような「ジャンク」を取り除く方法とそれらを検出する方法について、詳細な説明または詳細なチュートリアルを教えてください。私はすでにいくつかの記事を読み、パフォーマンスに関する Udemy コースをほぼ終了しましたが、まだ混乱しています..

ありがとうございました

Chrome などを使用して Web ページを作成し、そのページを他の 10 のブラウザーでレンダリングするための自動テスト ツールを入手できれば幸いです。レンダリングするページが n% 以上異なる場合は、スクリーンショットと警告が必要です。

そのようなツールは存在しますか？

現在 PHP で構築されたメディア コンテンツ Web サイトがあり、サーバー上で完全にレンダリングされます。React+Redux+react-router-redux と API に基づいて再構築したいと考えています。SEO は私たちにとって非常に重要であり、特に Google、Bing、Baidu、Yahoo、Yandex について取り上げたいと考えています。そのうち最後の 4 つは、AFAIK のクロールで JS を実行していません。これに関するベストプラクティスは何だろうと思っていました。

クライアントのユーザーエージェントを確認し、クローラーならサーバーでReactをレンダリングし、そうでなければクライアントでレンダリングすることを現在考えています。これはクローキングとみなされますか? 実際には、内容は同一である必要があります。

私はまた、Google がクロールする Web サイトで JS を処理する方法について心配し、少し混乱しています。

base64 文字列を JavaScript 関数に送信していますが、何度も呼び出すとメモリ リークが発生します。私の直感は、javascript 変数に格納されている値が適切に解放されていないことです。

以下のような匿名関数から関数を呼び出しています匿名関数は、base64をWebページに送信するiOSネイティブ側から呼び出されます

私の知る限り、JSはガベージコレクションされた言語であるため、このメモリリークの問題は発生しないはずですが、発生します。

メモリ リークが発生すると、iOS によって強制終了されます。スクリーンショットをご覧ください。

この質問はこれに関連しています

コントローラー、ディレクティブ、サービス、ファクトリー、config、run 関数など、すべてを含む angularjs アプリケーションを使用しています。

しかし、私は常に機能フローについて混乱しています。

1 つの loginController、loginService、loginView、いくつかのディレクティブ、およびアプリケーションの config および run フェーズで行っていることを考えてみましょう。

現在、さまざまなシナリオが存在する可能性があります。

(a)初回ログインページの読み込み。

(b)送信ボタンをクリックすると、別のビューに移動します。

(c) ログインページを更新するか、他のビューからログインページにリダイレクトします。

上記のすべての場合に

バグを修正したり、新しい機能を実装したりする必要があるたびに、ブラウザーにデバッガーを配置して、どのファイル関数が最初に呼び出されるかを確認する必要があるため、この質問をしています。

誰かがフロー/チャート図（一般的なフロー）で私を助けることができれば、それは大きな助けになります.

どんな助けもかなりのものです

ありがとう