jQuery temps de chargement mobiles

Question

J'utilise un peu de jQuery sur une page web qui détecte quelle option de menu est à jour, quand afficher le menu mobile, etc. - Je suis en train d'expérimenter ce qui est possible à la minute. Lorsque je consulte la page sur un ordinateur de bureau, le code fonctionne correctement et mon menu mobile et mes onglets se chargent immédiatement lorsque je clique dessus. Lorsque je visualise la page sur un appareil mobile (S5, Android), les temps de chargement du menu à afficher, les onglets à changer, etc. prennent quelques secondes, par opposition à immédiatement. Je ne suis pas sûr si cela est dû à l'efficacité de mon code, ou si je ne devrais pas utiliser des fonctions particulières ou quoi que ce soit. Des idées sur ce qui pourrait causer ce retard?

$(document).ready(function() { 

    function getParam(name) { 
     name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]"); 
     var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"), 
      results = regex.exec(location.search); 
     return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " ")); 
    } 

    var sortElement = currentSort(getParam('sort')); 
    var itemElement = currentItem(getParam('items')); 

    $(sortElement.element).addClass('current'); 
    $(itemElement.element).addClass('current'); 

    function currentSort(value) { 

     var strElement; 

     switch(value) { 

      case 'newest' : 
       strElement = '#newest'; 
      break; 

      case 'oldest' : 
       strElement = '#oldest'; 
      break; 

      case 'alph_desc' : 
       strElement = '#desc'; 
      break; 

      case 'alph_asc' : 
       strElement = '#asc'; 
      break; 

      case '' : 
       strElement = '#newest'; 
      break; 

     } return { 
      element: strElement 
     } 

    } 

     function currentItem(value) { 

     var strElement; 

     switch(value) { 

      case '10' : 
       strElement = '#fewer'; 
      break; 

      case '15' : 
       strElement = '#few'; 
      break; 

      case '50' : 
       strElement = '#more'; 
      break; 

      case '' : 
       strElement = '#few'; 
      break; 

     } return { 
      element: strElement 
     } 

    } 



    $('#search a').click(function() { 
     $('#search').html('<form><input class="nav-search" placeholder="Search" type="text" name="search-query"/><input type="submit" value=" "/></form>'); 
    }); 

    function checkWidth() { 
     var windowSize = $(window).width(); 

     if (windowSize < 1020) { 
      $('.navigation .container').html('<ul><li class="brand mobile"><a href="/products"></a></li><li class="menu"></li><div class="mobile-menu"><ul><li><a href="/products"><div class="icon product"></div>Products</a></li><!----><li><a href="/personalise"><div class="icon personalise"></div>Personalise</a></li><!----><li id="search"><a><div class="icon search"></div>Search</a></li><!----><li><a href="/basket"><div class="icon basket"></div>Basket</a></li></ul></div></ul>'); 
      $('.mobile-menu').hide(); 
      $('.menu').click(function() { 
       $('.mobile-menu').slideToggle(); 
      }); 
     } else { 
      $('.navigation .container').html('<ul><li><a href="/products"><div class="icon product"></div>Products</a></li><!----><li><a href="/personalise"><div class="icon personalise"></div>Personalise</a></li><!----><li class="brand"><a href="/products"></a></li><!----><li id="search"><a><div class="icon search"></div>Search</a></li><!----><li><a href="/basket"><div class="icon basket"></div>Basket</a></li></ul>'); 
     } 
    } 

    checkWidth(); 
    $(window).resize(checkWidth); 

}); 

Answer 1

Juste quelques pointeurs

• ne pas utiliser docReady avec JQM, utilisez mobileInit (voir here et jqm docs)
• navigateurs mobiles sont plus lents que « bureau », donc « coûteux » de codage est livré avec une pénalité .
• tout ce que vous faites peut être fait en JavaScript plaine, alors pourquoi utiliser jQuery

Pas de temps pour tester et y compris beaucoup de choses que je ne serais jamais un code comme ça, mais cela devrait vous donner assez pointeurs:

