@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, им можно замерить, на каком этапе идут провисания.
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
summer Ярославль
от 100 000 до 140 000 ₽
КРАФТТЕК Санкт-Петербург
от 60 000 до 80 000 ₽
19 апр. 2024, в 03:52
1000 руб./за проект
19 апр. 2024, в 03:01
1000 руб./за проект
18 апр. 2024, в 21:56
2000 руб./за проект