Поделиться через

Увеличение скорости работы кода DHTML за 12 шагов

Введение динамического HTML (языка DHTML) в Microsoft Internet Explorer 4.0 позволило веб-разработчикам использовать новую модель программирования. После этого веб-разработчики использовали преимущества этого эффективного компонента для предоставления динамического контента, стилей и позиционирования, обеспечивая расширенные возможности интерактивного взаимодействия с пользователем. Благодаря гибкости языка DHTML часто для выполнения требуемой задачи можно использовать несколько способов. Понимание того, как компонент анализа и отображения HTML-кода обрабатывает ваши запросы в Windows Internet Explorer, позволяет точнее выбрать методы, оптимальные для каждого конкретного задания. В данной статье описывается использование некоторых возможностей языка DHTML, оказывающих наибольшее влияние на производительность, и приводятся рекомендации по ускорению работы страниц.

  • Объединение изменений DHTML в пакет 
  • Использование innerText 
  • Использование модели DOM для добавления отдельных элементов 
  • Развертывание параметров в элементе SELECT 
  • Использование модели DOM для обновления таблиц 
  • Однократная запись, многократное использование 
  • Ограничение динамического характера свойств 
  • Польза привязки данных 
  • Устранение свойств Expando из документа 
  • Предотвращение переключения классов и правил стилей 
  • Свертывание диапазона текста перед поиском родительского элемента 
  • См. также

Объединение изменений DHTML в пакет

Наиболее эффективный метод увеличения производительности веб-страницы DHTML заключается в улучшении способа применения изменений к контенту HTML на странице. Важно понимать, что существует множество способов обновления веб-страницы. С помощью обработки клиентских скриптов веб-разработчик может применять блоки текста HTML или осуществлять доступ к отдельным элементам HTML с использованием объектной модели DHTML или модели DOM консорциума W3C. При каждом внесении изменения в контент HTML компоненту анализа и отображения HTML-кода браузера Internet Explorer необходимо реорганизовать внутреннее представление страницы, пересчитать разметку и поток документа и отобразить соответствующие изменения. Хотя фактическая производительность зависит от вносимых изменений и контента веб-страницы, эти операции относятся к одним из самых ресурсоемких. Когда выполняется применение блока текста HTML, а не доступ к отдельным элементам, требуется вызов анализатора HTML, что дополнительно снижает производительность. Методы и свойства, принимающие текст HTML, включают в себя методы insertAdjacentHTML и pasteHTML и свойства innerHTML и outerHTML.

Совет 1. Изменения в контент HTML следует вносить в рамках одной функции скрипта. Если используется несколько обработчиков событий, например, реагирующих на перемещения указателя мыши, вносите изменения в одном месте.

Обратите внимание на другу важную особенность компонента анализа и отображения HTML-кода: он пересчитывает разметку и отображает веб-страницу, когда любой из скриптов возвращает элемент управления (например, когда завершает работу функция обработчика событий скрипта или выполняется вызов метода, такого как setTimeout). Теперь, когда вы познакомились со способом обработки изменений в Internet Explorer, можно приступить к улучшению производительность веб-страницы.

Совет 2. Выполните построение строки HTML-кода и внесите в документ одно изменение вместо выполнения нескольких обновлений. Если контент HTML не требуется, рекомендуется использовать свойство innerText.

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

Пример кода: http://samples.msdn.microsoft.com/workshop/samples/author/perf/tip2.htm

Медленный:

divUpdate.innerHTML = "";

 for ( var i=0; i<100; i++ )

 {

  divUpdate.innerHTML += "<SPAN>Это медленный метод! </SPAN>";

 }

Быстрый:

var str="";

 for ( var i=0; i<100; i++ )

 {

  str += "<SPAN>Этот метод работает быстрее благодаря использованию строки! </SPAN>";

 }

 divUpdate.innerHTML = str;

Дополнительные сведения о динамическом контенте см. в статьеСведения о динамическом контенте (страница может быть на английском языке).