(function (window, document) { 
    var search_form, mobile_menu, desktop_menu; 

    // > don't work with strings, build using documentElement; 
    // > correct your strings, they are not valid! 
    search_form = '<form><input class="nav-search" placeholder="Search" type="text" name="search-query"/><input type="submit" value=" "/></form>'; 
    mobile_menu = '<ul><li class="brand mobile"><a href="/products"></a></li><li class="menu"></li><div class="mobile-menu"><ul><li><a href="/products"><div class="icon product"></div>Products</a></li><!----><li><a href="/personalise"><div class="icon personalise"></div>Personalise</a></li><!----><li id="search"><a><div class="icon search"></div>Search</a></li><!----><li><a href="/basket"><div class="icon basket"></div>Basket</a></li></ul></div></ul>'; 
    desktop_menu = '<ul><li><a href="/products"><div class="icon product"></div>Products</a></li><!----><li><a href="/personalise"><div class="icon personalise"></div>Personalise</a></li><!----><li class="brand"><a href="/products"></a></li><!----><li id="search"><a><div class="icon search"></div>Search</a></li><!----><li><a href="/basket"><div class="icon basket"></div>Basket</a></li></ul>'; 

    // > JQM exposes methods to work with URL, look for $.mobile.path 
    // > declare methods before they are needed 
    // helper: get url parameter 
    function getParam(name) { 
     name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]"); 
     var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"), 
      results = regex.exec(location.search); 
     return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " ")); 
    } 

    // helper: get element showing sorting direction 
    function currentSort(value) { 
     var snip = value.split("_"); 
     return "#" + (snip[1] || snip[0]); 
    } 

    // helper: get element showing number of items 
    function currentItem(value) { 
     switch (value) { 
     case '10': return "#fewer"; 
     case '50': return "#more"; 
     default: return "#few"; 
     } 
    } 

    // helper: set menu depending on real-estate available 
    // ATTENTION: every time you call this you are setting a new binding!!! 
    function checkWidth() { 
     var window_size, $container; 

     window_size = $(window).width(); 
     $container = $('.navigation .container'); 

     if (window_size < 1020) { 
      $container.html(mobile_menu); 
      $('.mobile-menu').hide(); 
      $('.menu').click(function() { 
       $('.mobile-menu').slideToggle(desktop_menu); 
      }); 
     } else { 
      $container.html(desktop_menu); 
     } 
    } 

    $(document).on("mobileinit", function() { 
     var search; 

     search = document.getElementById("search"); 

     // add classes to sorting and items selectors 
     $(currentSort(getParam('sort')), currentItem(getParam('items'))).addClass("current"); 

     // replace link with search form on click 
     $(search).on("click", "a", function() { 
     search.innerHTML = search_form; 
     }); 

     // set desktop or mobile menu depending on screen width 
     checkWidth(); 

    }); 

    }(window, document)); 

J'espère que vous serez sur la bonne voie! D'après ce que je vois ce que vous êtes en train de coder, je ne pense pas qu'il explique un différentiel de "quelques secondes" du bureau au mobile - à moins de réparer votre html strings aide (passer jshint/jslint aide aussi à imo ...).

Après cela, vous devez chercher ailleurs. En général, gardez toujours à l'esprit que le mobile est plus lent que le bureau et réfléchissez à deux fois avant de modifier le DOM, d'ajouter beaucoup de liaisons de clic, etc. Je construis généralement la page entière pré-améliorée en mémoire et touchez le DOM une fois (pour l'injecter). Aide beaucoup sur les appareils lents

Answer 2

Je devrais commenter votre question d'abord, mais parce que ma réputation n'est pas suffisante, je fournirai une réponse alors. Avez-vous essayé d'utiliser l'interrupteur au lieu de si (s) pour sortValue et itemValue? car AFAIK, l'utilisation de if instruction va procéder à vérifier chaque cas si, comme cas de commutation fourni une solution plus efficace. vérifier this question.