计时问题 - 如何防止在 Chrome 扩展程序中初始加载非必要的图像和视频？

Question

我正在开发一个 Chrome 扩展程序，旨在防止初始加载非必要的图像和视频，以节省带宽和资源。该扩展旨在将 src 属性与 data-src 交换以进行延迟加载，但尽管实现了，所有媒体都会根据网络监控获取，尽管它们在网页上隐藏。

脚本是在 document_start 处执行的，但干预似乎发生得太晚，或者不能有效地阻止媒体被获取，而只是在事后隐藏它们。我正在寻求有关策略或 API 的建议，以增强扩展程序更有效地防止这些初始加载的能力。

是否有更有效的方法或我缺少的特定 Chrome API 可以帮助更好地实现此目标？任何有关如何解决此问题的见解或建议将不胜感激。

Answer 1

我建议考虑进行此类扩展时考虑以下几点：

技术问题：在浏览器创建需要加载的资源（例如图像）列表之前，您的扩展程序无法访问文档的 DOM 树。这意味着浏览器很可能会记住最初位于 DOM 中的图像的
1. src

    ，并在您的扩展获得控制权之前开始下载它们。因此，您尝试替换它们只会加载第二组图像（您的图像），从性能角度来看，这更糟糕。

战略性：您的扩展程序无法知道某些特定网站想要加载图像以正常运行的顺序。有些网站必须先加载某些图像才能看起来正确，而其他网站则需要
2. waiting

   （例如，使用 

   onload

    事件）在执行其他操作之前加载某些图像。您的扩展程序将破坏此过程，因为它将改变图像加载优先级，并可能延迟关键资源加载，这反过来又会延迟 

   First Meaningful Paint，这对 SEO 和用户体验不利。
策略性：侵入 HTML 文档加载/解析管道的唯一方法是采用 Chromium 引擎，例如，创建回调函数，在浏览器接收到文档后但在解析文档之前拦截文档，并创建您自己的浏览器基于它，考虑到上面的 N2，这可能太多了。

如果这有帮助，请告诉我。