2013-04-29 4 views
9

Ich habe ein paar Seiten gesehen, die ihre Javascript-Dateien über eine neue Seite in eine Seite geladen haben. Image.src = '';Eine Javascript-Bibliothek als Bild herunterladen?

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

Ich habe mich nur gefragt, die Vorteile und Zweck dieser.

+1

es für das Vorladen von Bildern oder Klick-Tracking verwendet. –

+1

@DavorMlinaric Aber sie laden hier offensichtlich kein Bild. Sie laden jQuery. Klick-Tracking? Könnte sein. –

+1

Können Sie einen Link zu einem realen Beispiel geben?Ich denke, die Absicht ist, die Bibliothek vorab zu laden, so dass ein zukünftiger Abruf aus dem Cache geladen wird (keine Ahnung, warum Sie das jemals tun müssten). – apsillers

Antwort

7

Es ist eine schnelle und schmutzige Möglichkeit, eine HTTP-Anfrage zu initiieren (wie die Kommentare zu der Frage vorschlagen).

Es kann einen kleinen Vorteil ergeben, wenn Sie den Download oben auf der Seite starten und dann <script src='the-same-file.js'></script> unten auf der Seite einfügen, damit die Datei aus dem Browser-Cache geladen werden kann.

Diese könnte ermöglichen die Latenz des Downloads mit einer Parsing-Task parallelisiert werden. Zum Beispiel könnte der Download, der in head initiiert wurde, ausgeführt werden, während der body noch geparst wird.

Warum referenzieren Sie nicht einfach die Datei im Kopf mit dem Attribut src?

Wenn weder [die aufschieben oder async] Attribut vorhanden ist, dann ist das Skript geholt und sofort ausgeführt, bevor der User-Agent weiterhin die Seite Parsen.

Source (suggested reading)

Mit anderen Worten, versucht diese Methode des Browser zu ermöglichen, um die Datei herunterzuladen, ohne dabei bis später das Sperrverhalten entstehen.

jedoch

  • Wenn dies wirklich notwendig ist, würde ich das defer Attribut betrachten, die für solche Zwecke gedacht ist und nicht der new Image() Hack.
  • Diese "Optimierung" könnte je nach cache headers rückgängig machen. Sie könnten am Ende zwei HTTP-Anfragen machen oder sogar die Datei zweimal herunterladen.

"In the Wild"

Eine schnelle Untersuchung von mehreren großen Standorten (Google-Suche, Google Mail, Twitter, Facebook, Netflix) zeigt, dass diese Technik nicht sehr JavaScript-Dateien und verwendet wird, holen sparsam insgesamt.

Facebook scheint es zum Beispiel nicht für Caching/Performance zu verwenden, sondern für Tracking-Zwecke, wenn die Site (möglicherweise böswillig) in ein Frameset geladen wird. Durch Erstellen einer Image Instanz und Festlegen der Quelle initiieren sie eine HTTP-Anforderung an eine Seite, die den clickjacking-Versuch verfolgt.

Dies ist ein Einzelfall; Unter normalen Umständen wird dieses Skript niemals ausgeführt.