Категории раздела
Статьи по html [7]
Статьи по php [8]
Раскрутка сайта [9]
Базы данных [3]
Поисковые системы [6]
Статьи по css [9]
Мини-чат
Наш опрос
Общая оценка сайта
Всего ответов: 34
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Понедельник, 23.10.2017, 04:12
Приветствую Вас Гость
Поиск
Друзья сайта
  • Официальный блог
  • Сообщество uCoz
  • FAQ по системе
  • Инструкции для uCoz
  • Мой сайт
    Главная » Статьи » Статьи по css

    Практический CSS/JS: уменьшаем время загрузки страницы
    Примечание: ниже находится перевод двух близких статей ("Delay loading your print CSS" [http://www.phpied.com/delay-loading-your-print-css/] и "JS includes — the saga continues…" [http://www.phpied.com/javascript-include-ready-onload/]) по оптимизации загрузки страницы при наличии нескольких файлов стилей или скриптов.

    У вас есть два вызова CSS-файлов на странице, например:


    <link type="text/css" rel="stylesheet" href="screen.css"
    media="screen" />
    <
    link type="text/css" rel="stylesheet" href="print.css"
    media="print" />


    Где первый используется для отображения страницы на экране монитора, а второй — для предварительного просмотра и печати. Замечательно.

    Проблема в том, что когда дело касается производительности, то браузер не отображает любую часть страницы (прим.: это не касается Opera, у нее время этого отображения без полной загрузке файлов стилей задано по умолчанию в настройках, посмотреть их можно следующим образом 'preferences' (ctrl-f12) -> 'advanced' -> 'browsing' -> 'loading' или 'инструменты' -> 'настройки' -> 'дополнительно' -> 'перемещение' -> 'загрузка'), пока не загрузит все файлы стилей. Это включает, в том числе, и файлы стилей, которые не предназначены для того устройства, с помощью которого производится отображение страницы. Другими словами, браузер не покажет страницу, пока не загрузит и файл стилей для принтера, хотя он совсем и не требуется для визуализации страницы. Это неправильно (that sucks), и должно быть исправлено в следующих версиях браузеров.

    Проверка


    Я создал тестовую страницу для того, чтобы это проверить — print.php. Она включает 2 файла стилей, первый умышленно «засыпает» (sleep()) на 5 секунд, а второй — на 10.

    В результате и в Firefox, и в IE загрузка страницы идет 15 секунд до того, как страница отобразится. Ниже картинка Firebug'а:


    В Safari для Windows потребовалось только 10 секунд в первый раз, оба файла стилей загружались параллельно. Отлично. Плохо, что после перезагрузки первый CSS-файл не был даже запрошен с сервера. Я попробовал еще несколько раз, иногда я получал ошибку «The error was: "unknown error" ((null):10053)» (прим.: проверил в Safari — такой ошибки не заметил, может быть, у автора была старая бета?).

    Итак, решение первое


    Для увеличения скорости отображения страницы в браузере нам, фактически, не требуется загрузка всех файлов стилей. И они могут быть загружены уже после загрузки и отображения страницы, в фоновом режиме. После того, как пользователь увидит визуализированную страницу, с которой уже можно что-либо делать, мы можем загружать дополнительные файлы стилей (и JavaScript, если потребуется), используя DOM-методы подключения скриптов и стилей.

    Вкратце о методе: с помощью DOM-методов создаются новые элементы style и script. Затем к ним добавляются обработчики событий, onload и onreadystatechange, которые будут сигнализировать, прошла загрузка успешно или нет. Тут демо-версия, а ниже приведен листинг кода.


    var css;
    function
    include_css(css_file) {
    var
    html_doc = document.getElementsByTagName('head')[0];
    css = document.createElement('link');
    css.setAttribute('rel', 'stylesheet');
    css.setAttribute('type', 'text/css');
    css.setAttribute('href', css_file);
    html_doc.appendChild(css);

    // alert state change
    css.onreadystatechange = function () {
    if (
    css.readyState == 'complete') {
    alert('CSS onreadystatechange fired');
    }
    }
    css.onload = function () {
    alert('CSS onload fired');
    }
    return
    false;
    }

    var
    js;
    function
    include_js(file) {
    var
    html_doc = document.getElementsByTagName('head')[0];
    js = document.createElement('script');
    js.setAttribute('type', 'text/javascript');
    js.setAttribute('src', file);
    html_doc.appendChild(js);

    js.onreadystatechange = function () {
    if (
    js.readyState == 'complete') {
    alert('JS onreadystate fired');
    }
    }

    js.onload = function () {
    alert('JS onload fired');
    }
    return
    false;
    }



    Результаты: как вы могли предположить, результаты различаются в IE и Firefox.

    • Подключение CSS — IE выводит оба сообщения, сначала onload, затем onreadystatechange. В Firefox'е ничего не происходит.
    • Подключение JS — IE выводит сообщения для onreadystatechange. Firefox — для onload. Оба сначала выполнят скрипт, а потом только выведут сообщение по событию.

    Выводы:

    • По всей видимости, для кросс-браузерного подключения файла скрипта необходимо добавлять оба обработчика событий — onload и onreadystatechange
    • В IE есть два способа сообщить о том, загрузился ли CSS-файл

    Прим.: лично мне этот способ кажется несколько искусственным и не настолько кросс-браузерным, как хотелось бы.

    Решение второе


    Это решение было описано позже в комментариях читателей. Они предложили просто добавить

    @media print {…}

    в конец основного файла стилей. Таким образом, будет загружаться всегда только один файл (прим.: это и более элегантное решение с точки зрения уменьшения запросов к серверу).
    Категория: Статьи по css | Добавил: stazis (15.05.2009)
    Просмотров: 773 | Рейтинг: 0.0/0
    Всего комментариев: 0
    Copyright MyCorp © 2017

    Сделать бесплатный сайт с uCoz