Набор методов ускорения DHTML
Автор：Eve Cole
Время обновления：2009-06-20 16:59:57
Динамический HTML (DHTML) в Microsoft? В Интернет Эксплорере 4.0
Представлен для того, чтобы сделать новые модели программирования доступными для веб-авторов и разработчиков. С тех пор веб-авторы
Воспользуйтесь всеми преимуществами этой мощной функции, чтобы обеспечить динамический контент, стиль и позиционирование, чтобы веб-пользователи могли
Испытайте богатые интерактивные функции. Гибкость DHTML означает, что обычно существует несколько способов реализации.
Ваша идея. Понимание того, как обрабатываются компоненты синтаксического анализа и отображения HTML в Internet Explorer.
чтобы помочь вам определить лучший способ выполнить работу. В этой статье описаны некоторые функциональные возможности DHTML.
существенное влияние на производительность и дает несколько советов по улучшению производительности страницы.
Пакетные изменения DHTML
На веб-страницах DHTML наиболее эффективным способом повышения производительности является улучшение
Изменения в содержании. Существует несколько способов обновления веб-страницы, и это важно понимать. Конгке
Судя по отзывам пользователей, веб-авторы могут использовать текстовые блоки HTML или DHTML.
Объектная модель (английская версия) или объектная модель документа W3C (DOM) (английская версия) для доступа к отдельному HTML-коду.
элемент. Всякий раз, когда вы меняете содержимое HTML, анализ и отображение HTML в Internet Explorer
Все компоненты отображения должны реорганизовать внутреннее представление страницы, пересчитать макет документа и
транслировать и отображать эти изменения. Хотя фактическая производительность определяется содержимым веб-страницы и вносимыми вами изменениями.
, но эти операции относительно дороги. Если вы используете текстовые блоки HTML вместо отдельных
Чтобы получить доступ к элементу, необходимо вызвать анализатор HTML, что приведет к дополнительным затратам производительности. Принять HTML
Текстовые методы и свойства включают InsertAdjacentHTML (английский) и PasteHTML (английский).
text), а также атрибуты InternalHTML (английский) и externalHTML (английский).
Совет 1. Вносите изменения в содержимое HTML в функции скрипта. Если в вашем дизайне используется
Если у вас есть несколько обработчиков событий (например, в ответ на движения мыши), обновления должны быть централизованы.
изменять.
Еще один важный факт о синтаксическом анализе и отображении компонентов HTML заключается в том, что как только скрипт возвращает управление (например,
Когда обработчик событий сценария завершает работу или когда вызываются такие методы, как setTimeout (английский),
Этот компонент пересчитает макет и отобразит веб-страницу. Теперь вы знаете об Internet Explorer
Как обрабатывать изменения, ниже вы начнете улучшать производительность ваших веб-страниц.
Совет 2. Создайте строку HTML и внесите в документ одно изменение вместо нескольких.
раз обновлено. Если HTML-содержимое не требуется, рассмотрите возможность использования
Свойство InternalText (английское).
В следующем примере более медленный метод вызывает HTML каждый раз, когда установлено свойство InnerHTML.
Анализатор. Чтобы повысить производительность, вы можете сначала создать строку, а затем назначить ее внутреннему HTML.
свойство.
медленный:
divUpdate.innerHTML = "";
для (вар я=0; я<100; я++)
{
divUpdate.innerHTML += "Это более медленный метод!";
}
быстрый:
вар стр="";
для (вар я=0; я<100; я++)
{
str += "Поскольку здесь используются строки, этот метод работает быстрее!";
}
divUpdate.innerHTML = стр;
Используйте внутреннийтекст
Объектная модель DHTML получает доступ к тексту элемента HTML через атрибут InternalText (English).
контент, в то время как W3C DOM предоставляет независимый дочерний текстовый узел. Непосредственно через атрибутinnerText
Постоянно обновляйте содержимое элемента быстрее, чем вызов метода createTextNode (англ.) DOM.
Совет 3. Используйте свойство InnerText для обновления текстового содержимого.
В следующем примере показано, как использовать свойство InsideText для повышения производительности.
медленный:
вар узел;
для (вар я=0; я<100; я++)
{
node = document.createElement("SPAN");
node.appendChild( document.createTextNode( "Используйте createText
Узел() ") );
divUpdate.appendChild(узел);
}
быстрый:
вар узел;
для (вар я=0; я<100; я++)
{
node = document.createElement("SPAN");
node.innerText = "Использовать свойство InnerText";
divUpdate.appendChild(узел);
}
Добавьте один элемент, используя DOM
Как упоминалось ранее, применение метода доступа к тексту HTML приведет к вызову анализатора HTML из
Это снизит производительность. Итак, используя createElement (английский) и InsertAdjacent
Метод Element (английский) добавляет элементы быстрее, чем однократный вызов метода InsertAdjacentHTML.
Совет 4. Вызовите методы createElement и InsertAdjacentElement быстрее, чем вызов
Метод InsertAdjacentHTML работает быстро.
Пакетное обновление DHTML и однократный вызов метода InsertAdjacentHTML могут улучшить
Производительность, но иногда эффективнее создавать элементы непосредственно из DOM. В приведенном ниже сценарии вы можете
попробовать оба метода и определить, какой из них быстрее.
медленный:
для (вар я=0; я<100; я++)
{
divUpdate.insertAdjacentHTML( "beforeEnd", " Используйте вставку
СмежныйHTML() " );
}
быстрый:
вар узел;
для (вар я=0; я<100; я++)
{
node = document.createElement("SPAN");
node.innerText = "Используйте InsertAdjacentElement() ";
divUpdate.insertAdjacentElement("beforeEnd", node);
}
Расширение опций в элементе SELECT
Для предыдущего правила с использованием текстового метода HTML большое количество ОПЦИИ (на английском языке)
Исключением является случай, когда элементы добавляются в SELECT (англ.). В это время используйте внутреннийHTML
Свойства более эффективны, чем вызов метода createElement для доступа к коллекции параметров.
Совет 5. Используйте внутренний HTML, чтобы добавить к элементу SELECT большое количество параметров.
Используйте операции конкатенации строк для создания HTML-текста элемента SELECT, а затем используйте это
Советы по настройке атрибута InnerHTML. Для особенно большого количества опций также будет выполняться операция конкатенации строк.
влияют на производительность. В этом случае создайте массив и вызовите соединение Microsoft JScript.
(Английский) Метод для окончательного объединения текста HTML элемента OPTION.
медленный:
вар опт;
divUpdate.innerHTML = "〈SELECT ID='selUpdate'〉";
для (вар я=0; я<1000; я++)
{
opt = document.createElement("ОПЦИЯ");
selUpdate.options.add(opt);
opt.innerText = «Предмет» + я + «Предмет»;
}
быстрый:
var str="〈SELECT ID='selUpdate'〉";
для (вар я=0; я<1000; я++)
{
str += "〈OPTION〉th" + i + " item〈/OPTION〉";
}
стр += "";
divUpdate.innerHTML = стр;
Быстрее:
вар arr = новый массив (1000);
для (вар я=0; я<1000; я++)
{
arr[i] = "〈OPTION〉th" + i + " item〈/OPTION〉";
}
divUpdate.innerHTML = "〈SELECT ID='selUpdate'〉" + arr.join() + "
";
Обновить таблицу с помощью DOM
Использование метода DOM для вставки строк и ячеек таблицы лучше, чем использование метода InsertRow (англ.) и Insert
Метод Cell (английский) (часть объектной модели таблицы DHTML) более эффективен. особенно в
При создании больших таблиц разница в эффективности становится еще более очевидной.
Совет 6. Используйте методы DOM для создания больших таблиц.
медленный:
вар строка;
вар ячейка;
для (вар я=0; я<100; я++)
{
строка = tblUpdate.insertRow();
для (вар j=0; j<10; j++)
{
ячейка = row.insertCell();
cell.innerText = "Row " + i + " , ячейка " + j + " ";
}
}
быстрый:
вар строка;
вар ячейка;
вар tbody = tblUpdate.childNodes[0];
tblUpdate.appendChild(tbody);
для (вар я=0; я<100; я++)
{
row = document.createElement("TR");
tbody.appendChild(строка);
для (вар j=0; j<10; j++)
{
ячейка = document.createElement("TD");
row.appendChild(ячейка);
cell.innerText = "Row " + i + " , ячейка " + j + " ";
}
}
Напишите один раз, используйте много
Если на вашем веб-сайте используются скрипты для выполнения общих операций, рассмотрите возможность добавления этих функций.
Может быть помещен в отдельный файл, чтобы его можно было повторно использовать на нескольких веб-страницах. При этом не только
Это может улучшить удобство сопровождения кода и сохранить файл сценария в кеше браузера, таким образом
Его необходимо загрузить локально только один раз, когда пользователь посещает сайт. Поместите часто используемые правила стиля в отдельные
Те же преимущества можно получить и в файлах.
Совет 7. Повторно используйте сценарии, помещая часто используемый код в действия или отдельные файлы.
Чтобы получить больше преимуществ от повторного использования сценариев, поместите часто используемые операции сценариев в надстройки DHTML.
поведение кода или элемента (англ.). Поведения обеспечивают эффективный способ повторного использования сценариев и
Создавайте компоненты, доступ к которым осуществляется из HTML и позволяющие использовать собственные объекты, методы, свойства и события для
Расширенная объектная модель DHTML. Для поведения, которое не использует функцию ссылки просмотра (на английском языке), вы можете
Рассмотрите возможность использования облегченной функции поведения в Internet Explorer 5.5.
Более эффективная инкапсуляция кода. Кроме того, если ваш код сценария находится в СЦЕНАРИИ (на английском языке)
В блоках будет достигнута более высокая производительность.
Не используйте динамические атрибуты слишком часто
Динамические свойства (на английском языке) предоставляют веб-авторам возможность использовать выражения в качестве значений свойств.
Выражение оценивается во время выполнения, и его результирующее значение применяется к атрибуту. Это мощная функция. этот
Эту функцию можно использовать для уменьшения количества скриптов на странице, но поскольку выражения необходимо периодически пересчитывать, и
Это выражение часто связано со значениями других свойств, поэтому оно может отрицательно повлиять на производительность. Этот вид
Это особенно актуально для свойств позиционирования.
Совет 8: Ограничьте использование динамических свойств.
Привязка данных работает отлично
Привязка данных (англ.) — мощная функция, позволяющая объединять результаты запроса к базе данных.
Содержимое фруктового или XML-острова данных (на английском языке), привязанное к элементу HTML на веб-странице. У тебя нет
Необходимо вернуться на сервер для извлечения данных, он может обеспечивать функции сортировки и фильтрации данных, а также различные данные.
просмотр данных. Представьте себе веб-страницу, на которой данные компании отображаются в виде линейной, гистограммы или круговой диаграммы.
график, также есть кнопки для сортировки данных по офисам, продуктам или этапам продаж, и все
Чтобы реализовать функцию, достаточно один раз получить доступ к серверу.
Совет 9. Используйте привязку данных, чтобы предоставить клиенту расширенное представление ваших данных.
Не устанавливайте атрибут «expando» для объекта документа.
Атрибут «expando» (английский) можно добавить к любому объекту. Это свойство очень полезно, оно может
хранить информацию на текущей странице среды и предоставить еще один способ расширения объектной модели DHTML.
Закон. Например, вы можете назначить атрибут щелчка элементу DHTML и использовать этот атрибут для запроса пользователя.
Какой элемент нажал пользователь. При возникновении события вы также можете использовать атрибутexpando, чтобы
Обработчики событий предоставляют больше контекстной информации. Независимо от того, как вы используете атрибут «expando», обрежьте
Не забудьте не устанавливать их в объекте документа (на английском языке). Если вы сделаете это, когда вы посетите
При запросе данного имущества документ должен выполнить дополнительные операции перерасчета.
Совет 10. Установите атрибут «expando» для объекта окна (на английском языке).
медленный:
для (вар я=0; я<1000; я++)
{
вар ТМП;
window.document.myProperty = «Элемент» + i + «Элемент»;
tmp = window.document.myProperty;
}
быстрый:
для (вар я=0; я<1000; я++)
{
вар ТМП;
window.myProperty = «Элемент» + я + «Элемент»;
tmp = window.myProperty;
}
Избегайте переключения классов и правил стиля.
Переключение правил классов и стилей — очень дорогостоящая операция, требующая перерасчета и корректировки всего
Оформление документа. Если на вашем веб-сайте используются таблицы стилей для альтернативного представления содержимого, вы можете
Рассмотреть возможность непосредственного изменения объекта стиля (английского) элемента, который необходимо изменить, вместо изменения объекта элемента.
Атрибут className (английский) или объект styleSheet (английский), связанный с классом.
Совет 11. При изменении внешнего вида содержимого измените непосредственно объект стиля.
Свернуть текстовый диапазон перед поиском родителя
Объект TextRange (английский) представляет выбранный пользователем или полученный из HTML-элемента.
Текстовая область, например BODY (на английском языке). Вызвав метод ParentElement (английский),
Может идентифицировать родителя текстового диапазона. Для сложных текстовых диапазонов вызовите родительский элемент
Перед методом будет эффективнее сначала вызвать метод коллапса (англ.).
Совет 12. Сверните текстовый диапазон перед доступом к методу родительского элемента.
Выдержка из http://www.microsoft.com/china/msdn/?MSCOMTB=ICP_MSDN.
