如何在浏览器开始下载资产之前操纵DOM？

Question

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

有没有办法在浏览器开始下载资产之前操纵DOM，严格使用客户端javacript，具体取决于设备和浏览器？

我觉得使用DOMContentLoaded事件（https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded）让我接近......

编辑：我发现mobify.js看起来像我在追求的是：https://www.mobify.com/mobifyjs/v2/docs/

它们提供了一个'捕获API，用于在加载任何资源之前操纵DOM'。它似乎也是通过客户端javascript完成的。将不得不浏览他们在GitHub上的来源，看看他们是如何做到的。

Answer 1

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

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

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

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

http://css-tricks.com/video-screencasts/133-figuring-responsive-images/
http://martinwolf.org/2014/05/07/the-new-srcset-and-sizes-explained/

祝你好运！

Answer 2

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