How to speed up the script on mobile devices?

Question

JavaScript

The zatok.net website has an adaptive menu. When you view the site from a mobile device, when you click on the menu, it freezes for 5-6 seconds. After a pause, the menu opens and works much faster (but sometimes it also slows down). I can not understand what it is connected with. The menu works without jQuery in conjunction with the script. The script was minimized and, unfortunately, the source was not saved.
The essence of the script is that at a certain resolution it processes the click event as :hover . Maybe I'm building a garden, but in this form as it is now, I really like the menu. One problem is the brakes. Help ..
PS you need to watch / check only from a mobile device.
P.S2 noticed that the opening speed depends on the speed of the mobile Internet. 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);

Answer 1

Use Chrome Dev Tools, they can measure at what stage sagging occurs.