不正確放置元素導致等待狀態？ NSFW

NSFW：請注意，該網站出售大麻種子，所以鏈接是NSFW。不正確放置元素導致等待狀態？ NSFW

我有相同或非常相似的系統上運行的幾個網站，它們都從一個運行非常迅速分開，我無法找出原因，我相信這主要是記在我的經驗不足，但我已經瀏覽了Firebug的Net標籤，我不確定我是否理解它。

我可以看到，其中一個快速網站的產品頁面的大小和內容爲80.33kb，這需要1.28s的等待和598ms的加載才能顯示，而慢速網站的大小爲22.87kb，內容爲158kb，延遲時間爲4.75s，4.55s爲等待時間。

我真的很想知道如何減少這種等待時間，以及爲什麼大小和內容數字如此不同。您可以在this page處看到問題。

來源

2012-09-29 Natastna2

在其上運行的網頁性能分析器。 http://sixrevisions.com/tools/free-website-speed-testing/ –

您是否使用YSlow插件等工具檢查過您的網站？這會讓你對你正在等待的東西有很多的瞭解。 – ThatSteveGuy

那麼，我會從這裏開始：http://developer.yahoo.com/performance/rules.html感謝NSFW的單挑。 –

在整個頁面中，您都有一對真正的JavaScript腳本。

目標是在不使用JS的情況下加載儘可能多的物理內存，然後在底部完成所有的JS加載。

你也得到了很多不同的JS腳本。真的很多。

你可能會考慮搞清楚他們需要出現什麼樣的順序，然後把它們按照這個順序粘貼到一個單獨的文件中（或者半打，或者其他的東西），但是Google建議有幾十個JS文件在那一頁上），然後將其加載到頁面的底部。

這可能意味着您需要了解更多有關推遲頁面加載事件的信息，這可能意味着您需要了解如何分離關注點（我沒有看得更遠標誌看到每個人都有一個onclick處理程序，這無疑會做一些巨大的事情 - 最好是將一個監聽程序添加到容納所有標誌的容器中，然後確定它是哪一個並從那裏運行）。

但是當JS文件下載時，瀏覽器會暫停並編譯它。這通常是幾分之一秒。但是，如果你有幾十個文件一個接一個地排隊，那就是加載文件，暫停訪問文件內容，暫停編譯文件中的JS，然後運行JS，在繼續展示網站的下一部分之前......

所以所有這些小小的停頓都會加起來。

這就是爲什麼你應該成爲只是JS你需要，你應該在頁面的底部爲它服務，然後在可有可無的東西有後了一點加載。使用數百行代碼編譯單個文件即使比編譯只有幾十行的10個文件花費的時間也少。

最終，它歸結爲用戶SEES發生，且下載並不多快的速度在基準。

來源

2012-09-29 04:22:01 Norguard

縱觀使用開發工具中的Chrome網絡選項卡頁面加載時，我收到在以下鏈接下面的時序：

http://www.seed-city.com/barneys-farm-seeds/liberty-haze

102 requests | 131.24KB | 8.41s (onload: 8.50s, DOMContentLoaded: 6.61s) 
102 requests | 131.47KB | 8.47s (onload: 8.56s, DOMContentLoaded: 6.82s) 
102 requests | 131.45KB | 8.71s (onload: 8.79s, DOMContentLoaded: 7.06s)

現在，讓一個（somewhat simple）變化：

103 requests | 110.16KB | 3.77s (onload: 3.86s, DOMContentLoaded: 2.03s) 
103 requests | 110.17KB | 3.85s (onload: 3.94s, DOMContentLoaded: 2.21s) 
103 requests | 110.16KB | 4.20s (onload: 3.50s, DOMContentLoaded: 2.28s)

這是從您當前頁面的網絡選項卡輸出的typical HAR log：

http://pastebin.com/pM5Dd1Fw

的重要組成部分，是實現正等待將近五秒鐘，甚至做任何瀏覽器（僅剪斷，顯示相關線路）：

{ 
    "startedDateTime": "2012-09-29T04:58:07.861Z", 
    "time": 4831, 
    "request": { 
    "method": "GET", 
    "url": "http://www.seed-city.com/barneys-farm-seeds/liberty-haze", 
    "httpVersion": "HTTP/1.1", 
    ... 
    }, 
    "cache": {}, 
    "timings": { 
    "blocked": 0, 
    "dns": 16, 
    "connect": 129, 
    "send": 0, 
    "wait": 4677,  // <<< Right here 
    "receive": 8, 
    "ssl": -1 
    } 
}

而對於slow.html頁時機：

{ 
    "startedDateTime": "2012-09-29T05:04:51.624Z", 
    "time": 92, 
    "request": { 
    "method": "GET", 
    "url": "http://example.com/t/slow.html", 
    "httpVersion": "HTTP/1.1", 
    ... 
    }, 
    "timings": { 
    "blocked": 0, 
    "dns": 7, 
    "connect": 38, 
    "send": 0, 
    "wait": 44,   // <<< Right here 
    "receive": 1, 
    "ssl": -1 
    }, 
    "pageref": "page_3" 
}

這是4677ms VS 44ms。下面是一個典型HAR日誌，以更新的頁面：

http://pastebin.com/Jgm1YyU3

所以我做了什麼來實現這些（非常真實和具體的）改進？我搬到了Javascript將body標籤的底部：

http://pastebin.com/H9ajG99H

這使得提高兩倍。首先，您允許瀏覽器繼續並在開始與阻止進程（script調用）進行交互之前加載內容。所以你的客戶會「注意」一個更快的網站，只是因爲網頁似乎加載得更快（當你真的只是讓它加載時）。其次，您需要等到body標籤基本上完全加載，然後纔開始篡改內容。

它也看起來像你沒有在你的頭文件中使用緩存指令，告訴瀏覽器不要檢查文件的更新很長時間。因此，您的Twitter和Facebook圖標看起來像瀏覽器認爲需要與服務器一起重新檢查，從理論上來說，這是一種往返旅程，除非經常這樣做。但花費在「等待」的時間：

twitter_aqu_64.png 1.32s 
ajax-loader.gif 1.31s 
ssl-icon.jpg  1.31s

現在，我不是緩存控制方面的專家;這是一種黑暗藝術。但是，這些時機讓我覺得有可能會發生一些事情。

試試這個答案高速緩存控制的更多信息：

HTML Cache control

來源

2012-09-29 05:20:23

感謝您的意見。我想知道通過購物車功能和其他需要JavaScript的東西。是否有可能在頁面的底部有JavaScript，但仍有像購物車一樣的功能？感謝您的時間。 – Natastna2

我不知道，你只需要檢查一下。當我將它們全部移動到底部時，該頁面似乎可以正常工作，但我沒有瀏覽並單擊所有內容。如果不是全部，我可能會認爲大多數人至少可以移到底部。 –

不正確放置元素導致等待狀態？ NSFW

回答

相關問題