前言:
做前端架構很久很久了,經常到我這里都是些棘手的問題,之前沒有養成很好的記錄問題的習慣,以后會努力成文,積累。
於是今天就有個這篇文章。關於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解決:
結合上訴原因並通過查看的幾個帖子討論,得出如下結論:
想要知道具體的解決方案,請關注我的公眾號哦~回復 “content-download”獲取原文喲
公眾號
