我的网页上有一个标题区域，其中有一些循环显示的背景图像。
它们的分辨率有些高，而且位于首屏，因此我不希望浏览器开始加载除第一个图像之外的任何图像。
但我还想随机化图像的顺序。
问题在于我使用的是静态 Web 主机 (Netlify)。
我考虑过的一些方法：
我想要做的是在浏览器看到整个 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>
这是一个糟糕的主意吗？为什么？有没有更好的方法来实现我的愿望？
是的，这不是一个好主意。该方法非常古老，并且具有可能因浏览器而异的特定行为。请参阅 https://developer.mozilla.org/en- US/docs/Web/API/Document/write 了解更多信息。
只需使用现代方法，例如：
等等。随机排列元素，因为这些元素对于渲染器/浏览器来说是安全的。
不过，针对您的特定用例的建议是：浏览器需要首先加载 JavaScript 才能使其按照您想要的方式工作，但这可能不会发生。图像可能仍在按照它们最初在 HTML 源中的顺序加载。如果可能的话，我建议将此逻辑移至服务器。 最终，任何 Javascript 都可能不适用于您的用例。可能可以不在文档本身中包含图像，然后通过 JS 添加它们（在随机加载时），这将是我的首选方法。