it-swarm.com.de

Jeder Vorteil der Verwendung von wp_scripts und is_IE beim Einreihen von Skripten

Ich habe in den WP Dokumenten gelesen, was auf dieses Kernstück hinwies dass die richtige Art, Stile für IE einzuordnen, die Verwendung des $wp_styles ist. Ich vermute, dass dies dann auch für Skripte zutrifft.

Nehmen Sie zum Beispiel diese Beispiele ...

Option Eins - Verwenden von wp_scripts

add_action('wp_print_scripts', function() {
    global $wp_scripts;
    wp_enqueue_script( 'html5shiv', 'https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js', array( 'bootstrap' )  );
    $wp_scripts->add_data( 'html5shiv', 'conditional', 'lt IE 9' );
} );

Option Zwei - Verwende wp_scripts zusammen mit is_IE

add_action('wp_print_scripts', function() {
    global $wp_scripts, $is_IE;
    if($is_IE) {
        wp_enqueue_script( 'html5shiv', 'https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js', array( 'bootstrap' )  );
        $wp_scripts->add_data( 'html5shiv', 'conditional', 'lt IE 9' );
    }
} );

Option Drei - Gib es einfach im Kopf wieder:

add_action('wp_head', function(){
    echo '<!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><![endif]-->' . "\n";
});

Option 4 - Weisen Sie es dem Kopf zu:

add_action('wp_print_scripts', function(){
        wp_enqueue_script( 'html5shiv', 'https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js', array( 'bootstrap' )  );
});

Die zweite Möglichkeit. scheint cool zu sein, weil es auf Browsern ohne Internet Explorer ein wenig sauberer aussieht. Aber ich bin mir nicht sicher, ob es tatsächlich einen Geschwindigkeitsvorteil hat oder ob der Scheck alleine den Geschwindigkeitsvorteil verlangsamt. Abgesehen davon kann ich anscheinend keinen Grund herausfinden, warum Option 1 besser ist als Option 3 oder 4.


Der Grund für diese Frage

Ich verwende das Genesis-Framework und sie enthalten HTML5shiv wie das folgende Beispiel, das mir einfach nicht richtig erschien:

add_action( 'wp_head', 'genesis_html5_ie_fix' );
/**
 * Load the html5 shiv for IE8 and below. Can't enqueue with IE conditionals.
 */
function genesis_html5_ie_fix() {
    if ( ! genesis_html5() )
        return;
    echo '<!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->' . "\n";
}
7
Bryan Willis

Um den @gmazzap Vorschlag zu erweitern, keine globalen Zeichen zu verwenden, wenn Sie wp_scripts() verwenden können, gibt es eine Verknüpfung für wp_scripts() zum Hinzufügen von bedingten Kommentaren mit der Bezeichnung wp_script_add_data und ebenfalls wp_style_add_data für bedingte Stile.

Die korrekte Verwendung von Bedingungen ab Wordpress 4.2 sieht also folgendermaßen aus:

/**
 * IE enqueue HTML5shiv with conditionals
 * @link http://tiny.cc/html5shiv
 */
function wpse_213701_enqueue_html5shiv()  {
    wp_enqueue_script( 'html5shiv',
        'https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js',
        array(),
        false,
        false
    );
    wp_script_add_data( 'html5shiv', 'conditional', 'lt IE 9' );
}
add_action('wp_enqueue_scripts', 'wpse_213701_enqueue_html5shiv');

Im obigen Beispiel wird jedoch HTML5shiv verwendet. Dies ist eine eindeutige Situation. Da in den head geladen werden muss , könnten Sie so etwas wie das folgende Beispiel machen, wenn Sie sich Sorgen über ein Plugin wie Roots Soil machen das alle Skripte aus dem head entfernt.


Höchstwahrscheinlich werden Sie jedoch nicht in eine solche Situation geraten. Es ist eine sehr instabile Sache, da viele Skripte benötigt werden, um in den Kopf geladen zu werden. Das Einfügen von Skripten in die Fußzeile sollte durch Setzen von $in_footer variable auf true erfolgen, wenn Skripten in die Warteschlange gestellt werden. Wenn Sie also Roots oder ein Cache-Plugin verwenden, planen Sie nicht, dass alles sofort nach Ihren Wünschen funktioniert.

Hier ist ein hässliches Beispiel dafür, was Sie tun können:

add_action( 'wp_head', 'wpse_213701_check_html5shiv', 1 );
function wpse_213701_check_html5shiv() {
    remove_action( 'wp_head', 'genesis_html5_ie_fix' );
    if ( !has_filter( 'wp_head', 'wp_enqueue_scripts' ) && !wp_script_is( 'html5shiv', 'done' ) ) {
        add_action('wp_head', 'wpse_213701_echo_html5shiv');
        wp_dequeue_script('html5shiv');
    }
}
function wpse_213701_echo_html5shiv() {
    echo '<!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><![endif]-->' . "\n";
}

Dies ist allerdings übertrieben und es ist immer noch keine Garantie, dass es funktionieren wird. In den letzten 4 Jahren hat html5shiv viele Namen angenommen, die dazu geführt haben, dass es mit verschiedenen Handles registriert/in die Warteschlange gestellt wurde (html5, html5shiv, html5shim, themename-html5shiv, html5-ie-fix und html5- Polyfill, um nur einige zu nennen). Darüber hinaus ist es oft mit modernizr gebündelt . Wenn Sie das obige Beispiel für lächerlich halten, können Sie das Skript auch zu wp_head in Ihrem untergeordneten Design hinzufügen, da ein Plugin-Handle html5shiv höchstwahrscheinlich einen anderen Namen trägt.

