Советы по оптимизации javascript

Question

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

В основном, добавление контента в документ замедляет работу, а также анимацию jquery, которую я использую.

Я создаю элементы, используя document.createElement("div"), вместо того, чтобы просто делать document.write("<div id='someId'></div>"), а анимация - это настраиваемая анимация с использованием .animation();

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

Любые предложения для ускорения работы, поэтому есть меньше задержки? Советы по тому, что следует избегать в программировании на JavaScript, что дает увеличенную задержку, было бы действительно полезно.

Answer 1

Это звучит, как вы хотите, чтобы улучшить производительность DOM взаимодействия, а не JavaScript, поэтому в том же духе:

• Да, document.write плохо, он блокирует дополнительные нагрузки (любой JS выполнения перед вашими страницами закончил загрузку, в основном требует остановки всей остальной обработки - современные браузеры, такие как Safari (и прокси-сервер Chrome), и Firefox выполняют определенную предварительную загрузку контента, чтобы предотвратить блокировку загрузки, но последующее разрешение по стилю и т. д. в основном блокируется.
• document.createElement - это, в общем, лучшее решение, хотя их некоторые случаи, когда просто манипулирование innerHTML на элементе может быть быстрее - но это еще не совместимо с браузером (я думаю, что innerHTML не существует до Firefox 3.5), а характеристики выполнения сложны.
• Уменьшите объем контента, который вы загружаете изначально - например. если у вас много контента (или контента, требующего больших сценариев), попытка отложить загрузку до завершения загрузки начальной страницы.
• О, для анимаций вы должны посмотреть анимацию CSS, и они работают намного лучше, чем любые реализации JS, но они присутствуют только в Safari (и через прокси-сервер Chrome) и Firefox 3.5 - определенно не в IE :-(

с точки зрения производительности JavaScript, избежать with и геттеры/сеттеры, как чумы, и вы должны быть хорошо в большинстве современных реализаций JS.

Answer 2

JQuery отлично подходит для манипулирования DOM. Я принимаю бы взглянуть на их код, чтобы получить некоторые идеи. Или, видя, как я ленив, я просто использую их вещи.

В одном из подкастов Джеффа Этвуда упоминалось, что вам нужно будет сходить с ума, чтобы написать свой собственный javascript ... после использования JQuery мне придется согласиться с ним.

Answer 3

Что удивляет большинство людей, так это то, что использование innerHTML - это самый быстрый способ манипулировать DOM.

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

Answer 4

Хотя я большой поклонник JQuery, и это делает разработку гораздо проще, обратите внимание, что заявление JQuery (или в любой библиотеке JavaScript) будет никогда не быть столь же быстро, как и его смыслового эквивалента в простом JavaScript из-за дополнительных накладные расходы.

Это, как говорится, это мои ссылки goto, когда я хочу ускорить мой JavaScript.

http://home.earthlink.net/~kendrasg/info/js_opt/

http://www.miislita.com/searchito/javascript-optimization.html

Answer 5

Я знаю, что это несколько лет поздно, но лучше поздно, чем никогда не рассматривает этот вопрос выскочил в верхней части списка Google для яваскрипта оптимизации анимации.

Если вам нужно добавить большое количество элементов в DOM и не хотите использовать innerHTML, чтобы это сделать, вы можете ускорить это, полагаю, сначала добавив элементы в документFragment, а затем введя documentFragment все в один раз в DOM. Я помню, как читал, что инъекция DOM является самой медленной частью использования стандартного API для создания и добавления элементов. documentFragment позволяет вам вставлять все его содержимое в DOM за один раз, устраняя большой объем накладных расходов, вызванный одновременным вызовом appendChild или других методов вставки. appendChild и другие методы вставки, предположительно, не страдают теми же затратами при вставке в документFragment, противоположный вложению в DOM. Мне жаль, что я не могу найти статью, которую я прочитал, поскольку у нее были действительно хорошие тесты и объяснения. Я уверен, что вы можете найти дополнительную информацию, выполнив некоторые поисковые запросы.

Как всегда, какой метод использовать должен определяться путем тестирования на индивидуальной основе. В конце концов вы, вероятно, узнаете, какой из них использовать на основе структуры элементов, количества и использования.

PS. Там могут быть проблемы со стилями и documentFragment, но я не могу вспомнить, что было сказано о них, так как это могло бы быть что-то заслуживающее проверки.

Answer 6

Существует функция фрагмента документа, которая может сделать жизнь намного проще. Вот пример использования.

function appendDivs(element){ 
    var fragment = document.createDocumentFragment(); 
    for(var i=0;i<10;i++){ 
     var div = document.createElement("div"); 
     fragment.appendChild(div);   
    } 
    element.appendChild(fragment); 
} 

Для полной ссылки, вы можете увидеть это post на моем блоге.

Answer 7

// Some functions for easier coding in DOM 

function createEl(el){ 
    return document.createElement(el); 
} 
function addElBody(el){ 
    return document.body.appendChild(el); 
} 

function addElChild(el, child){ //el- parent 
    return el.appendChild(child); 
} 
// Example : 
var container=createEl('div'); 
container.setAttribute('id', 'container'); 
addElBody(container); 

var item=createEl('ul'); 
item.setAttribute('id', 'list'); 
addElBody(item); 
addElChild(container, item);