Начальная загрузка. Нужен совет по локальному файлу CSS и ссылке CDN

Я очень новый и зеленый, поэтому, пожалуйста, простите основной вопрос. Когда я создаю сайт с помощью Bootstrap, я считаю, что включаю ссылку на файл CDN Bootstrap в раздел заголовка каждой страницы, а также включаю ссылку на свою собственную таблицу стилей CSS. Это правильно? Или я могу поместить ссылки на файлы cdn в свою таблицу стилей, а затем просто поместить ссылку на таблицу стилей в раздел заголовка HTML на каждой странице?

Тот же вопрос относительно JavaScript. Нужно ли ссылаться на файл cdn на каждой странице моего сайта?


person Gone Away    schedule 12.01.2015    source источник


Ответы (2)


Всегда хорошо включать ссылки js и css cdn на каждую страницу, или вы можете загрузить их и добавить в свой проект, а также включить в свою таблицу стилей.

Не добавляйте ссылку cdn в свой css.

person Prashanth R    schedule 12.01.2015
comment
Благодарю вас! Так что для ясности в моем запутанном мозгу. Каждая страница будет содержать ссылки на файлы Bootstrap CDN и Java, а также ссылку на мой лист CSS. Имеет ли значение в разделе заголовка, если я поставлю ссылку CDN или CSS первой? - person Gone Away; 12.01.2015
comment
‹head› ‹link href=css/bootstrap.min.css rel=stylesheet› ‹/head› и включите js непосредственно перед тегом ‹/body› - person Prashanth R; 12.01.2015

Это зависит от того, что вы хотите. Вы собираетесь на скорость страницы?

Если вы хотите оптимизировать свой веб-сайт для увеличения скорости страницы, я рекомендую объединить файлы CSS и JavaScript в отдельные файлы (есть инструменты для автоматизировать этот процесс). Кроме того, если вы действительно хотите оптимизировать свой веб-сайт для скорости загрузки страниц, вы можете динамически применять комбинацию CSS и JavaScript, поместив следующий фрагмент непосредственно перед закрывающим тегом body, чтобы HTML-код можно было отобразить перед выполнением Javascript:

<script type="text/javascript">
    function (sources) {
        for (var i = 0; i < sources.length; i++) {
            var head = document.getElementsByTagName('head')[0];
            var script = document.createElement('script');
            script.type = 'text/javascript';
            script.src = sources[i];
            head.appendChild(script);
        }
    })([
            '//domain.com/combined.js'
    ]);
</script>

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

Для листов я использую следующий алгоритм:

Определите, является ли это первым просмотром страницы сеанса: если да, вставьте комбинированный CSS в тег head:

<html>
    <head>
        <style><? echo file_get_contens('./path_to_combined_style.css'); ?></style>
    </head>
</html>

Если нет, просто включите ссылку CSS в тег head:

<html>
    <head>
        <link rel="stylesheet" href="//domain.com/path-to-combined-style.css" type="text/css" />
    </head>
</html>

Затем вы можете принудительно кэшировать стиль CSS при первой загрузке, выполнив XMLHttpRequest, для простоты я использую jQuery здесь:

$(document).ready(function(){

    var href = "//domain.com/path-to-combined-style.css";

    $link = $("link[href='" + href + "']");

    if ($link.size() === 0) {
        $.get(href);
    }

});

Вы можете поместить это в комбинированный JavaScript.

Обратите внимание, что вы не сможете использовать преимущества скорости CDN. Чтобы решить эту проблему, вы можете опубликовать свои объединенные ресурсы в свой собственный CDN. Однако вы потеряете возможность того, что пользователь уже кэшировал загрузочную загрузку.

Конечно, весь этот процесс требует определенных знаний и опыта, поэтому вы можете рассмотреть возможность использования такого инструмента, как CloudFlare, который делает довольно хорошую работу по оптимизации вашего сайта.

person Tim    schedule 12.01.2015