ブラウザが HTML 要素をレンダリングしようとする前に、HTML 要素をスクランブルします。これは「document.write」のまれな有効な使用例ですか?

Question

Web ページにタイトル領域があり、そこをループする背景画像がいくつかあります。

これらは少し解像度が高く、スクロールせずに見える範囲にあるため、ブラウザーが最初の画像以外の画像の読み込みを開始しないようにします。

しかし、画像の順序もランダム化したいと考えています。

問題は、静的 Web ホスト (Netlify) を使用していることです。

私が検討したいくつかのアプローチ:

• 通常どおりドキュメントに要素を入力し、JavaScript を使用して要素をクエリし、順序をランダムにします。ブラウザが HTML に到着した最初の画像の読み込みを開始し、その後画像が他の場所にランダムに移動されると考えられるため、気が進まないのです。この状況は避けたいです。
• ランダム化のためにサーバー コードを使用します。しかし、私はそうしたくありません。この機能のためだけにサーバーを実行するつもりはありません。
• 考えられる各組み合わせ、または少なくとも少数の組み合わせを別個の HTML ファイルとして書き込み、エッジ関数での URL 書き換えによってランダム化します。少し乱雑に見えます。エッジ機能は必要のない場合は使用したくありません。追加の割り当てを気にする必要があるだけです。
• ページの応答をインターセプトして変更するためのロジックをエッジ関数に記述します。コード自体はさらに乱雑になりますが、提供されるファイルの乱雑さは軽減されます。ランニングエッジ機能に対する同じ嫌悪感と結びついています。

私がやりたいのは、ブラウザーが HTML 応答全体を確認する前に、JS コードを実行し、短いロジックを実行し、ストリームにマークアップを追加することです。その後、JS をオフにしている人や、JS を実行したくない検索エンジンに対して、

それはまさに document.write が行うことですよね。

すべての情報源は、疫病のような document.write を避けるようにと言っています。しかし、これはまれな有効な使用例ではないでしょうか?

リーリー

これは悪い考えですか?なぜ？私の願いを達成するためのもっと良い方法はありますか？

Answer 1

はい、これは良い考えではありません。このメソッドは非常に古いものであり、ブラウザごとに動作が異なる可能性があります。詳細については、https://developer.mozilla.org/en-US/docs/Web/API/Document/write を参照してください。

次のような最新の方法を使用してください:

• https://developer.mozilla.org/en -US/docs/Web/API/Node/cloneNode
• https://developer.mozilla.org/en -US/docs/Web/API/Node/appendChild
• https://developer.mozilla.org/en -US/docs/Web/API/Node/removeChild
• https://developer.mozilla.org/en -US/docs/Web/API/Node/replaceChild

＃＃＃等。これらはレンダラー/ブラウザーセーフであるため、要素をランダムに配置します。

ただし、特定の使用例に対する提案: ブラウザーが希望どおりに動作するには、最初に JavaScript をロードする必要がありますが、それが行われない可能性があります。画像は、HTML ソースに最初に表示された順序で読み込まれている可能性があります。可能であれば、このロジックをサーバーに移動することをお勧めします。

最終的には、どの Javascript もあなたのユースケースでは機能しない可能性があります。ドキュメント自体に画像を含めずに、JS 経由で (ランダムロードで) 追加することも可能かもしれません。これが私の好みのアプローチです。