ASP.NET - Минимизация html-разметки на этапе компиляции

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

Я бы хотел рассказать о том, как можно выполнить такую оптимизацию на этапе компиляции сайта.

Немного теории

Прежде всего, необходимо вспомнить, как генерируется html-разметка в asp.net.

При обработке aspx-, ascx- или master-файла asp.net проверяет, обрабатывался ли этот файл ранее. Если файл обрабатывается впервые, то файл парсится и создаётся связанный с ним ControlBuilder (который используется при повторной обработке файла).

Каждый раз когда необходимо создать Control, связанный с каким-либо файлом, asp.net сначала получает соответствующий ControlBuilder, а потом с помощью него создаёт сам Control.

Это означает, что чтобы вмешаться в генерируемую каким-то файлом html-разметку и оптимизировать её, необходимо это сделать на этапе создания ControlBuilder`а.

Реализация

Для рашения поставленной задачи создадим собственный PageParserFilter. Этот класс позволяет добавить дополнительную логику в обработку, связанную с парсингом страниц.

Прежде всего переопределим его виртуальные методы и свойства:

• AllowBaseType
• AllowCode
• AllowControl
• AllowServerSideInclude
• AllowVirtualReference
• NumberOfControlsAllowed
• NumberOfDirectDependenciesAllowed
• TotalNumberOfDependenciesAllowed

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

Также переопределим метод ParseComplete, добавив в него вызов метода MinifyHtmlInControlBuilder, который который и будет производить всю работу.

Класс ControlBuilder имеет два свойства: SubBuilders и TemplatePropertyEntries.

Свойство SubBuilders имеет тип ArrayList и может содержать в себе как строки, которые нам и надо оптимизировать, так и другие ControlBuilder`ы. Данное свойство используется, когда один элемент управления содержит в себе другие элементы управления. Например, элемент управления PlaceHolder может содержать в себе другие элементы управления.

Свойство TemplatePropertyEntries имеет тип ICollection и содержит объекты типа TemplatePropertyEntry. Данное свойство используется, когда элемент управления содержит в себе шаблоны. Например, элемент управления ListView может содержать в себе шаблоны LayoutTemplate, ItemTemplate и другие.

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

Добавим реализацию метода MinifyHtmlInControlBuilder.

Во-первых, пройдём по всем объектам в свойстве SubBuilders. В случае, если объект является строкой, удалим из неё все лишние символы. Иначе, если объект является ControlBuilder`ом, рекурсивно вызовем для него метод MinifyHtmlInControlBuilder.

Во-вторых, пройдём по всем объектам в свойстве TemplatePropertyEntries и, получая соответствующий для него ControlBuilder через свойство Builder, рекурсивно рекурсивно вызовем метод MinifyHtmlInControlBuilder.

Чтобы не углубляться в способы оптимизации html-разметки, возьмём самый простой алгоритм удаления лишних символов, основанный на регулярных выражениях. Заключается он в том, чтобы удалить все разделительные символы (пробелы, табуляции, переносы строк) до и после символов «<» и «>» соответственно, а затем заменить два или более разделительных символа на один пробел.

Данный алгоритм, к сожалению, не всегда корректно может обрабатывать страницу. Например, он не удаляет html-комментарии, может нарушать текст внутри тегов pre или script. Но в большинстве случаев, если сайт не содержит большого количества скриптов непосредственно в html-разметке, проблем с его использованием возникнуть не должно.

Теперь зарегистрируем наш PageParserFilter в файле web.config.

Осталось только проверить как данный метод будет работать.

Тестирование

Для того, чтобы проверить, как данный метод будет работать на реальном сайте, я установил свежую версию NET Forge CMS с демонстрационными данными, и получил следующие результаты (для страниц, которые есть в главном меню):

• страница «Записи» - до оптимизации 42,9 кб, после оптимизации 40,0 кб (93,2%);
• страница «Блоги» - до оптимизации 14,7 кб, после оптимизации 13, 5 кб (91,8%);
• страница «Форумы» - до оптимизации 14,4 кб, после оптимизации 12,8 кб (88,9%);
• страница «Люди» - до оптимизации 22,3 кб, после оптимизации 20,3 кб (91,0%).

Как видно, в среднем удалось уменьшить размер страниц на 8-10 процентов.

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

К тому же, результаты будут ещё лучше, если вы в своих проектах предпочитаете использовать пробелы вместо символов табуляции (в NET Forge CMS используется табуляция).

Заключение

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

В данной статье я использовал самый простой алгоритм удаления лишних символов. При желании можно создать более сложные и быстрые алгоритмы, которые могут, например, удалять ненужные кавычки у атрибутов без пробелов, удалять ненужные закрывающие теги (такие как li, tr или td) и при этом не будут нарушать текст в тегах pre или script.

Скачать демо (ASP.NET 4.0, Web Site)