約 800K のかなり大きな単一ページ アプリケーションがあります。約 500K がクライアントに送信されるデータです。<script>
タグの頭にある単なるjson文字列である要素の一部を移動することを検討しています。
<head>
ブラウザーが DOM をトラバースするとき、トラバースはタグ内のみで行われるのか (その場合はメリットがない) 、タグも調べます<body>
か?
約 800K のかなり大きな単一ページ アプリケーションがあります。約 500K がクライアントに送信されるデータです。<script>
タグの頭にある単なるjson文字列である要素の一部を移動することを検討しています。
<head>
ブラウザーが DOM をトラバースするとき、トラバースはタグ内のみで行われるのか (その場合はメリットがない) 、タグも調べます<body>
か?
を使用する場合document.querySelectorAll("some selector example")
、head 内の要素も考慮されます。これは、次を使用して簡単に解決できます。
document.body.querySelectorAll("...")
同じことが 、 、 などにも当てはまりますgetElementsByTagName
。getElementsByClassName
しかし にquerySelector
は
当てはまりgetElementById
ません。id はドキュメント内で一意でなければならないため、コンテキストを制限しても意味がありません。
ちなみに、テキストもノード型です。<script> ...500kb... </script>
次の DOM ツリーを生成します。
SCRIPT
#text
可能であれば、ブラウザによって解析される場合とされない場合がある場所にコンテンツを移動するのではなく、データがサーバーから返される方法を再構築しようとします。
おそらく、基本的な情報を返すだけの迅速な応答をしてから、別の要求に応じてより完全な応答を返します。
その量のデータを作成できる Web サービスもあります。 800Kは私にとっても限界ですが、そのデータを制限するためにエンドポイントをもう少し具体的にしました。
乾杯グレン