jQuery手机加载次数

就是一些指针

• 不使用docReady与JQM，使用mobileInit(见这里和JQM文档)
• 移动浏览器比"桌面"浏览器慢，所以"昂贵"的代码是有代价的。
• 你所做的一切都可以在纯JavaScript中完成，那么为什么要使用jQuery呢

没有时间进行测试，并且包含了许多我永远不会像这样编写的东西，但这应该给你足够的指针:

(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));

希望这能让你走上正轨!

从我看到你在写什么，我不认为它解释了从桌面到移动的"几秒钟"差异-除非修复你的html strings帮助(传递jshint/jslint也有帮助…)。

在那之后，你必须找别的地方。

一般来说，始终记住移动端比桌面端慢，在修改DOM、添加大量点击绑定等问题上要三思而后行。我通常在内存中构建预增强的整个页面，并触摸DOM一次(注入它)。

我应该先评论你的问题，但由于我的声誉不够，我将在之后提供答案。您是否尝试使用开关箱而不是sortValue和itemValue的开关箱?因为AFAIK，使用if语句会继续检查每个if case，对于切换case提供了更有效的解决方案。检查这个问题