如何在浏览器开始下载资源之前操作 DOM？答案

【问题标题】：How to manipulate the DOM before the browser starts downloading assets?如何在浏览器开始下载资源之前操作 DOM？
【发布时间】：2014-12-20 17:56:02
【问题描述】：

我想为所有浏览器和设备提供相同的 DOM，例如台式机、平板电脑、手机等。但是，我不希望仅用于台式机的资产（图像、样式表等）在移动设备上下载并浪费 HTTP 请求和带宽。

是否有任何方法可以在浏览器开始下载资产之前操作 DOM，严格使用客户端 Javacript，具体取决于设备和浏览器？

编辑：我发现 mobify.js 似乎符合我的要求：https://www.mobify.com/mobifyjs/v2/docs/

它们提供了“在任何资源加载之前操作 DOM 的捕获 API”。它似乎也是使用客户端 Javascript 完成的。必须在 GitHub 上查看他们的源代码，看看他们是如何做到的。

【问题讨论】：

我认为您想在第二句话中提出问题，例如，您应该如何以响应式方式构建您的网站以最大限度地减少 HTTP 请求和下载。 DOMContentLoaded 可以在页面加载之前运行。不过，我认为有响应式技术可以做得更好（or at least intelligently）。
@JaredFarrish，这是真的。在这种情况下，我有几张特别是只在桌面上使用的图像，当他们不打算使用它们时，让那些在移动设备上下载的图像是一种浪费。我希望能够在下载之前使用 javascript 从 DOM 中删除，当功能检测让我知道我正在为移动浏览器提供服务时。
@Louis 如何在下载任何图像之前运行一些 javascript 可能是一个更好的问题。

【解决方案1】：

adaptive images 是发送设备适当图像的一个简单选项。它将根据您设置的断点和访问者的屏幕尺寸调整图像大小。

我特别喜欢这个特定解决方案的一点是，它也很容易安装到现有网站。您可以尝试一下，如果它非常适合您的网站，那么您就可以离开了。

有一些 JS 技术可以根据屏幕大小或视口发送不同的 CSS 文件。我过去使用过一个，但是 FWIW 我发现如果你最小化和压缩你的 CSS 文件，几乎没有什么收获，它只会增加一层复杂性。您的时间最好花在尝试节省图像带宽上。

编辑
另一种可能对您有用的可能性是较新的 srcset 属性，有几个链接可以帮助您入门：

祝你好运！

【讨论】：

【解决方案2】：

我唯一能想到的是有点幼稚，并且暗示使用“document.write”来包含“img”标签仅用于桌面连接。但是，您还指出您希望所有设备都使用相同的 DOM，而在这种情况下会有 javascript 元素。不幸的是，您不想从服务器端这样做，这会更容易和干净。

【讨论】：

是的，我有点想反其道而行之，在下载图片之前执行$('img').remove(); 之类的操作。
仍然不够，因为您想为所有设备保留 DOM，但 remove 方法显然会弄乱 DOM。
@ADASein，我想每次从服务器发送相同的 HTML，然后在下载资产之前使用 javascript 在客户端影响它。特别是，我想在将桌面所需的图像下载到移动浏览器之前从 DOM 中删除它们。