Lazy Load Resources založené na přítomnosti prvku

Fanoušci AMD JavaScript vám pravděpodobně řeknou, že milují načítání pouze toho, co potřebují, když to potřebují. Jsem jedním z těch lidí. Vezměme si například web, jako je ten můj:některé stránky vyžadují zvýrazňovač syntaxe, některé ne. Proč se namáhat načítáním CSS a JavaScriptu zvýrazňovače syntaxe, když neexistuje pre prvky, které by to vyžadovaly?

Následuje příklad toho, jak příležitostně načtu zdroje založené na obsahu DOM:

$('article pre').length && (function() {
        var mediaPath = '/assets/';

        $('').attr({
            type: 'text/css',
            rel: 'stylesheet',
            href: mediaPath + 'css/syntax.css'
        }).appendTo(document.head);

        var syntaxScript = document.createElement('script');
        syntaxScript.async = 'true';
        syntaxScript.src = mediaPath + 'js/syntax.js';
        document.body.appendChild(syntaxScript);
    })();

Argumenty proti této praxi budou (1) zřetězení do stávajících JS a CSS, aby se ušetřil počet požadavků, a (2) bleskové změny stylu obsahu. První argument je třeba posuzovat individuálně; pokud je požadovaný CSS a JS malý, měl by být zřetězen do souboru používaného v celém webu nebo podsekci webu. Druhý argument lze vždy utišit trochou přechodové magie!