如何解決Ajax的content-download時間過慢問題（詳細分析）

這篇文章主要介紹了Ajax的content-download時間過慢問題的解決方法及思考過程，本文透過事件背景，過程分析，給大家介紹的非常詳細，需要的朋友參考下吧

前言：

今天這篇文章跟大家介紹關於ajax的content-download時間過慢問題的解決與思考。

事件背景：

開發人員回饋給我一個bug，ajax對應速度很慢，經過定位，速度慢的原因在於，content-download時間過長，在chrome中有2s 的延遲，後來證實在我們的手機客戶端裡也有這一延遲。截圖如下：

 

流程分析：

1.定位原因：

首先，看到這一延遲，第一個反應這不是前端bug，並回饋給後端同學。 but，透過後端定位發現介面回饋時間非常迅速，翻閱國外文獻事實證明，這是由於瀏覽器事件不標準所造成的bug。

2.bug分析：

透過對開發同學的溝通，我發現bug有兩個特點，第一，這一延遲只存在需要上拉加載而引起ajax請求的情況下，且統一環境和瀏覽器下延遲時間相似，都在2-3s之間。

第二，部分上拉載入的元件雖然也觸發ajax，但並未有延遲。

於是開始了前端，原因的定位，首先找想通點：由於我們的專案架構設計，全部的上拉加載都是由一個基礎組件pagger 完成的，其部分程式碼如圖所示，原理是透過瀏覽器的scroll事件和resize事件不停的去檢測元件是否在可視區域中，如果是則觸發hasMore函數。

 

其次，查看出現延遲問題的商業頁面和不出現延遲的商業頁面對此元件的呼叫差異。

透過對比，也沒有發現兩個元件有何不同。 （故這一奧秘，有興趣的同學可以聯繫我一起討論。。。。我可以把源碼發給你）

經過多次的重現問題，明顯看到在pc的chrome，使用touch模式延遲偶爾消失，而使用mousewheel延遲又出現。故將問題定位到mousewheel事件 和其相近對應的 scroll事件。

bug解決：

結合上訴原因並透過查看的幾個帖子討論，得出如下結論：

# 1.chrome瀏覽器的mousewheel事件是造成這延遲的原因（mousewheel事件不是標準事件，不推薦大家使用），當然！代碼中我並沒有使用mousewheel事件，但是使用scroll事件就可能會引起mousewheel事件的衝突，而在我們特質的手機客戶端中的webview不幸的也命中了這一缺陷。

2.想要解決這個問題，可以嘗試監聽這一事件（如果瀏覽器沒有這一事件，也不會響應這一監聽，沒有衝突），並在事件觸發的時候，取消其所有預設行為：

故透過監聽其事件模型的deltaY（滑鼠垂直滾動量）當其有垂直位移的時候，觸發preventDefault，故代碼如下：

 window.addEventListener("mousewheel", (e) => {
   if (e.deltaY === 1) {
     e.preventDefault();
   }
 })

將這段程式碼加入前端基礎庫的頁面初始化程式碼中，神奇的發現相關的頁面content-download延遲問題都得到了解決。

總結：

相容性問題的本質：   

webkit架構中，有些模組在瀏覽器中是普遍不共享的，有一些模組在瀏覽器中是某些特性不共享的，而且可以透過不同的編譯配置來改變它們的行為。所以，很多使用webkit的瀏覽器可能會表現出不同的行為。

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

php ajax實作發起流程與稽核流程的方法 

##js封裝ajax功能函數實作步驟詳解

PHP Mysql Ajax實作淘寶客服阿里旺旺聊天功能(前台頁面)的方法

以上是如何解決Ajax的content-download時間過慢問題（詳細分析）的詳細內容。更多資訊請關注PHP中文網其他相關文章！