GetInfo.Ru – Компьютерная библиотека
Последние поступления
Как выбрать систему управления базы данных
Базы данных03/09/14
Этапы загрузки UNIX (в схеме)
Unix27/03/12
Gatewall Antispam: тотальный контроль электронной почты
Спам21/04/11
Мастер-класс: создаем Интернет-магазин (Часть 1)
Обзоры ПО20/04/11
CorelDRAW Graphics Suite X5: Что нового?
Обзоры ПО20/07/10
Добавить статью
Самые читаемые материалы
Создание рамок(16211)
Особенности верстки веб-страниц(12821)
Правила грамотной верстки сайта(9662)
Как оформить таблицу?(9643)
Несколько слов о <META HTTP-EQUIV...>(8756)
Всего статей: 793Всего авторов: 364Подразделов: 47Добавлено за сутки: 0
Статьи  СТАТЬИ Форум  ФОРУМ Рейтинг  РЕЙТИНГ Поиск  ПОИСК Контакты  КОНТАКТЫ
» Главная » HTML » Оптимизация кода

Оптимизация кода


Влад Мержевич
vlad@htmlbook.ru
http://www.htmlbook.ru/

Веб-страницы в своей основе являются простыми текстовыми документами, а, как известно, текст занимает, по сравнению с теми же рисунками, очень мало места. Один символ — один байт, что на фоне многокилобайтных фотографий выглядит просто смешно. Но не стоит забывать, что сайт это сочетание множества веб-страниц и может включать в себя десятки, сотни и тысячи документов. Помножив выигрыш в уменьшении кода на объем страниц, в итоге можно получить совершенно впечатляющие результаты по выигрышу в скорости. Кроме того, некоторые правила хороши уже сами по себе и их стоит взять на вооружение только за это.

Оптимизируйте код HTML
Для оптимизации документов HTML разработаны специальные программы, которые позволяют сократить размер файлов. Уменьшения, как правило, незначительные, но при большом количестве документов выигрыш может получиться существенным. Сокращение файлов идет за счет некоторых приемов: замена идущих подряд пробелов одним, стирание лишних тегов, пробелов, переносов строк и др.
Можно обойтись и любым текстовым редактором, заменяя идущие подряд два пробела одним. Такую процедуру следует повторять до тех пор, пока количество сделанных замен не станет равным нулю. Эта простая технология конечно не заменит программы, работающих с большим количеством файлов и данных, но в некоторых случаях может и пригодиться.

Применяйте кавычки там, где они требуются
Кавычки применяются при определении значений параметров тегов. Например, цвет текста фона и ссылок на странице указывается так:

<body bgcolor="#A0BEC4" text="#000000" link="#003366" vlink="#660066">

На самом деле, кавычки можно опустить и применять их только в скриптах и в значениях параметров, где требуется пробел между словами. В других местах их использовать необязательно, так что "#A0BEC4" спокойно можно заменить на #A0BEC4.

<body bgcolor=#A0BEC4 text=#000000 link=#003366 vlink=#660066>
<img src=1.gif alt="А здесь кавычки нужны, потому как пробелы стоят">

Используйте табуляцию вместо пробелов
Добавление множества пробелов улучшает вид кода, но оно же и увеличивает его объем. Если требуется обязательно сделать отступы, используйте знак табуляции. Табуляция заменяет собой сразу несколько пробелов, но при этом в памяти хранится как один символ. На клавиатуре компьютера обычно обозначается как Tab.

Убирайте повторяющиеся одинаковые теги
Некоторые программы для редактирования веб-страниц автоматически разбивают один тег на составляющие, добавляя в них только по одному параметру. Этот процесс следует контролировать и не допускать подобных инсинуаций со стороны редакторов.

Неправильно:
<font size=4><font color=#003366>Дорогие друзья!</font></font>

Более верно:
<font size=4 color=#003366>Дорогие друзья!</font>

Данную рекомендацию можно рассматривать как устаревшую, в связи с широким распространением стилей. Приведенный выше пример в этом смысле является неудачным. Тег FONT рекомендуется вообще забыть, а его результат заменить тегом SPAN:

<span class=welcome>Дорогие друзья!</span>

Где сам класс welcome должен быть описан в стилевой таблице.

Замена рисунков текстом
Конечно, ни один текст по возможностям не сравнится с графическим редактором. Но в некоторых случаях это и не требуется, особенно, когда нужно сделать что-нибудь простое и незамысловатое. С помощью обычных символов, таких как, двоеточие и точка, можно построить декоративные элементы, которые встречаются на многих сайтах.

В нашем распоряжении есть следующие символы, которые подобно набору конструктора позволяют создавать небольшие <изображения>: двоеточие (:), точка (.), специальный символ &middot; (он ставит небольшой маркер), теги SUP и SUB, они, соответственно, делают верхний и нижний индекс, приподнимая или опуская, таким образом, текст (пример 1).

Пример 1. Использование текста <h1>::</h1>
<h1>.::.</h1>
<h1>:&middot;</h1>
<h1>..&middot;&middot;::</h1>
<h1>.<sup style="font-size: 120%">.</sup>.</h1>


::

.::.

..··::

...

Более широкие возможности текста при содействии стилей и слоев показаны в примере 2.

Пример 2. Использование стилей и слоев <div style="font-family: Times, serif; font-size: 200%">
T<span style="position: relative; top: 10px">E</span>X и L<span style="position: relative; top: -5px; font-size: 80%">A</span>T<span style="position: relative; top: 10px">E</span>X</div>


TEX и LATEX

Популярные системы ТЕХ и LATEX имеют свою оригинальную форму написания, подчеркивая тем самым возможности, которые в них заложены. А что нам их возможности, у слоев и стилей тоже возможности ого-го какие, так что даже такая хитрая надпись легко получается с помощью простого кода.

Убирайте лишние теги
Теги ведь не зря придумывали в таком количестве. Раз они есть, значит для чего-то нужны. Но в процессе эволюции сами собой отошли малоиспользуемые и даже ненужные экзепляры, оставив на своих местах выживших. Теперь некоторые теги можно вообще удалить как нерезультативные, либо заменить их другими, с подобными же функциями. В таблице приведены несколько таких тегов или их сочетаний.

Тег Чем лучше заменить
<strong> <b>
<em> <i>
<strike> <s>
<font> стилем

Следующие теги можно вообще безболезненно удалить:

<meta name="ProgId"...>, <meta name="GENERATOR"...>, <meta name="AUTHOR"...>.

 
02.12.2003
Версия для печати Версия для печати Запомнить ссылку Запомнить ссылку
Ваша оценка:  1   2   3   4   5     

 О проектеПерепечаткаАвторамПартнерыО нас пишут
Наверх
©2003—2007. GETINFO.RU. ВСЕ ПРАВА ЗАЩИЩЕНЫ.