HTML -оптимизация ускоряет веб -страницы

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

<scriptsrc = myfile.js> </script>

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

CSS-это HTML-обращение, и красивая веб-страница не может быть без нее. Существует много способов ссылки на CSS на HTML -страницах, и эффективность различных методов отличается. Обычно мы можем извлечь код управления стилем, определяемый между <style> </style>, сохранить его в отдельный файл .css, а затем ссылаться на его на странице HTML в теге <NINCK> или @IMPORT:

<style>

@Importurl (mysheet1.css);

</style>

Обратите внимание на 2 балла: 1. Тег <style> не обязан включать в файл .css; 2. @Import и теги ссылки должны быть определены в голове HTML -страницы.

Минимизация пространства памяти, занятого HTML -страницами, является эффективным способом ускорения загрузки страниц. В связи с этим есть два вопроса, на которые обратите внимание на:

HTML -страницы не могут быть отделены от поддержки программ сценариев. Мы часто встраиваем несколько языков сценариев в страницы, такие как JavaScript и VBScript. Тем не менее, я не знаю, замечаете ли вы: такая смесь замедляет скорость доступа страниц. Причина в том, что для интерпретации и запуска нескольких кодов сценариев необходимо загружать несколько двигателей сценариев. Итак, попробуйте написать код на том же языке сценариев на странице.

Вы использовали тег <iframe>? Это очень замечательная особенность. Если вы хотите включить содержание второй страницы в HTML -документ, обычным способом является использование тега <Frameset>. Но с <iframe> все становится простым. Например, для разработки страницы предварительного просмотра документа вы можете разместить серию тем слева и iframe справа, который содержит предварительный просмотр документа; Когда мышь проходит через каждую ссылку темы слева, создайте новый iframe справа, чтобы предварительно просмотреть документ. При этом эффективность кода, несомненно, эффективна, но в то же время это приводит к тяжелой обработке и в конечном итоге медленной скорости.

Используйте только один iframe. Когда мышь указывает на новую тему, вам нужно только изменить атрибут SRC элемента iframe. Таким образом, только один предварительный документ останется в памяти в любое время.

Когда вы просматриваете страницу онлайн каждый день, вы обязательно увидите много эффектов анимации. Например, милый маленький кролик идет взад и вперед на странице ... основной технологией для достижения этого эффекта является позиционирование CCS. Обычно мы используем element.style.left и element.style.top для достижения цели графического позиционирования. Тем не менее, это создает некоторые проблемы: левое свойство возвращает строку и содержит единицу измерения (например, 100px). Поэтому, чтобы установить новую координату позиции, вы должны сначала обработать возвратное значение строки, прежде чем вы сможете назначить значение следующим образом:

Dimstringlft, Intleft

stringleft = element.style.left

intleft = parseint (stringleft)

Intleft = Intleft 10

element.style.left = intleft;

Вы обязательно почувствуете, что вам нужно написать такой сложный код, чтобы сделать такую ​​маленькую вещь. Есть ли более краткий способ? Посмотрите на эти 4 свойства: Posleft, Postop, Poswidth и Posheight, которые соответствуют количеству точек соответствующего возвращаемого значения строки. ОК, используйте эти свойства, чтобы переписать код для реализации функций, реализованных приведенным выше кодом:

element.style.posleft = 10

Код короче, но быстрее!

Когда дело доходит до анимационных эффектов, конечно, использование таймеров неразделимо. Обычным методом является использование window.setTimeout для непрерывного расположения элементов на странице. Однако, если на странице есть несколько анимаций, нужно ли вам установить несколько таймеров? Ответ нет! Причина проста: функция таймера потребляет много ценных системных ресурсов. Но мы все еще можем управлять несколькими анимациями на странице, и хитрость состоит в том, чтобы использовать цикл. В цикле управляйте положением соответствующей анимации в соответствии с различными значениями переменной, во всем цинере используется только одно видно, что вызов функции. Settiptimeout () используется.

Пусть изображение появляется и иногда появляется интересные эффекты. Есть два способа достижения этого: используйте атрибут видимости или атрибут отображения CSS. Для абсолютных элементов позиции, диплом и видимость имеют такой же эффект. Разница между ними заключается в том, что элемент, установленные для отображения: ни один больше не будет занимать пространство потока документов, в то время как элемент, установленные на видимость: Hidden все еще останется в своем исходном положении.

Но если вы хотите иметь дело с элементами в абсолютном положении, использование видимости будет быстрее.

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

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

1. Не звоните в команду Document.Write в блоке скрипта типа отсрочки, потому что Document.Write даст эффект прямого выходного вывода.

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

Мы все знаем, что серверы UNIX чувствительны к случаям, но знаете ли вы, что буферы интернет -проводника также по -разному относится к строму. Следовательно, как веб -разработчик, вы должны помнить, чтобы сохранить согласованность корпуса строк URL одной и той же связи в разных местах. В противном случае, резервные копии различных файлов в одном и том же месте будут храниться в буфере браузера, что также увеличит количество запросов на загрузку контента в том же месте. Все это, несомненно, снижает эффективность доступа к Интернету. Поэтому, пожалуйста, помните: URL -адреса в одном и том же месте, пожалуйста, сохраните согласованность корпуса строк URL на разных страницах.

При написании или просмотре HTML -кода других людей мы сами мы должны были столкнуться с ситуациями, когда отметки не имеют конца. например:

<p> Пример с головой и без хвоста

<ul>

<li> Первый

<li> Второй

<li> Третий

</Ul>

Очевидно, что в приведенном выше коде отсутствуют три теги </li>. Но это не мешает его должным образом выполнено. В HTML есть некоторые такие теги, такие как Frame, IMG и P.

Но, пожалуйста, не будь ленивым. Пожалуйста, напишите конечную отметку. Это не только делает стандарт формата кода HTML, но также ускоряет скорость отображения страницы. Потому что Internet Explorer не будет тратить время на оценку и расчет, где заканчивается абзац или элемент списка.

<p> Пример с ногами и хвостом </p>

<ul>

<li> Первый </li>

<li> Второй </li>

<li> Третий </li>

</Ul>

ОК, приведенные выше перечислены 10 методов обработки для ускорения HTML -страниц. Это просто описать их, но только путем по -настоящему понимая и овладеть ее сущностью и учиться на том или ином примере, вы можете написать более быстрые и лучшие программы.