這篇文章主要介紹Ajax的content-download時(shí)間過慢怎么辦，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)建站擁有10余年的建站服務(wù)經(jīng)驗(yàn)，在此期間，我們發(fā)現(xiàn)較多的客戶在挑選建站服務(wù)商前都非常的猶豫。主要問題集中：在無法預(yù)知自己的網(wǎng)站呈現(xiàn)的效果是什么樣的？也無法判斷選擇的服務(wù)商設(shè)計(jì)出來的網(wǎng)頁效果自己是否會(huì)滿意？創(chuàng)新互聯(lián)建站業(yè)務(wù)涵蓋了互聯(lián)網(wǎng)平臺(tái)網(wǎng)站建設(shè)、移動(dòng)平臺(tái)網(wǎng)站制作、網(wǎng)絡(luò)推廣、按需定制等服務(wù)。創(chuàng)新互聯(lián)建站網(wǎng)站開發(fā)公司本著不拘一格的網(wǎng)站視覺設(shè)計(jì)和網(wǎng)站開發(fā)技術(shù)相結(jié)合，為企業(yè)做網(wǎng)站提供成熟的網(wǎng)站設(shè)計(jì)方案。

事件背景：

開發(fā)人員反饋給我一個(gè)bug，ajax相應(yīng)速度很慢，經(jīng)過定位，速度慢的原因在于，content-download時(shí)間過長(zhǎng)，在chrome中有2s+的延遲，后證實(shí)在我們的手機(jī)客戶端里也有這一延遲。截圖如下：

過程分析：

1.定位原因：

首先，看到這一延遲，第一反應(yīng)這不是前端bug，并反饋給后端同學(xué)。but，通過后端定位發(fā)現(xiàn)接口反饋時(shí)間非常迅速，翻閱國外文獻(xiàn)事實(shí)證明，這是由于瀏覽器事件不標(biāo)準(zhǔn)引起的bug。

2.bug分析：

通過對(duì)開發(fā)同學(xué)的溝通，我發(fā)現(xiàn)bug有兩個(gè)特點(diǎn)，第一，這一延遲只存在需要上拉加載而引起ajax請(qǐng)求的情況下，且統(tǒng)一環(huán)境和瀏覽器下延遲時(shí)間相似，都在2-3s之間。

第二，部分上拉加載的組件雖然也觸發(fā)ajax，但并未有延遲。

于是開始了前端，原因的定位，首先找想通點(diǎn)：由于我們的項(xiàng)目架構(gòu)設(shè)計(jì)，全部的上拉加載都是由一個(gè)基礎(chǔ)組件pagger 完成的，其部分代碼如圖所示，原理是通過瀏覽器的scroll事件和resize事件不停的去檢測(cè)組件是否在可視區(qū)域中，如果是則觸發(fā)hasMore函數(shù)。

其次，查看出現(xiàn)延遲問題的業(yè)務(wù)頁面和不出現(xiàn)延遲的業(yè)務(wù)頁面對(duì)這一組件的調(diào)用區(qū)別。

通過對(duì)比，也沒有發(fā)現(xiàn)兩個(gè)組件有何不同。（故這一奧秘，有興趣的同學(xué)可以聯(lián)系我一起討論。。。。。我可以把源碼發(fā)給你）

經(jīng)過多次的重現(xiàn)問題，明顯看到在pc的chrome，使用touch模式延遲偶爾消失，而使用mousewheel延遲又出現(xiàn)。故將問題定位到mousewheel事件 和其相近對(duì)應(yīng)的 scroll事件中。

bug解決：

結(jié)合上訴原因并通過查看的幾個(gè)帖子討論，得出如下結(jié)論：

1.chrome瀏覽器的mousewheel事件是引起這一延遲的原因（mousewheel事件不是標(biāo)準(zhǔn)事件，不推薦大家使用），當(dāng)然！代碼中我并沒有使用mousewheel事件，但是使用scroll事件就可能會(huì)引起mousewheel事件的沖突，而在我們特質(zhì)的手機(jī)客戶端中的webview不幸的也命中了這一缺陷。

2.想要解決這個(gè)問題，可以嘗試監(jiān)聽這一事件（如果瀏覽器沒有這一事件，也不會(huì)響應(yīng)這一監(jiān)聽，沒有沖突），并在事件觸發(fā)的時(shí)候，取消其所有默認(rèn)行為：

故通過監(jiān)聽其事件模型的 deltaY（鼠標(biāo)垂直滾動(dòng)量）當(dāng)其有垂直位移的時(shí)候，觸發(fā)preventDefault，故代碼如下：

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

將這段代碼加入前端基礎(chǔ)庫的頁面初始化代碼中，神奇的發(fā)現(xiàn)相關(guān)的頁面content-download延遲問題都得到了解決。

什么是ajax

ajax是一種在無需重新加載整個(gè)網(wǎng)頁的情況下，能夠更新部分網(wǎng)頁的技術(shù)，可以通過在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，使網(wǎng)頁實(shí)現(xiàn)異步更新。

以上是“Ajax的content-download時(shí)間過慢怎么辦”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)頁名稱：Ajax的content-download時(shí)間過慢怎么辦-創(chuàng)新互聯(lián)
URL地址：http://www.rwnh.cn/article16/dghsdg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、微信小程序、定制開發(fā)、移動(dòng)網(wǎng)站建設(shè)、網(wǎng)站策劃、手機(jī)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)