将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]属性,则在用户代理继续解析页面之前,立即获取并执行脚本.

来源(建议阅读)

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

然而

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

"在野外"

对几个主要网站(谷歌搜索,Gmail,Twitter,Facebook,Netflix)的快速调查表明,这种技术不用于获取JavaScript文件,并且整体使用非常谨慎.

例如,Facebook似乎不会将其用于缓存/性能,而是用于在将网站(可能被恶意地)加载到框架集中时进行跟踪.通过创建Image实例并设置源,它们向跟踪点击劫持尝试的页面发起HTTP请求.

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