關于 Swiper 的坑——隻有3.3.1的非壓縮版正常，非常奇怪

前一段時間，為了遵守《高性能網站建設指南》的約定——壓縮JavaScript，我把swiper的版本由swiper.jquery.js改成了swiper.jquery.min.js，結果奇怪的事情發生了——安卓版的微信加載網頁超級慢，而非微信版的浏覽器通路網站均正常，這個問題，我還特意在網絡上搜了搜，還真有人遇到這樣的問題。但解決辦法沒有。

這就奇了怪了，最初，我的懷疑對象肯定不是swiper，我懷疑是微信安卓版的簽名問題。因為在使用

https://github.com/wechat-group/weixin-java-tools 進行簽名的時候有這樣一段代碼：

@Override
  public String getJsapiTicket(boolean forceRefresh) throws WxErrorException {
    Lock lock = this.getWxMpConfigStorage().getJsapiTicketLock();
    try {
      lock.lock();
      if (forceRefresh) {
        this.getWxMpConfigStorage().expireJsapiTicket();
      }
      if (this.getWxMpConfigStorage().isJsapiTicketExpired()) {
        String responseContent = execute(SimpleGetRequestExecutor.create(this), WxMpService.GET_JSAPI_TICKET_URL, null);
        JsonElement tmpJsonElement = JSON_PARSER.parse(responseContent);
        JsonObject tmpJsonObject = tmpJsonElement.getAsJsonObject();
        String jsapiTicket = tmpJsonObject.get("ticket").getAsString();
        int expiresInSeconds = tmpJsonObject.get("expires_in").getAsInt();
        this.getWxMpConfigStorage().updateJsapiTicket(jsapiTicket, expiresInSeconds);
      }
    } finally {
      lock.unlock();
    }
    return this.getWxMpConfigStorage().getJsapiTicket();
  }      

懷疑這段代碼的原因就是它有一個lock，但時候證明原因不在于此。這個方法請求得響應結果特别的快。

後來，折騰了一天，實在是沒招了，就隻能復原項目源碼的版本，一次次試錯，最後在臨近晚上7點的時候才把問題确定在swiper上。

當時頁面引用的swiper是這樣的：

<script src="https://cdn.bootcss.com/Swiper/3.3.1/js/swiper.jquery.min.js"></script>

最初代碼部署在阿裡雲的伺服器上時，我手機是iPhone6，微信訂閱号通路的時候速度特别正常。但是老闆的手機是華為的安卓，微信通路慢得要人崩潰，這期間我一直認為不是代碼的問題，而是他手機的問題，最後老闆被客戶逼急了，還刷了機（悲催的是資料還丢了），結果通路速度依然很慢。後來，他就來逼我，這™沒有一點錯誤資訊啊，我手機正常啊，非微信的安卓浏覽器也通路正常啊。代碼絕對是沒有問題的。

後來沒辦法，别人的安卓手機微信通路網站也是慢，問題總要解決啊。

我必須要在本地重制這個問題了，使用微信提供的微信web開發者工具沒有問題，Google Chrome浏覽器沒有問題。

然後開啟ngrok，奇怪的現象發生了，我的手機iPhone6：

微信浏覽器的進度條一直停留在大概這個位置！

現在我确信代碼是在某個地方出現了bug！，确定無疑了！

復原曆史版本是必須的，這是一項重複性特别高的工作，一行一行代碼的瞧啊，就像是在拾麥子一樣。最後，問題終于找到是在swiper的應用上面！！！！！！！！！

把壓縮版換成開發版：

<script src="https://cdn.bootcss.com/Swiper/3.3.1/js/swiper.jquery.js"></script>

這個時候，通路竟然正常了！！！！！！！！！！！！！！神奇的swiper！！！！！！！！！！！！

把swiper切換成3.4.2的開發版還是壓縮版，都依然有問題。

<script src="https://cdn.bootcss.com/Swiper/3.4.2/js/swiper.jquery.js"></script>

是不是使用swiper的時候出錯了呢？

這問題我也考慮過，試驗過。

new Swiper('.recom-container', {
    pagination : '.recom-pagination',
    lazyLoading : true,
    slidesPerView : 1,
    paginationClickable : true,
});
// 熱點新聞
new Swiper('.index-new-list', {
    autoplay : 3000,
    direction : 'vertical',
    loop : true,
    paginationClickable : true
});
// 導航
new Swiper('.index-nav', {
    scrollbarHide : true,
    slidesPerView : 'auto',
    centeredSlides : false,
    grabCursor : true
});      

使用方法應該是沒有問題的，應該就是swiper版本的問題，當然這問題的發生也特别的奇怪，它阻礙頁面的呈現。并且看浏覽器的臉色。

問題的結果，也隻能是說swiper在版本更新的時候忽略了某些浏覽器的相容，導緻内部的某些地方阻塞。

解決的方案，其實也很簡單，隻能将就使用3.3.1的開發版。也就是

<script src="https://cdn.bootcss.com/Swiper/3.3.1/js/swiper.jquery.js"></scri