как объединить структуру веб-приложения виджета с SEO-дружественными файлами CSS и JS - PullRequest
6 голосов
/ 23 мая 2010

Я пишу веб-приложение, используя Zend Framework и систему доморощенных виджетов.Каждый виджет имеет контроллер и может отображать одно из множества представлений, если выберет.Это действительно помогает нам модульно модифицировать и повторно использовать виджеты в любом месте на сайте.

Проблема в том, что представления каждого виджета содержат свой собственный код JS и CSS, что приводит к очень грязному HTML-коду, когда вся страница собрана вместе.Вы получаете карманы стиля и теги сценария везде.Я уверен, вы знаете, что это плохо по многим другим причинам, но это также сильно сказывается на нашем SEO.

Несколько решений , которые мне удалось найти:

  1. Разделите CSS и JS каждого представления каждого виджета на егособственный файл - это имеет серьезные недостатки для времени загрузки (гораздо больше ресурсов нужно загружать отдельно), и это делает кодирование очень трудным, так как теперь вам нужно открыть 3-4 файла, чтобы редактировать виджет.

  2. объединение всех CSS виджетов в один файл (то же самое с JS) - также приведет к массовой загрузке, когда кто-то входит на сайт, смешивает CSS и JS для всехвиджеты, поэтому их сложнее отслеживать и другие проблемы, о которых, я уверен, вы можете подумать.

  3. Создайте систему, которая использует метод 1 (отдельные CSS и JS для каждого виджета), при доставке страницы объединяет все CSS и JS вместе.Очевидно, что для этого требуется больше времени на обработку и, конечно, на создание такой системы и т. Д.уже существующие решения (или любые технологии, которые могут вам помочь) решают эту проблему.Я очень ценю все ваши мысли и комментарии!

    Спасибо, ребята,

    Али

Ответы [ 3 ]

2 голосов
/ 23 мая 2010

Используя метод 2, вы сможете воспользоваться преимуществами кэширования браузера. Если это уместно, если на сайте есть страница входа в «парадную дверь» с навигацией и т. Д. И нет необходимости в библиотеке виджетов, вы можете предварительно загрузить CSS и JS для других страниц после загрузки целевой страницы .

Если вы запускаете свой JS через что-то вроде YUICompressor, а затем убедитесь, что сервер сжал файлы JS и CSS, вы действительно не будете говорить об этом, если ваш код не слишком дряблый. Если вы используете библиотеку, размещенную на надежном сайте, таком как хранилище API Google, вы, вероятно, сможете уменьшить собственный код. (Я ничего не знаю о Zend, так что это может или не может иметь отношение.)

1 голос
/ 30 мая 2010

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

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

Styles::add_sheet('widget_1.css');

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

if (Styles::cache_needs_update()) {
  // rebuild (concatenate) stylesheet and save in cache
}

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

Приведенные выше примеры кода станут чем-то вроде

Styles::add_sheet('widget_1.css','group_name');

if (Styles::cache_needs_update('group_name')) {
  // rebuild (concatenate) stylesheet for this 'group_name' and save in cache
}
0 голосов
/ 23 мая 2010

Не уверен, возможно ли это в PHP, но если вы можете отложить передачу страницы до тех пор, пока страница не будет обработана;

  • чтобы каждый виджет регистрировал свое включение на странице, используя статический метод
  • поместить хук в конвейер рендеринга, который считывает и объединяет все необходимые ресурсы для включенных виджетов
  • изменить ответ, включив ресурсы
  • отправить ответ клиенту
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...