2016-08-14 33 views
1

在我的Angular2項目中,我有一個組件通過HTTP加載JSON數據,並將其作爲網格顯示在頁面上。網格具有分頁功能,每次請求新的網格頁面時,組件都會執行新的HTTP GET。 dev站點與web服務一樣,託管在本地主機上,但它們使用不同的端口號。谷歌瀏覽器:本地主機上的HTTP GET,加載時間不一致

該組件沒有任何錯誤。不過,我注意到,在谷歌瀏覽器中,HTTP GET響應時間似乎沒有明顯的原因波動了&。這隻發生在Chrome中。在Firefox中沒有問題。

當我將網站部署到現場時,Chrome或Firefox中沒有問題,所以此問題特定於Chrome +我的開發環境/可能是本地主機URL。

這裏是我的谷歌瀏覽器的網絡選項卡上的開發網站截圖: enter image description here

如果你看一下時間列中,您可以看到大約80毫秒和380ms之間的時間波動對每個連續的請求。 380ms幾乎延長了5倍,所以如你所料,每次響應速度較慢時,網格組件刷新都會明顯延遲。再次,這隻發生在Chrome中。

挖越深,這裏是定時的緩慢HTTP GET截圖: enter image description here

您可以從上面的例子中看到,Web服務在響應約75ms,而Chrome報告說,整個過程持續377ms ?!從時間上看,我不知道377ms是從哪裏來的,因爲其他數字顯然不合377ms。然而,看着視覺時間條,DNS LookupInitial Connection之間有一個巨大的差距!

而且,這裏有一個截圖更快的HTTP GET: enter image description here

正如你可以從上面的時機看,有沒有DNS lookupInitial Connection段,好像有在前面的屏幕截圖這是一個有點古怪?

有沒有人有任何建議,我可能會如何解決這個問題?

任何幫助,將不勝感激:)

+0

我的建議是,你應該嘗試幾件事情。 1)如果發生同樣的問題,試試Firefox 2)使用JSON獲取客戶端,比如郵遞員甚至是curl,看看它是否是api服務器。 正如你的標題提到鉻,我會假設你已經嘗試了鉻和信息是不足以確定它是一個瀏覽器問題或代碼。 –

+0

我已經試過Firefox了,正如我的問題所述。 Firefox根本沒有問題。我已經對.NET Core webservice進行了基準測試,並且每次都會返回大約80ms的響應。我認爲有相當多的證據指出Chrome瀏覽器不喜歡的瀏覽器問題或本地開發環境設置問題 – Delosdos

+1

首先,我注意到ur ** Slow ** HTTP Get截圖在連接設置下有額外的DNS查找。 哪裏ur **快** Http get沒有。我也檢查過我的,沒有DNS查詢。 通常情況下,Chrome會有很長時間的停頓,但不會顯示在您的** Slow **屏幕截圖中。假設它是一個攤位,你的TTFB時間與你的**快速**大約相同。 還有一個類似的問題,因爲你的[這裏](http://stackoverflow.com/questions/27740692/request-stalled-for-a-long-time-occasionally-in-chrome)。 –

回答

0

快速更新:我設法通過使用不同的主機名,我開發網站來解決最終問題。

我將127.0.0.1 testsite添加到我的hosts文件中,然後將我的dev服務器URL更改爲http://testsite:3000。我以前使用http://localhost:3000。之後,HTTP GET全部下降到一致的80ms-ish,並且在Developer Tools的Network選項卡中沒有更多的DNS查找問題。

不完全確定來源,但使用localhost作爲主機在某處引起問題。

+0

奇怪而有趣的問題。如果你使用的是linux,localhost與host文件中定義的''testsite''幾乎是一樣的。不過,很高興你能解決問題。也許你可以嘗試的另一件事是,你可以清除chrome的dns緩存,chrome:// net-internals /#dns。看看它是否有幫助。 –