简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
在浏览器尝试渲染 HTML 元素之前对其进行打乱。这是'document.write”的罕见有效用例吗？
P粉752290033
P粉752290033 2024-01-10 18:07:41
0
1
432

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

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

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

问题在于我使用的是静态 Web 主机 (Netlify)。

我考虑过的一些方法：

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

我想要做的是在浏览器看到整个 HTML 响应之前运行一些 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>

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

P粉752290033
P粉752290033

全部回复(1)
P粉349222772
P粉3492227722024-01-11 16:07:11 1 楼

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

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

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

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

点赞 +0
添加回复
热门专题
更多>
热门文章
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！