在瀏覽器嘗試渲染 HTML 元素之前對其進行打亂。這是“document.write”的罕見有效用例嗎？
我的網頁上有一個標題區域，其中有一些循環顯示的背景圖片。
它們的解析度有些高，而且位於首屏，因此我不希望瀏覽器開始加載第一個圖像之外的任何圖像。
但我還想隨機化圖像的順序。
問題在於我使用的是靜態 Web 主機 (Netlify)。
我考慮過的一些方法：
- 照常將元素放入文件中，然後使用 Javascript 查詢它們並隨機化它們的順序。我很不情願，因為我認為瀏覽器已經開始加載到達 HTML 中的第一個圖像，然後它被隨機到其他位置。我想避免這種情況。
- 使用一些伺服器程式碼進行隨機化。但我不想；我不會僅僅為了這個功能而運行伺服器。
- 將每種可能的組合或至少少數組合編寫為單獨的 HTML 文件，並透過邊緣函數中的 URL 重寫隨機化。看起來有點亂。如果沒有必要，我不想使用邊緣函數，因為這只是另一個需要擔心的配額。
- 在邊緣函數中寫一些邏輯，攔截頁面回應並改變它。儘管程式碼本身會更加混亂，但所提供的檔案不會那麼混亂。再加上同樣厭惡運行邊緣函數。
我想要做的是在瀏覽器看到整個 HTML 回應之前運行一些 JS 程式碼，運行一些簡短的邏輯，並向流中添加一些標記。然後我可以在 中為關閉 JS 的人和不想運行 JS 的搜尋引擎提供標準順序。
我發現這正是 document.write 所做的，不是嗎？
所有資源都說要像瘟疫一樣避免 document.write。但我想知道這是否是一個罕見的有效用例？
<html>
<body>
<p>This seems to work, and I kind of think it's not a terrible idea.</p>
<script type="application/javascript">
// Standard Fisher-Yates shuffle; not relevant
function shuffle(array) { let i = array.length, j; while (i != 0) { j = Math.floor(Math.random() * i); i--; [array[i], array[j]] = [array[j], array[i]]; } return array; }
const paras = [
"<p>para 1</p>",
"<p>para 2</p>",
"<p>para 3</p>",
"<p>para 4</p>",
];
shuffle(paras);
document.write(paras.join(""));
</script>
<noscript>
<p>para 1</p>
<p>para 2</p>
<p>para 3</p>
<p>para 4</p>
</noscript>
<p>Change my mind.</p>
</body>
</html>
這是一個糟糕的主意嗎？為什麼？有沒有更好的方法來實現我的願望？
