Хотя размер файла веб-страницы, измеряемый в К, на самом деле незначителен для сегодняшней пропускной способности, как оптимизировать файл веб-страницы, измеряемый в К, до минимума, по-прежнему является одной из проблем, которую веб-дизайнерам следует учитывать.
Как мы все знаем, чем меньше размер файла веб-страницы, тем лучше, не затрагивая структуру и функции всей веб-страницы, поскольку меньшие файлы веб-страницы помогают браузеру сократить время интерпретации веб-страницы, а обычные посетители не имеют к лицу Раздражение от ожидания медленного открытия веб-страниц еще более очевидно для пользователей с низкой пропускной способностью и низкой скоростью Интернета. Представьте себе, хотели бы вы, чтобы при открытии сайта перед вами сразу же появлялся весь сайт? Или вы предпочитаете потратить более десяти секунд или даже нескольких минут на просмотр всего сайта, который шаг за шагом интерпретируется браузером?
В эпоху табличной верстки код повторялся бесчисленное количество раз вместе с таблицей на странице, в результате чего весь файл веб-страницы сильно раздувался, читаемость кода также снижалась до минимума, а время интерпретации браузером, естественно, сильно увеличилось. Поскольку макет DIV+CSS заменил макет таблицы, все было значительно улучшено, что позволило таблице вернуться в исходное положение для отображения данных, а макет остался на DIV+CSS, поэтому читаемость и возможность повторного использования кода были улучшены. , и более важным моментом DIV+CSS является различие между производительностью и структурой файла веб-страницы, чтобы не было необходимости изменять структуру всего файла веб-страницы для повышения производительности.
Несмотря на то, что метод макета DIV+CSS свел к минимуму раздутый код в предыдущем макете таблицы, для веб-дизайнеров вопрос о том, как свести к минимуму размер файлов веб-страниц, — это вопрос, который всегда стоит изучить и изучить.
Посмотрите на следующий фрагмент кода:
#header { |
Такой кусок CSS-кода очень ясен по структуре, понятен и легко читается. Однако такой кусок кода не был оптимизирован, а это значит, что это самый оригинальный CSS-код. Давайте посмотрим на упрощенный код ниже. .:
| #header { поле: 10 пикселей 15 пикселей; backgroung:#333 URL(Images/header.jpg); } |
В CSS есть термин «составной атрибут», который означает, что многие параметры атрибута могут быть объединены вместе. Например, приведенные выше «поля-верх; поле-право; поле-нижнее поле; поле-лево;» могут быть объединены в один «поле». "свойство, а затем укажите для него параметры.
Благодаря этому мы можем еще больше оптимизировать код на основе исходного кода CSS. Более того, структура, написанная таким образом, также разумна, а читабельность одинаково высока. Но этого недостаточно для рационализации до крайности. Чтобы сделать структуру этого CSS-кода понятной, мы используем пробелы, разрывы строк и другие вещи, занимающие место. Что, если мы удалим эти вещи, занимающие место?
| #header{margin:10px 15px;background:#333 url(Images/header.jpg);} |