将Javascript库下载为图像？

Question

我看过几页通过新的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属性引用头文件？

  

如果既没有[defer或async]属性，则提取脚本并且   在用户代理继续解析之前立即执行   页。

Source (suggested reading)

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

<强>然而

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

“在野外”

对几个主要网站（谷歌搜索，Gmail，Twitter，Facebook，Netflix）的快速调查显示，此技术不用于获取JavaScript文件，并且整体使用非常谨慎。

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

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