@freeskateonly
Краток

Как ускорить работу срипта на мобильных устройствах?

На сайте zatok.net установлено адаптивное меню. Когда сайт просматриваешь с мобильного устройства, то при нажатие на меню происходит зависание на 5-6 секунд. Спустя паузу меню открывается и работает намного быстрее (но иногда тоже подтармаживает). Не могу понять с чем это связано. Меню работает без jQuery в связке с скриптом. Скрипт минимизировал и, к сожалению, исходник не сохранил.

Суть скрипта, состоит в том, что при определённом разрешении он событие клика обрабатывает как :hover . Может я горожу огород, но в таком виде как сейчас, меню мне очень нравиться. Одна проблема - тормоза. Помогите..

P.S смотрть/проверять нужно только с мобильного устройства.
P.S2 заметил, что скорость открытия зависит от скорости мобильного интернета. Wtf?!

(function(w){
	var adJust, nav, navLiA, navLi, toggleMenu, toggleClass, ww, sizeChange, screenMinWidth;
	var displayCache = {};
	screenMinWidth = 768

	ww = document.body.clientWidth;
	toggleMenu = document.querySelector('.toggleMenu');
	navLiA = document.querySelectorAll('.nav li a');
	nav = document.querySelector('.nav');
	w.onload = function(){
		this.addEventListener('resize' , sizeChange);
		if(!!this['onorientationchange']) this.addEventListener('onorientationchange' , sizeChange);
		for(n in navLiA) {
			(function(el){
			if(!!el.nextElementSibling) {
				if(!!el.classList)
					el.classList.add('parent');
				else
					el.className = 'parent';
				}
			})(navLiA[n]);
		}
		toggleMenu.addEventListener('click', function(e){
			e.preventDefault();
			toggleClass(this, 'active');
			toggle(nav);
		});
		adJust();
	};

	sizeChange = function(){
		ww = document.body.clientWidth;
		adJust();
	};

	adJust = function(){
		var navLi, navLiAParent;

		toggleMenu = document.querySelector('.toggleMenu');
		navLiA = document.querySelectorAll('.nav li a');
		nav = document.querySelector('.nav');
		navLi = document.querySelectorAll('.nav li');
		navLiAParent = document.querySelectorAll('.nav li a.parent');
		if(ww < screenMinWidth) {
			for(n in navLiAParent) {
				(function(el){
					var ll;
					if(!!el.nextElementSibling) {
						ll = document.createElement('div');
						ll.setAttribute('class', 'll');
						el.parentNode.appendChild(ll);
					}
				})(navLiAParent[n]);
			}
			toggleMenu.style.display = 'inline-block';
			if(toggleMenu['classList'] && !toggleMenu.classList.contains('active')) {
				nav.style.display = 'none';
			} else {
				nav.style.display = '';
			}
			for(var i in navLi) {
				(function(el){
					if(!(el instanceof HTMLElement))
						return false;
					else {
						el.removeEventListener('mousemove', toggleHover);
						el.removeEventListener('mouseleave', toggleHover);
					}
				})(navLi[i]);
			}
			var navLiLL = document.querySelectorAll('.nav li .ll');
			for(var i in navLiLL) {
				(function(el){
					if(!(el instanceof HTMLElement))
						return false;
					el.removeEventListener('click', toggleHoverClk);
					el.addEventListener('click', toggleHoverClk)
				})(navLiLL[i]);
			}

		} else {
			toggleMenu.style['display'] = "none";
			nav.style['display'] = '';
			for(var n in navLi) {
				(function(el, className){
					if (el.classList)
						el.classList.remove(className);
					else if (!el['className'])
						el['className'] = className;
					else 
						el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
				})(navLi[n], 'hover');
			}
			for(var n in navLi) {
				(function(el){
					if(!(el instanceof HTMLElement))
						return false;
					else {
						if(el.querySelector('a')) {
							el.querySelector('a').removeEventListener('click', toggleHoverClk);
						}
						el.removeEventListener('mousemove', toggleHover);
						el.removeEventListener('mouseleave', toggleHover);
						el.addEventListener('mouseleave', toggleHover);
						el.addEventListener('mousemove', toggleHover);
					}
				})(navLi[n]);
			}
		}
	};
	function toggleHover(e){
		if(e.type === 'mouseleave') {
			if (this.classList)
				this.classList.remove('hover');
			else
				this.className = this.className.replace(new RegExp('(^|\\b)' + 'hover'.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
		} else if (e.type === 'mousemove') {
			if (this.classList)
				this.classList.add('hover');
			else
				this.className += ' ' + 'hover';
		}
		// toggleClass(this ,'hover')
	}
	function toggleHoverClk(e){
	e.preventDefault();
	toggleClass(this.parentNode, 'hover');
	}
	function toggleClass(el, className){
	if (el.classList) {
	el.classList.toggle(className);
	} else {
	var classes = el.className.split(' ');
	var existingIndex = classes.indexOf(className);

	if (existingIndex >= 0)
	classes.splice(existingIndex, 1);
	else
	classes.push(className);

	el.className = classes.join(' ');
	}
	};

	function getRealDisplay(elem) {
	if (elem.currentStyle) {
	return elem.currentStyle.display
	} else if (window.getComputedStyle) {
	var computedStyle = window.getComputedStyle(elem, null )

	return computedStyle.getPropertyValue('display')
	}
	}

	function hide(el) {
	if (!el.getAttribute('displayOld')) {
	el.setAttribute("displayOld", el.style.display)
	}

	el.style.display = "none"
	}

	function isHidden(el) {
	var width = el.offsetWidth, height = el.offsetHeight,
	tr = el.nodeName.toLowerCase() === "tr"

	return width === 0 && height === 0 && !tr ?
	true : width > 0 && height > 0 && !tr ? false : getRealDisplay(el)
	}

	function toggle(el) {
	isHidden(el) ? show(el) : hide(el)
	}

	function show(el) {

	if (getRealDisplay(el) != 'none') return
	var old = el.getAttribute("displayOld");
	el.style.display = old || "";

	if ( getRealDisplay(el) === "none" ) {
	var nodeName = el.nodeName, body = document.body, display

	if ( displayCache[nodeName] ) {
	display = displayCache[nodeName]
	} else {
	var testElem = document.createElement(nodeName)
	body.appendChild(testElem)
	display = getRealDisplay(testElem)

	if (display === "none" ) {
	display = "block"
	}

	body.removeChild(testElem)
	displayCache[nodeName] = display
	}

	el.setAttribute('displayOld', display)
	el.style.display = display
	}
	}

})(window);
  • Вопрос задан
  • 346 просмотров
Пригласить эксперта
Ответы на вопрос 1
kapuletti
@kapuletti
Используй Chrome Dev Tools, им можно замерить, на каком этапе идут провисания.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы