Пример: Оптимизация JavaScript часть 1 — Добавление элементов DOM в документ

Этот пример демонстрирует разные подходы к добавлению элементов DOM в документ: используя функции DOM, склейка кусков HTML в строку, склеивание массива кусков кода HTML.

Учтите, что в списке содержится 1000 элементов, и в реальных приложениях Вы не должны использовать такое количество (или Вам придется перепроектировать приложение).

Ниже вы видете 5 кнопок: “createElement” — создание элементов с помощью document.createElement(), “createElement full” — использует document.createElement() с полным кодом HTML элемента (работает только в IE6), “innerHTML” — создает элементы приклеиванием кода HTML к свойству innerHTML, “innerHTML optimized” склеивает HTML в одну строку и затем присваивает ее свойству innerHTML, “innerHTML join” создает массив кусков HTML и затем склеивает его в свойство innerHTML. Когда Вы нажмете на какую-нибудь кнопку, соответствующий код, используемый для тестирования, будет отображен под ней.

createElement createElement full innerHTML innerHTML optimized innerHTML join

И пример с большим списком. “innerHTML optimized large” — создает список со сложными элементами используя склеивание строк, “innerHTML join large” — то же самое, но с использованием массива кусков кода HTML.

innerHTML optimized large innerHTML join large

Result time: –.