正在计算页面上加载的所有资源

Calculating all resources loaded on page

本文关键字：资源 加载 计算      更新时间：2023-09-26

我正在加载一个包含CSS+图像+脚本的页面。所以我想在页面加载的运行时计算加载到页面上的所有资源总数，这样我就可以根据这些计算和一点加载时间显示进度条。

我的问题是如何计算有多少资源实际加载到dom中，包括图像+脚本+css文件。在此基础上，我需要计算进度条进度模式并使其继续进行。

有人能告诉我们怎么做吗？

没有直接的方法可以做到这一点。脚本和图像标记具有加载事件，因此您可以附加回调并知道何时加载它们。Css没有可查询的事件或属性，但是您可以使用img标记来解决问题。但这并不是那么简单，因为如果您将回调附加到已经加载的脚本标记，那么该回调将永远不会启动，img标记也是如此。因此，当您的进度条开始跟踪文档上的所有img/script/css时，它需要知道哪些img/script/css已经加载，然后为其他尚未加载的内容附加一个事件回调。Img标记有complete属性，但脚本没有，所以您无法通过简单地查询DOM来知道脚本是否已加载。Css更巧妙。

好吧，正如你所看到的，这不是一项简单的任务，实际上它很复杂，就我个人而言，我不认为仅仅为了显示进度条而花费时间和精力是值得的。

在你的页面中显示一个古老而好的旋转，并感到高兴：）

总数为：

$('script, link[type=text/css], img').size();

这将返回您请求的资源总数。

这是一个Vanilla Javascript，在@Alaa Badran的答案之后有更完整的答案

它只计算页面的元素数量，但您可以根据它创建一个计数器来获取还有多少元素需要加载。

它统计所有加载的CSS样式表以及所有支持用"；src"；属性（因此它避免计算"占位符"元素，最初不加载外部内容）

function countElementsLoadingContent() {
  // Counts the number of elements loading content on the page
  const htmlTagsLoadingContent = [
    "img",
    "script",
    "video",
    "audio",
    "iframe", 
    "source", 
    "track", 
    "embed", 
    "object"
  ]
  const elements = document.querySelectorAll(htmlTagsLoadingContent.join(','))
  let elementsWithSrc = 0
  for (let i = 0; i < elements.length; i++) {
    if (elements[i].src) {
      elementsWithSrc++
    }
  }
  const cssLinks = document.querySelectorAll('link[rel="stylesheet"]')
  const totalElements = elementsWithSrc + cssLinks.length
  console.log(`Total elements on the page that load content: ${totalElements}`)
  return totalElements
}

我认为你处理这个问题的方式不对。。。

如果你的页面太大，需要一个进度条，那么它可能太大了。

为什么不优化页面，使其快速开始渲染，然后添加其他项目，例如渐进加载或延迟加载。

相关文章：