9

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

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

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

4

1 回答 1

7

这是发起 HTTP 请求的一种快速而肮脏的方式（正如对问题的评论所暗示的那样）。

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

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

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

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

来源（建议阅读）

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

然而

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

“在野外”

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

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

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

于 2013-04-29T19:14:27.003 回答