将 Javascript 库作为图像下载？

Question

我看到一些页面通过 new Image.src =''; 将他们的 javascript 文件加载到页面中。

    <script type="text/javascript">
        new Image().src = "XXXX\/js\/jquery-1.7.2.min.js";
    </script>

我只是想知道这样做的好处或目的。

Answer 1

这是发起 HTTP 请求的一种快速而肮脏的方式（正如问题中的 cmets 所建议的那样）。

在页面顶部开始下载，然后在页面底部包含<script src='the-same-file.js'></script>，这样可以从浏览器缓存中加载文件，这可能会带来一点好处。

这可能允许下载延迟与解析任务并行化。例如，head 中启动的下载可能会在 body 仍在被解析时运行。

为什么不直接使用src 属性在头部引用文件？

如果 [defer 或 async] 属性都不存在，则获取脚本并 在用户代理继续解析之前立即执行 页面。

Source (suggested reading)

换句话说，此方法尝试允许浏览器下载文件，而不会导致阻塞行为，直到该过程的后期。

但是

• 如果确实有必要，我会考虑使用 defer 属性，而不是 new Image() hack。
• 这种“优化”可能会适得其反，具体取决于cache headers。您最终可能会发出两个 HTTP 请求，甚至两次下载文件。

“在野外”

对几个主要网站（Google 搜索、Gmail、Twitter、Facebook、Netflix）的快速调查表明，这种技术不用于获取 JavaScript 文件，并且总体上很少使用。

例如，当网站（可能是恶意）加载到框架集中时，Facebook 似乎不是将其用于缓存/性能，而是用于跟踪目的。通过创建Image 实例并设置源，他们向跟踪clickjacking 尝试的页面发起HTTP 请求。

这是一个孤立的案例；在正常情况下，这个脚本永远不会运行。