Варианты реализации

[s0rr0w]

Интересует следующий вопрос

Есть код

<div id="container"></div>
<div id="itemTpl"></div>

Нужно при помощи jQuery

1. Создать 10000 клонов "itemTpl", удалить из каждого клона id, в клон вставить итерацию в виде текста.

2. По клику на ссылку пройти по каждому клону и назначить ему style.color = "red";

Интересуют варианты реализации.

[s0rr0w]

Да, что-то в этом есть В принципе, насколько я понимаю, в данном случае что SC, что jQuery делают примерно одно и тоже? То есть ползают по чайлдам контейнера, у них что-то меняют, только SC для изменения использует данные из атрибута элемента, так?

Делал я тут профайлинг (не только этого примера, но и компоненты грида, самописной, на jQuery). Поглядел на вызовы каких-то левых непонятных функций из фреймворка, почесал репу... переписал без jQuery. Скорость увеличилась в разы.

Основная потеря скорости идет от огромного количества вызовов .css(), .empty(). .empty() вообще крут -- он еще и анбинды делает, там вообще все небыстро. Если повесить хоть что-то (с помощью jQuery.bind()) на удаляемые элементы, скорость упадет еще больше, будет просто кошмар какой-то.

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

Я в итоге пришел к SC, после написанных тонн кода. И получил тот инструмент, который хорошо, на первый взгляд, сбалансирован.

[s0rr0w]

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

JQ работает по принципу - сначала найду с чем я буду работать, а потом буду работать с этим массивом нод

SC работает по принципу - кто удовлетворяет условиям запуска, тот и будет отрабатывать нужное действие.

[Jenek]

по первому примеру

$("#container").find("div").each( function(){ $(this).css( "color", "red" ) } );

0_o, это очень далеко от jQuery

На jQuery это так выглядит так:

$("#container div").css( "color", "red" );

это в два раза медленее SC не потому, что выборку трудно сделать ( выборка $("#container div"); это 18мс в safari и 40мс в ie8), а потому, что .css( "color", "red" ) выполняет пачку проверок на кроссбраузерность и т.п. (это не зря потраченное время, это стабильность и безглючность).

Именно так и нужно писать.

Но если уж случилось 10000 итемсов (это все-таки исключительный случай, а не норма) jQuery прекрасно ускоряется, мы можем просто использовать ту же функцию, что и SC, причем скорость будет больше чем у SC:

$("#container div").each(function(){	
	try {
		this.style.color = "red";
	} catch ( e ) { }
});

Но повторюсь, это крайний случай нет никаких причин отказывать от более надежного и читабельного .css( "color", "red" )

разница производительности в реальных условиях абсолютно не существенная.

по второму примеру

Добавим классы там где нужно (а как же чем class="clearThis" отличается от SC="sc_clear:exec", везде где можно добавить SC="sc_clear:exec" можно добавить и class="clearThis").

и догоним SC (в ie8 даже обгоним), а по первому проходу обгоним везде (я даже не знаю, что лучше 70 : 70 : 70 или 1500 : 50 : 50), причем код без каких либо оптимизаций:

$("#container div .setRed").css( "color", "red" );
$("#container div .addGreenClass").addClass('green');
$("#container div .clearThis").empty();
$("#container div .hideThis").addClass('hiddenBlock');

но плюс jquery в то, что для нее классы только опция, можно и без них, только чуть медленней, а как SC будет без своих SC="sc_clear:exec":

$('#container div u').addClass('hiddenBlock');
$('#container div span:first-child').css("color", "red");
$('#container div span:nth-child(2)').addClass('green');
$('#container div b').empty();

Глобального превосходства в скорости нет, имеется задержка при первом запуске, а главное код на jQuery компактнее, читабельнее, очевиднее и сосредоточен в одном месте, логика работает с представлением, а не перемешана с ним.

[e1f]

На jQuery это так выглядит так:

$("#container div").css( "color", "red" );

Ну тогда уже так, чтобы все было как надо:

$("#container > div").css( "color", "red" );

Работает .css() в разы медленнее простого навешивания.

$('#container div u').addClass('hiddenBlock');
$('#container div span:first-child').css("color", "red");
$('#container div span:nth-child(2)').addClass('green');
$('#container div b').empty();

4 выборки? О_о Ох говноидея...