Использование innerText

В объектной модели DHTML доступ к текстовому контенту для элемента HTML осуществляется с помощью свойства innerText, а в модели W3C DOM для этого предоставляется отдельный дочерний узел текста. Быстрее обновить контент элемента непосредственно с помощью свойства DHTML innerText, чем вызывать метод createTextNode модели DOM.

Совет 3. Используйте свойство innerText для обновления текстового контента.

В следующих примерах показано, как повысить производительность с помощью использования свойства innerText.

Пример кода: http://samples.msdn.microsoft.com/workshop/samples/author/perf/tip3.htm

Медленный:

  var node;

 for (var i=0; i<100; i++)

 {

  node = document.createElement( "SPAN" );

  node.appendChild(  document.createTextNode( " Using createTextNode() " ) );

  divUpdate.appendChild( node );

 }

Быстрый:

var node;

 for (var i=0; i<100; i++)

 {

  node = document.createElement( "SPAN" );

  node.innerText = " Использование свойства innerText ";

  divUpdate.appendChild( node );

 }

Использование модели DOM для добавления отдельных элементов

Как уже было отмечено ранее, обращение к методам, применяющим текст HTML, требует запуска анализатора HTML, что вызывает падение производительности. Из этого следует, что добавить элементы с помощью методов createElement и insertAdjacentElement быстрее, чем выполнить один вызов метода insertAdjacentHTML.

Совет 4. Часто вызов методов createElement и insertAdjacentElement может выполняться быстрее, чем вызов метода insertAdjacentHTML.

Объединение обновлений DHTML в пакет и выполнение единого вызова метода insertAdjacentHTML повышает производительность, однако в некоторых случаях более эффективно создавать элементы непосредственно с помощью модели DOM. В такой ситуации рекомендуется попробовать использовать оба способа и определить, какой из них работает быстрее.

Пример кода: http://samples.msdn.microsoft.com/workshop/samples/author/perf/tip4.htm

Медленный:

for (var i=0; i<100; i++)

 {

  divUpdate.insertAdjacentHTML( "beforeEnd", "<SPAN> Использование insertAdjacentHTML() </SPAN>" );

 }

Быстрый:

var node;

 for (var i=0; i<100; i++)

 {

  node = document.createElement( "SPAN" );

  node.innerText = " Использование insertAdjacentElement() ";

  divUpdate.insertAdjacentElement( "beforeEnd", node );

 }

Развертывание параметров в элементе SELECT

Исключением для описанного выше правила об использовании методов текста HTML является ситуация, когда в элемент SELECT добавляется большое количество элементов OPTION. В этом случае для доступа к коллекции параметров эффективнее использовать свойство innerHTML, чем вызов метода createElement.

Совет 5. Используйте innerHTML для добавления большого количества параметров в элемент SELECT.

Используйте слияние строк для построения текста HTMLэлемента SELECT, а затем используйте его для задания свойства innerHTML. При очень большом количестве параметров слияние строк может негативно влиять на производительность. В этой ситуации постройте массив и выполните вызов метода объединения Microsoft JScript для выполнения окончательного слияния текста HTML элемента OPTION.

Пример кода: http://samples.msdn.microsoft.com/workshop/samples/author/perf/tip5.htm

Медленный:

var opt;

 divUpdate.innerHTML = "<SELECT ID='selUpdate'></SELECT>";

 for (var i=0; i<1000; i++)

 {

  opt = document.createElement( "OPTION" );

  selUpdate.options.add( opt );

  opt.innerText = "Item " + i;

 }

Быстрый:

var str="<SELECT ID='selUpdate'>";

 for (var i=0; i<1000; i++)

 {

  str += "<OPTION>Item " + i + "</OPTION>";

 }

 str += "</SELECT>";

 divUpdate.innerHTML = str;

Еще более быстрый:

