2012-06-15 11 views
29

Ich versuche, meine Seiten zu optimieren, indem ich einige async Attribute in meine Skripte einfüge. Es scheint mein Javascript zu brechen, da $(document).ready ausgeführt wird, bevor alle Skripte geladen werden!Async und Dokument bereit

Ich sah, dass ich mein Problem lösen kann, indem ich $(window).load statt $(document).ready setze, aber ich fragte mich, ob es eine bessere Lösung gibt. Diese Lösung Trigger 2 Probleme in meinem Fall:

  1. Ich habe alle $(document).ready und sagen alle developpers ändern es nicht mehr wird
  2. Die Skripte ausgeführt werden, verwenden, nachdem alle Bilder geladen sind. Meine Website hat viele schwere Bilder und ich brauche wirklich einige Skripte, die so schnell wie möglich ausgeführt werden, nachdem dom bereit ist.

Haben Sie einige Zaubertricks? Vielleicht alle Skripte am Ende? Verwenden Sie defer anstelle von async?

Antwort

26

Nach einigen umfangreichen Recherchen kann ich definitiv sagen, dass es am besten ist, Skripte am Ende der Seite zu platzieren.

Yahoo stimmt mir zu: http://developer.yahoo.com/performance/rules.html#js_bottom

Google über diese Praxis nicht sprechen und scheint Asynchron-Skripte zu bevorzugen: https://developers.google.com/speed/docs/best-practices/rtt#PreferAsyncResources

IMHO, hat mehrere Vorteile gegenüber Asynchron/script am Ende der Seite setzen aufschieben:

  • Es wird für alle Browser arbeiten (ja, auch IE;))
  • Sie die Ausführungsreihenfolge garantieren
  • Sie müssen $(document).ready oder $(window).load nicht verwenden
  • Ihre Skripte ausführen können, bevor Sie Ihre Bilder
  • Als async/verschieben, um Ihre Seite angezeigt wird schneller
  • Wenn der DOM löst das Ereignis ready, alle Skripte geladen werden geladen
  • durch die Zusammenlegung aller js in einer Datei problemlos optimiert werden kann (durch ein Werkzeug wie mod_pagespeed)

der einzige Nachteil, dass ich sehen kann, ist, dass der Browser die Downloads nicht in der Lage sein wird, parallelisieren . Ein guter Grund, async/defer stattdessen zu verwenden, ist, wenn Sie ein Skript haben, das vollständig unabhängig ist (sich nicht auf die Ausführungsreihenfolge verlassen muss) und nicht zu einem bestimmten Zeitpunkt ausgeführt werden muss. Beispiel: Google Analytics.

+0

Die Ausführung wird nicht vollständig garantiert, indem sie im DOM abgelegt werden. Wenn Sie zu viel JavaScript und/oder HTML für den Browser haben, benötigen Sie Requiresjs oder einen anderen Systemlader wie diesen. Ich sah Design, das nur mit komprimiertem JavaScript funktionierte, weil es zu viel war. Es war ein Bootstrap 3.x responsives Thema mit Effekten beim Scrollen auf der Seite. – alpham8

Verwandte Themen