Как программист ASP, вы не будете сомневаться в важности повышения производительности ваших веб-приложений. Чтобы ваша программа работала быстрее, вы, возможно, были заняты оптимизацией базы данных или COM-компонента. Если вы все это сделали, задумывались ли вы когда-нибудь об улучшении производительности за счет увеличения скорости отображения окончательно сгенерированного HTML-кода в браузере? Для конечного пользователя, если страница будет отображаться быстрее, вы получите больше похвал.
Улучшить скорость отображения HTML в вашем браузере можно с помощью некоторых малоизвестных методов.
1. Использовать вложенность таблиц?
Создание сложных структур на странице обычно достигается путем размещения на странице таблиц HTML. Если вы хотите создать такую страницу: На этой странице есть верхняя панель навигации, левая панель навигации и правая область содержимого. Вы можете создать это, используя большую таблицу с двумя строками и двумя столбцами. В первой строке объедините два столбца и вставьте верхнюю панель навигации. В левый столбец второй строки вставьте таблицу для отображения кнопок навигации. В правом столбце разместите таблицу для отображения фактического содержания. (См. рис. 1) Код, созданный такой вложенной таблицей, выглядит следующим образом:
<TABLE BORDER="0">
<ТР>
<TD COLSPAN="2"><!-- содержимое верхней панели навигации --></TD>
</TR>
<ТР>
<TD ALIGN="LEFT" VALIGN="TOP"><!-- содержимое левой панели навигации --></TD>
<TD ALIGN="LEFT" VALIGN="TOP"><!-- содержимое основной части страницы --></TD>
</TR>
</TABLE>
Однако на самом деле, когда браузер находит тег <TABLE>, он не отображает страницу на экране сразу, пока не найдет соответствующий закрывающий тег </TABLE>. Таким образом, если вся ваша страница находится в таблице, ничего не будет отображаться до тех пор, пока не будет получен последний </TABLE>. Таким образом, страница не будет видна пользователю до тех пор, пока не будет загружен весь файл. Если объем данных страницы относительно велик (например, результаты поиска в поисковых системах), эта функция будет вызывать временные паузы. Чтобы предотвратить такую ситуацию, во время производства страницу можно разделить на множество небольших таблиц. Когда HTML-код из каждого <TABLE> в соответствующий </TABLE> загружается, браузер отобразит его. С точки зрения посетителя страница появляется постепенно, часть за частью, все больше и больше появляясь на экране. Такое ощущение, что скорость отображения такой страницы быстрее, чем загрузка всего файла и его повторное отображение.
Следуя этому принципу, для изучения предыдущего примера всю большую таблицу на странице следует разделить на три отдельные таблицы. Используйте первую таблицу, чтобы отобразить верхнюю панель навигации, отрегулируйте ее ширину так, чтобы она была достаточно большой, чтобы вместить все содержимое, и завершите ее в блоке <TABLE></TABLE>. В нижней половине страницы выстроена вторая слева таблица. Используйте третью таблицу для хранения фактического содержимого. (См. рис. 2). Поскольку каждая часть представляет собой полную таблицу, каждая часть кода будет отображаться сразу после загрузки. Таким образом, верхняя и левая панели навигации будут выделяться больше, чем остальная часть страницы. Пользователь представит, что страница в это время начнет загружаться и вскоре отобразится на экране. Это намного лучше, чем оставлять пользователя перед пустым экраном в течение длительного периода времени.
Модифицированный код выглядит следующим образом:
<TABLE BORDER="0" WIDTH="100%">
<ТР>
<TD ALIGN="CENTER" VALIGN="TOP"><!-- содержимое верхней панели навигации --></TD>
</TR>
</ТАБЛИЦА>
<TABLE BORDER="0" ALIGN="LEFT">
<ТР>
<TD ALIGN="LEFT" VALIGN="TOP"><!-- содержимое левой панели навигации --></TD>
</TR>
</ТАБЛИЦА>
<ГРАНИЦА ТАБЛИЦЫ="0">
<ТР>
<TD ALIGN="LEFT" VALIGN="TOP"><!-- содержимое тела страницы --></TD>
</TR>
</TABLE>
2. Также не забудьте закрыть другие теги.
В приведенном выше примере мы можем ускорить отображение страницы в браузере, просто закрыв тег <TABLE> раньше. По аналогии, есть несколько похожих тегов, имеющих такие же характеристики.
Например, сгенерируйте теги <OPTION> для списков и полей со списком и теги <LI> для элементов списка. Обычно программисты ASP получают доступ к базе данных и отправляют данные в поле списка или поле со списком, созданное с помощью <OPTION>. На этом этапе в коде прописывается закрывающий тег <OPTION>. Такое простое изменение также может ускорить отображение страницы. в браузере.
Не используйте такой код:
Делайте, пока не objRS.EOF.
strOptionList = strOptionList & "<OPTION VALUE=""" & objRS("ID") &_""">"& _objRS("ProductName")
objRS.MoveNext
Циклический
ответ. Напишите "<SELECT SIZE=""1"">" & strOptionList & "</SELECT>"
Чтобы использовать такой код:
выполните while not objRS.EOF
strOptionList = strOptionList & "<OPTION VALUE=""" & objRS("ID") & _ """>" & objRS("ProductName") & "</OPTION>"
objRS.MoveNext
Циклический
ответ. Напишите "<SELECT SIZE=""1"">" & strOptionList & "</SELECT>".
Не используйте такой код:
<UL>
<LI>Яблоки
<LI>Апельсины
<LI>Бананы
</UL>
Используйте такой код:
<UL>
<LI>Яблоки</LI>
<LI>Апельсины</LI>
<LI>Бананы</LI>
</UL>
Теперь посмотрите, быстрее ли отображается ваша страница в браузере?
Пожалуйста, не стоит недооценивать важность этих изменений для повышения производительности приложений ASP. Возможно, в книгах или онлайн-материалах типа «Советы и подсказки», которые вы можете найти, редко упоминается оптимизация HTML-кода для ускорения работы вашей программы. Однако применение этих технологий на практике действительно может значительно улучшить производительность программы.