var arr = new Array(1000);

 for (var i=0; i<1000; i++)

 {

  arr[i] = "<OPTION>Item " + i + "</OPTION>";

 }

 divUpdate.innerHTML = "<SELECT ID='selUpdate'>" + arr.join() + "</SELECT>";

Использование модели DOM для обновления таблиц

Для вставки строк и ячеек таблиц эффективнее использовать методы модели DOM, чем методы insertRow и insertCell, являющиеся частью объектной модели таблиц DHTML. Особенно это касается создания больших таблиц.

Совет 6. Используйте методы модели DOM для построения крупных таблиц.

Пример кода: http://samples.msdn.microsoft.com/workshop/samples/author/perf/tip6.htm

Медленный:

var row;

 var cell;

 for (var i=0; i<100; i++)

 {

  row = tblUpdate.insertRow();

  for (var j=0; j<10; j++)

  {

    cell = row.insertCell();

    cell.innerText = "Row " + i + ", Cell " + j;

  }

 }

Быстрый:

var row;

 var cell;

 var tbody = tblUpdate.childNodes[0];

 tblUpdate.appendChild( tbody );

 for (var i=0; i<100; i++)

 {

  row = document.createElement( "TR" );

  tbody.appendChild( row );

  for (var j=0; j<10; j++)

  {

    cell = document.createElement( "TD" );

    row.appendChild( cell );

    cell.innerText = "Row " + i + ", Cell " + j;

  }

 }      

Однократная запись, многократное использование

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

Совет 7. Используйте скрипт повторно, поместив общий код в компонент поведения или в отдельный файл.

Для более эффективного повторного использования функций скрипта поместите общие операции скрипта в подключенный код DHTMLили в элемент behavior. Компоненты поведения отлично подходят для повторного использования скрипта и построения компонентов, к которым можно осуществить доступ из HTML-кода, что позволяет расширить объектную модель DHTML с использованием своих собственных объектов, методов, свойств и событий. Для компонентов поведения, которые не используют возможность viewlink, рекомендуется использовать доступную в Internet Explorer 5.5 возможность lightweight behavior для дополнительного повышения эффективности инкапсуляции кода. Кроме того, производительность повышается, если код скрипта находится в отдельном блоке SCRIPT.

Ограничение динамического характера свойств

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

Совет 8. Ограничивайте использование динамических свойств.

Польза привязки данных

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

Совет 9. Используйте привязку данных для предоставления расширенных представлений данных на стороне клиента.

Дополнительные сведения о привязке данных см. в следующих статьях:

Устранение свойств Expando из документа

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

Совет 10. Задавайте свойства expando для объекта window.

Пример кода: http://samples.msdn.microsoft.com/workshop/samples/author/perf/tip10.htm

Медленный:

for (var i=0; i<1000; i++)

 {

  var tmp;

  window.document.myProperty = "Item "+i;

  tmp = window.document.myProperty;

 }

Быстрый:

for (var i=0; i<1000; i++)

 {

  var tmp;

  window.myProperty = "Item "+i;

  tmp = window.myProperty;

 }

Предотвращение переключения классов и правил стилей

Операция переключения классов и правил стилей может быть ресурсоемкой в связи с необходимостью пересчета и разметки всего документа. Если для реализации дополнительных представлений данных на веб-сайте используются таблицы стилей, рекомендуется изменять объект style непосредственно для изменяемых элементов и отказаться от изменения свойства className элемента или сопоставленного с классом объекта styleSheet.

Совет 11. При смене представления контента изменяйте объект style напрямую.

Свертывание диапазона текста перед поиском родительского элемента

Объект TextRange представляет собой область текста, выбранную пользователем или извлеченную из элемента HTML, такого как body. Родительский элемент диапазона текста можно определить с помощью вызова метода parentElement. Для сложных диапазонов текста эффективнее выполнять вызов метода collapse перед вызовом метода parentElement.

Совет 12. Свертывайте диапазон текста перед обращением к свойству parentElement.

Дополнительные сведения об объекте TextRange см. в статье Элемент диапазона текста (страница может быть на английском языке).

См. также