Оптимизация загрузки JavaScript CSS

Ответ 1

Моя идея будет загружаться в js и css файлы динамически после document.load. Это не повлияет на время загрузки страницы входа в систему, а также кэширует файлы js и css после входа пользователя.

Вы также можете легко изменить это на document.ready, если он быстрее загружается для вас.

Как насчет этого?

$(document).load(function() {
    function preloadFile(filename, filetype){

        //For javascript files
        if (filetype=="js"){
            var fileref=document.createElement('script');
            fileref.setAttribute("type","text/javascript");
            fileref.setAttribute("src", filename);
        }

        //For CSS files
        else if (filetype=="css") {
            var fileref=document.createElement("link");
            fileref.setAttribute("rel", "stylesheet");
            fileref.setAttribute("type", "text/css");
            fileref.setAttribute("href", filename);
        }

        document.getElementsByTagName("head")[0].appendChild(fileref)
    }

    //Examples of how to use below
    preloadFile("myscript.js", "js"); 
    preloadFile("javascript.php", "js");
    preloadFile("mystyle.css", "css");
});

Ссылки

http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml

Ответ 2

• Добавьте все свои css/javascript на свою страницу входа.
• Поместите все свои css вверху в разделе HEAD.
• Поместите все ваши Javascripts внизу.

• Также создайте свои Javascripts и CSS как внешние файлы, поскольку они кэшируются браузером (вместо написания встроенного javascript и css на странице).

• Измените свой Javascript и CSS

ОБНОВЛЕНИЕ 2

Почтовая загрузка JS и CSS также может быть выполнена с помощью YUI GET UTILITY

Подробнее об этом Yahoo: рекомендации по оптимизации вашего веб-сайта

Ответ 3

Я хочу загрузить все необходимые файлы javascript и css для всего сеанса пользователя во время входа в систему

<title>Login</title>
<script src="foo.js"></script> <!-- This line might be better placed just before </body> -->
<link rel="stylesheet" type="text/css" href="foo.css">

Ответ 4

Я бы рекомендовал асинхронный загрузчик, например. requireJS.

Как только вы создали и сжали javascript и css, назначьте его загрузку для события, например, когда пользователь сосредоточится на поле имени пользователя.

Facebook использует подобный трюк с их запросами типа: загрузка данных, относящихся к пользователю, когда окно поиска получает фокус.