關於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解決：

 

結合上訴緣由並經過查看的幾個帖子討論，得出以下結論：

 

想要知道具體的解決方案，請關注個人公衆號哦～回覆 「content-download」獲取原文喲

 

公衆號