javascript - 将 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 请求的一种快速而肮脏的方式(正如对问题的评论所暗示的那样)。

在页面顶部开始下载然后包含 <script src='the-same-file.js'></script> 可能会获得一些小优势。在页面底部，以便可以从浏览器缓存中加载文件。

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

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

If neither [the defer or async] attribute is present, then the script is fetched and executed immediately, before the user agent continues parsing the page.

Source (suggested reading)

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

但是

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

“在野外”

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

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

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