在浏览器尝试渲染 HTML 元素之前对其进行随机排列。这是“document.write”的罕见有效用例吗？

问题描述 投票：0回答：1

我的网页上有一个标题区域，其中有一些循环显示的背景图像。

它们有点高分辨率，并且位于首屏上方，因此我不希望浏览器开始加载除第一个图像之外的任何图像。

但我也想随机化图像的顺序。

复杂的是我使用的是静态网络主机（Netlify）。

我考虑过的一些方法：

  • 像往常一样将元素放入文档中，然后使用 Javascript 查询它们并随机化它们的顺序。我很不情愿，因为我认为浏览器已经开始加载到达 HTML 中的第一个图像，然后它被随机到其他位置。我想避免这种情况。
  • 使用一些服务器代码进行随机化。但我不想；我不会仅仅为了这个功能而运行服务器。
  • 将每种可能的组合或至少几种组合编写为单独的 HTML 文件，并通过边缘函数中的 URL 重写进行随机化。看起来有点乱。如果没有必要的话，我不想使用边缘函数，因为这只是又一个需要担心的配额。
  • 在边缘函数中编写一些逻辑，拦截页面响应并改变它。尽管代码本身会更加混乱，但所提供的文件不会那么混乱。再加上同样厌恶运行边缘函数。

我想要做的是在浏览器看到整个 HTML 响应之前运行一些 JS 代码，运行一些简短的逻辑，并向流中添加一些标记。然后我可以在 

<noscript>
中为关闭 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>

这是一个糟糕的主意吗？为什么？有没有更好的方法来满足我的愿望？

javascript html netlify
1个回答
1
投票

是的，这不是一个好主意。该方法非常古老，并且具有可能因浏览器而异的特定行为。请参阅 https://developer.mozilla.org/en-US/docs/Web/API/Document/write 了解更多信息。

只需使用现代方法，例如：

等等。随机排列元素，因为这些元素对于渲染器/浏览器来说是安全的。

针对您的特定用例的建议：浏览器需要首先加载 Javascript 才能使其按照您想要的方式工作，但这可能不会发生。图像可能仍在按照它们最初在 HTML 源中的顺序加载。如果可能的话，我建议将此逻辑移至服务器。 最终，任何 Javascript 都可能不适用于您的用例。可能可以不在文档本身中包含图像，然后通过 JS 添加它们（在随机加载时），这将是我的首选方法。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.