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

Оглавление
20 февраля 2010 г.

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

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

Ошибки в html-коде

Начнем с ошибок. Совершенно незачем сидеть и выискивать ошибки самому. Для этого консорциумом W3C предоставлены специальные сервисы. Код HTML можно проверить с помощью html-валидатора W3C, а каскадные таблицы стилей - с помощью css-валидатора W3C.

У меня на главной странице две ошибки (было на момент написания статьи ) - обе из-за тега кнопки google+, которого нет в спецификации.

<g:plusone href="http://nevor.ru">

проверка кода валидатором

Убираем эти несоответствия и никаких претензий валидатор к моему коду не имеет:

проверка кода валидатором (без ошибок)

Но google+ штука куда более нужная, чем картинка от W3C, поэтому я оставлю эти ошибки там, где они и были. Это не особо существенно, особенно если основной код сайта валидацию проходит.

Работает валидатор W3C только со страницами, размещёнными в сети интернет. Если же вы хотите проверить локальный сайт на предмет ошибок, рекомендую пользоваться плагином HTML Validator для Firefox. Плагин встраивается в интерфейс вкладки просмотра исходного кода обозревателя (вызывается сочетанием клавиш Ctrl + U) обозревателя и базируется на том же алгоритме, что и сервис W3C. Выглядит всё это следующим образом:

плагин валидатора кода для firefox

Плагин не только показывает ошибки, но и дает советы по поводу того, как должно быть. Я думаю, пользователи Firefox по достоинству оценят этот замечательный инструмент разработки.

Кроссбраузерность и стандартизованный код

Есть еще одна внушительная область, именуемая кроссбраузерность. Я уже затрагивал тему кроссбраузерности в этой статье. Хоть это и нельзя назвать ошибками, различия во внешнем виде сайта в разных обозревателях заставляют не редко править исправный (такой вот каламбур) код в угоду капризам обозревателей. Самым капризным был есть и останется Internet Explorer. Есть разные хаки для Internet Explorer, которые позволяют аннулировать эти капризы. Однако, многие из этих способов воспринимаются валидатором как ошибки (по сути ими и являются).

Поэтому я не советую использовать хаки. Вместо этого можно умело пользоваться условными комментариями, о которых я также упоминал в статье, посвящённой кроссбраузерности. Пример ниже демонстрирует как с помощью условного комментария можно разместить на странице ссылку на таблицу стилей исключительно для IE. Т.к. она следует за основной таблицей, её стили будут по правилу каскадности перекрывать предыдущие (конфликтные), давая обозревателю Internet Explorer иные указания.

<link rel="stylesheet" href="style.css" type="text/css">
<!--[if IE]>
<link rel="stylesheet"... type="text/css">
<![endif]-->

Проблема Internet Explorer'а ещё и в том, что от версии к версии ошибки в обработке содержимого html-страниц у этого обозревателя различны. Поэтому некоторые программисты проверяют свои работы отдельно в каждой версии Explorer'а. Задача в некоторых случаях действительно необходимая. А для её выполнения можно (и нужно) пользоваться программой IETester, специально для этого созданной.

Также советую скачать портативные обозреватели с сайта Portableapps.com, распаковать их в отдельные папки, а потом установить и настроить плагин Open width (Firefox) для быстрой и простой проверки сайтов на предмет кроссбраузерности. Различные плееры, галереи и прочие навороты тоже очень желательно просмотреть во всех обозревателях перед тем как внедрять. Благо практически всегда для этого размещают демо-версии. Это что касается ошибок.

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

Теперь немного об оптимизации кода. Заключается она во всяческом упрощении конструкций и решений, дабы как можно более сократить объем кода без потери качества и функционала (оптимизировать). Повторяющиеся участки (как вариант) можно объединить и представить в виде переменной php.

<?php $img="<img src='logo.jpg' alt='лого'>";?>
<?php echo "$img";?>

Очень часто программисты дублируют участки кода или команды вызывают десять раз

echo "<div class='main'>......";
echo "<span class='adress'>.......";
echo "<button id='send' type='button'>.....";
echo "</button></span></div>";

когда можно и нужно один: 

$result ="<div class='main'>......";
$result .="<span class='adress'>.......";
$result .="<button id='send' type='button'>.....";
$result .="</button></span></div>";

echo $result;

Пример примитивный, написан для наглядности, чтобы не усложнять. Поскольку статья скорее об html-вёрстке и оформлении CSS, нежели о PHP, поскольку серверные операции с php-файлами для итоговой страницы не так важны. А вот плохо написанный HTML и CSS – очень!

Стили, часто использующиеся в коде (да и вообще все) нужно выносить в таблицу стилей. Можно часть стилей для одной какой-то страницы вынести в шапку (секция <head>). Но вообще очень желательно использовать именно таблицы стилей и не плодить их без надобности (использовать одну-две). Также код css-файла можно минимизировать с помощью онлайн-сервиса или плагина для обозревателя (Phoneix для Firefox) чтобы он быстрее загружался.

Есть еще один вид ошибок, которые не относятся к коду, но относятся к сайту - орфографические. К ним относятся собственно ошибки, а также опечатки, которые делаются по невнимательности или при наборе текста статьи с полузакрытыми глазами в три часа ночи. Так что проверяйте набранный текст на сервисе Орфограф.

Похожие статьи
блочная и табличная вёрстка

Любому сайту, который выглядит сложнее листа формата А4 с текстом, необходим каркас. Разметка, только уже не гипертекста, а элементов страницы. Нечто вроде полок и стеллажей, на которых вы разложите всю свою информацию, текст, картинки и прочие объекты.

Об эту тему сломано немало копей, каждый хвалит своё болото. На самом деле всё просто: есть спецификация и назначение всех элементов там прописано. Есть элементы структурные, есть для оформления, информационные и т.д.. Я считаю, что каждому способу найдётся своё место при грамотном подходе к проектированию. 

12 апреля 2010 г.
Кроссбраузерность

Главным образом проблема кроссбраузерности возникла в тех масштабах, в которых мы её имеем на сегодняшний день, благодаря обозревателям Internet Explorer компании Microsoft. Сразу отмечу, что ни один обозреватель никогда полностью спецификацию не поддерживал, однако самое большое количество расхождений с ней именно у обозревателей Мicrosoft.

Кроссбраузерность как проблема уменьшается год от года. Если смотреть глобально, то путь к соблюдению стандарта можно сравнить с подъёмом на вершину пирамиды с разных её углов четырёх человек. В конце концов все четверо окажутся на вершине в одной точке. Аналогичная картина происходит сейчас с обозревателями - спорных моментов всё меньше. Соответственно, кроссбраузерности добиться проще, нежели несколько лет назад.

03 июля 2009 г.

Яндекс.Метрика