Включите мои файлы CSS с JavaScript

Question

Я загружаю изображение моей проблемы. В страницах всегда говорится, что мои файлы CSS замедляют загрузку моих сайтов.

Какое решение для этого? Как добавить эти файлы в javascript или в async-режим?

Мои файлы JS, такие как jQuery, также находятся в теге закрытия тела на нижней части страницы.

Answer 1

CSS ресурсы блокируются по умолчанию, означает, что браузер ожидает содержание будет доступно до рендеринга страницы. Чтобы этого избежать, вы можете попытаться поместить теги ссылок в конец вашего html-файла, который может помочь. Следующая полезная идея - удалить тип носителя (или лучше установить его, когда это будет сделано). Подобно этому браузер загружает файл, но не ждет.

<link rel="stylesheet" 
    href="css.css" 
    media="none" 
    onload="if(media!='all')media='all'"> 

Или вы загружаете полный источник асинхронных сигналов. Без каких-либо дальнейших Lib вы могли бы сделать что-то вроде этого в конце файла HTML:

(function() { 
    // caniuse requestAnimationframe? 
    var raf = window.RequestAnimationFrame || 
     window.mozRequestAnimationFrame || 
     window.webkitRequestAnimationFrame || 
     window.msRequestAnimationFrame; 

    // defer loading of all non criticial CSS 
    function deferLoad() { 

    // put all relevant styles here 
    var asyncStyleSheets = [ 
     '/stylesheets/async-stylesheet-1.css', 
     '/stylesheets/async-stylesheet-2.css' 
    ]; 

    var head = document.getElementsByTagName('head')[0]; 

    for (var i = 0; i < asyncStyleSheets.length; i++) { 
     var link = document.createElement('link'); 
     link.rel = 'stylesheet'; 
     link.href = asyncStyleSheets[i]; 
     head.appendChild(link); 
    } 
    } 

    if (raf) { 
    raf(deferLoad); 
    } else if (window.addEventListener) { 
    window.addEventListener("load", deferLoad, false); 
    } else if (window.attachEvent) { 
    window.attachEvent("onload", deferLoad); 
    } else { 
    window.onload = deferLoad; 
    } 
})(); 

Но знайте, что вы можете разделить ваш CSS в критической части (которые должны быть там до отображения страницы) и некритичную часть, которая может быть загружена после начальной загрузки.

Answer 2

Я исправил проблему с помощью плагина loadCSS. https://github.com/filamentgroup/loadCSS/blob/master/src/onloadCSS.js