Update (Verschieben von Skripten in die Fußzeile mit diesem Ansatz):

Dies löste eine Aktion auf der Seite Roots/Soil Github aus. Hier ist wahrscheinlich der beste Weg, dies zu tun (wie von @grappler vorgeschlagen) und dennoch Skripte in die Fußzeile zu verschieben. Ein ähnlicher Ansatz wurde vor einigen Jahren auf @ kaisers blog veröffentlicht.

function grappler_move_js_to_footer() 
    $scripts = wp_scripts();
    foreach( $scripts->registered as $script ) {
        if ( 'html5' == $script->handle ) {
            wp_script_add_data( $script->handle, 'group', 0 );
        } else {
            wp_script_add_data( $script->handle, 'group', 1 );
        }
    }
}
add_action( 'wp_enqueue_scripts', 'grappler_move_js_to_footer', 99 );

Was Mark Kaplan vorschlug und washier erwähnt wurde, Sie sollten nicht die $ is_IE-Methode von Option 2 verwenden . Wenn der HTTP-Header "Vary: User-Agent" nicht gesendet wird, wird anscheinend die falsche Ausgabe an Benutzer hinter einem Cache gesendet, wodurch dieser für diese Benutzer unterbrochen wird. In Bezug auf die Erkennung durch den Browser hier ist ein langer Thread mit Beispielen wie das gemacht werden könnte. Auch die clientseitige Erkennung birgt Gefahren.


Letztendlich ist es vielleicht die beste Antwort, keine dieser Methoden zu verwenden und die alten Browser zu vergessen, da Microsoft die Unterstützung für diese seit dem 12. Januar eingestellt hat .

5
Bryan Willis

Und Option 5 besteht darin, auf Clientseite zu erkennen, um welchen Browser es sich handelt, und ein Skriptelement für Ihr Skript direkt in der Dom zu erstellen, wie dies bei Google Analytics und einem FB SDK der Fall ist.

Dies hat den Vorteil, dass die Browsererkennung nur an der Stelle durchgeführt werden muss, an der sie durchgeführt werden soll, und dass die IE spezifischen Skripts nur bei Bedarf geladen werden.

Im Geiste ist es Ihrer dritten Option sehr ähnlich, nur allgemeiner.

Nebenbemerkung: is_IE sollte wie alle anderen serverseitigen Browsererkennungen vermieden werden, da sie das Caching unterbrechen.

4
Mark Kaplun

Im Allgemeinen sollten Skripte und Stile niemals direkt auf einer Seite gedruckt werden.

Grund dafür ist, dass ein anderes Plugin oder Thema möglicherweise dasselbe Skript erneut hinzufügt und dasselbe Skript mindestens zweimal hinzugefügt wird.

Wenn Sie ein Asset ordnungsgemäß in die Warteschlange stellen, wird es einmal hinzugefügt, wenn ein anderer Code dasselbe Asset erneut in die Warteschlange stellt.

Aus diesem Grund sollten Sie die Optionen 3 und 4 überspringen.

In Bezug auf Option 2 wird, wie Mark Kaplun hervorgehoben , die serverseitige Browsererkennung verwendet, die niemals sehr erschwinglich ist, und selbst wenn dies der Fall wäre, können Sie die Version nicht auswählen des Browsers und in Ihrem Fall wird es das Skript auch in modernen IE Versionen enthalten, die es nicht benötigen.

Tatsächlich ist also die Option 1 die beste unter den von Ihnen vorgeschlagenen.

Die einzigen Änderungen, die ich machen würde:

  • benutze 'wp_enqueue_scripts' action anstelle von 'wp_print_scripts'
  • verwenden Sie wp_scripts() function, anstatt auf global zuzugreifen

So etwas wie:

add_action('wp_enqueue_scripts', function() {
    wp_enqueue_script(
       'html5shiv',
       'https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js',
       array( 'bootstrap' ),
       '3.7.2',
       false
    );
    wp_scripts()->add_data( 'html5shiv', 'conditional', 'lt IE 9' );
} );

Wenn ein anderes Plugin das Skript 'html5shiv' erneut in die Warteschlange stellt, wird es nur einmal hinzugefügt.

Beachten Sie, dass bei Verwendung des obigen Snippets der Ausdruck auf der Seite wie folgt lautet:

<!--[if lt IE 9]>
<script type='text/javascript' src='https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js'></script>
<![endif]-->

Diese Bedingung wird vom Browser (Client-Seite) und nicht vom Server analysiert. Sie ist daher erschwinglich und ermöglicht das Hinzufügen des Skripts nur für die IE -Version, auf die Sie abzielen möchten.

Wenn Sie mehr über die Client-Plattform wissen möchten (Betriebssystem, Bildschirmtyp und Auflösung, spezifische Detailversion des Browsers ...), können Sie diese Details nur mit etwas Javascript ausfindig machen und das Skript dynamisch zu DOM hinzufügen (gemäß Mark Kaplun Lösung), aber wenn es Ihnen ausreicht, die "Browserfamilie" und die Hauptversion zu kennen, ist mein Vorschlag, diese Lösung zu verwenden.

4
gmazzap