24.01.2014

О чем это всё?

С чего начинается
оптимизация кода?

• Расстановка таймеров
• Профилирование
• Анализ timeline

Рассмотрим пример

			<script>
			   $el.show();
			</script>
		

Расставляем таймеры

			<script>
			   console.time("jquery.fn.show");
			   $el.show();
			   console.timeEnd("jquery.fn.show");
			</script>
		

Профилируем

			<script>
			   console.profile();
			   $el.show();
			   console.profileEnd();
			</script>
		

Почему так происхоит?

			var display = jQuery._data( elem, "olddisplay" );
			if ( elem.style.display === "" && isHidden( elem ) ) {
			    display = css_defaultDisplay(elem.nodeName);
			    jQuery._data( elem, "olddisplay", display );
			}
		

Почему так происхоит?

• jQuery._data — получение olddisplay
• css_defaultDisplay — определение display для данного nodeName
• jQuery._data — сохранение olddisplay
• Непосредственное изменение style

Что можно сделать?

1. Скрываем элементы только через style="display: none"
2. Не используем jQuery.fn.show/hide
3. Пишем свой метод, например jQuery.fn.display

			jQuery.fn.display = function (value){
			  var i = this.length, el;
			  value = typeof value === "string" ? value
			            : (value ? "" : "none");
			  while( i-- ){
			    el = this[i];
			    el.style && (el.style.display = value);
			  }
			  return this;
			};
		

jQuery.fn.display: используем

			<script>
			   console.profile();
			   $el.display(true);
			   console.profileEnd();
			</script>
		

data-аттрибуты

jQuery.fn.dataset (gist)

			jQuery.fn.dataset = function (data, value){
			    // Реализация на основе dataset
			    // и getAttribute
			};
		

				$el.dataset("id"); // 0.028ms, 1 call
			

Ещё

The End

Помимо увелечения производительности кода, вы сокращаете кол-во вызов, уменьшая «шум» при профилировании, а так же при запуске debugger.