[s0rr0w]

Глобального превосходства в скорости нет, имеется задержка при первом запуске, а главное код на jQuery компактнее, читабельнее, очевиднее и сосредоточен в одном месте, логика работает с представлением, а не перемешана с ним.

Смешавание логики и педставления - в этом нет ничего плохого. Знаете почему? Потому что это две неотъемлемые части.

У меня подход к работе с HTML совершенно другой. Структура HTML задает поведение компонента. Т.е. я могу менять лигику и поведение компонента, всего лишь перестраивая HTML. В одном месте.

И еще один пример из жизни.

Есть задание, например, при нажатии на кнопку "очистить" нужно

* очистить кусочек формы (не всю)

* убрать 5 сообщений об ошибках

* убрать два сообщения об успешном выполнении операции

* спрятать контейнер с результатами выполнения предыдущей операции.

На JQ это можно оптимизировать так. Задать нужным компонентам класс, например "clear", и прятать ноды, которые имеют этот класс. Очистку кусочка формы - написать отдельную функцию.

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

А я могу сделать это одним запросом. И у кого понятнее логика работы?

Кстати, в приведенном примере у меня всего один запрос, вместо 4х строчек кода у вас. Не понимаю, как это может быть читабельнее?

Мышление событийное куда удобнее, чем мышление функциональное.

4 выборки? О_о Ох говноидея...

Не совсем. В вашем примере выборок не меньше. Ведь каждый элементик внутри тоже нужно выбрать.

[e1f]

В примере Jenek'a:

Выбираем #container, в нем выбираем div'ы, в них выбираем соотв. эдемент и чего-то делаем. То есть каждый раз пробегаемся по 10К элементов, создаем из них объект jQuery. Потом, раз мы ссылку на объект не запомнили, он уходит в сад. И так 4 раза.

У меня:

Выбираем #container, в нем выбираем div'ы, далее в каждом диве что-то делаем.

[Jenek]

Работает .css() в разы медленнее простого навешивания.

А разве я забыл об этом написать?

4 выборки? О_о Ох говноидея...

Ну, конечно.

				$("#container > div").each(function(){
					$(this).addClass('hideU');
					$(this).children('span:first')[0].style.color = 'red';
					$(this).children('span:last').addClass('green');
					$(this).children('b:first').empty();
				});

результат: 1393 : 1256 : 1215 : 1178 : 1232

				$('#container div u').addClass('hiddenBlock');
				$('#container div span:first-child').css("color", "red");
				$('#container div span:nth-child(2)').addClass('green');
				$('#container div b').empty();

результат: 550 : 341 : 342 : 341 : 376 : 344

				$("#container div .setRed").css( "color", "red" );
				$("#container div .addGreenClass").addClass('green');
				$("#container div .clearThis").empty();
				$("#container div .hideThis").addClass('hiddenBlock');

результат: 440 : 278 : 281 : 280 : 313 : 279

SC

результат: 951 : 318 : 322 : 316 : 313 : 313

[Jenek]

Потому что это две неотъемлемые части.

Это не мой подход, я пожалуй останусь при своем.

Неотъемлемость есть только в случае совсем уж веб-приложений вроде gMail и то спорно.

А я могу сделать это одним запросом. И у кого понятнее логика работы?

Кстати, в приведенном примере у меня всего один запрос, вместо 4х строчек кода у вас. Не понимаю, как это может быть читабельнее?

А 4 функции, которые делают всю работу, почему не считаете?

И еще один пример из жизни.

Пример на SC в студию (чтобы видеть, что нужно сделать).

Не совсем. В вашем примере выборок не меньше. Ведь каждый элементик внутри тоже нужно выбрать.

True и как показывает пример старт выборки затратная операция, лучше 4 раза по 10к элементов, чем 1 раз 10к + 30к раз по одному.

[e1f]

Таки да, Вы правы. Почитал, как они там у себя выбирают, эти товарищи. Действительно, стартовать 4 раза менее затратно. Неочевидно...

И все же странно, что выборка

$('#container > div > u').addClass('hiddenBlock')

работает медленнее, нежели

$('#container div u').addClass('hiddenBlock')

[s0rr0w]

А 4 функции, которые делают всю работу, почему не считаете?

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

Пример на SC в студию (чтобы видеть, что нужно сделать).

Да был в примерах.