簡體   English   中英

網頁底部/頂部的 JavaScript?

[英]JavaScript at bottom/top of web page?

我只是使用 Mozilla Firefox 的插件“Yslow”,它告訴我應該將 JavaScript 放在底部。 我以前聽說過這個,但並沒有真正考慮太多。 與頂部相比,將 JavaScript 放在網頁底部真的有優勢嗎?

它將允許網頁在執行 JavaScript 之前明顯加載,這對於 Google Analytics 之類的事情很有意義,不需要在頁面加載之前發生。

您可能還想查看 jQuery、原型等內容並附加到“就緒”處理程序,該處理程序在 DOM 完全加載后執行 JavaScript 代碼,這是適合許多 JavaScript 代碼的地方。

假設您沒有在 CDN 上運行或沒有從單獨的子域或服務器為您的 JS 提供服務,它將同步加載並強制您的 HTML 內容等待,直到它下載了文件。 通過將 JS 放在頁面底部關閉</body>標記之前,您允許在加載 javascript 之前解析 HTML。 這提供了更快的頁面加載時間的效果。

如果您有靜態 html 內容和大量 javascript,它可以在感知頁面加載時間上產生差異,因為 html 將首先加載,讓用戶看到一些東西。 如果你沒有太多的 javascript,或者現有的頁面內容依賴於 javascript 是有用的,那么這實際上不是那么有用。

我想更新這個主題,谷歌最近推出了異步截取的http://support.google.com/analytics/bin/answer.py?hl=en&answer=1008080&rd=1可以添加到您的網站,例如谷歌統計支持。 它應該放在<head>部分的底部以獲得最佳性能。 關鍵是這增加了在用戶離開頁面之前發送的跟蹤信標的可能性。

如果您想使用谷歌分析在谷歌網站管理員工具中驗證您的網站,它也應該位於那里。

除此之外,相同的規則基本上仍然適用 - 底部的 javascript 用於“快速”加載頁面。 我使用引號是因為在 javascript 完成之前我不計算頁面完全加載;-)

是的,頁面將在加載和執行 javascript 之前加載內容並呈現它,因此頁面加載速度會更快。

最佳

當您將 JavaScript 放在頁面頂部時,瀏覽器將開始在標記、圖像和文本之前加載您的 JS 文件。 並且由於瀏覽器同步加載 JavaScript,因此在加載 JavaScript 時不會加載任何其他內容。 因此,當 JavaScript 正在加載時,用戶將在幾秒鍾內看到一個空白頁面。

底部

另一方面,如果您將 JavaScript 放在頁面底部,用戶將首先看到頁面加載,然后 JavaScript 將在后台加載。 因此,例如,如果您的 CSS 和 HTML 需要 5 秒來加載,而您的 JavaScript 又需要 5 秒,那么將我們的 JavaScript 放在頁面頂部會給用戶一個 10 秒的“感知”加載時間,並將其放入在底部將給出 5 秒的“感知”加載時間。

取自德米安實驗室

它允許所有 DOM 元素在加載處理它們的 Javascript 之前完全加載。 此標准也是 Visual Studio 的一部分。

將腳本放在元素底部可以提高顯示速度,因為腳本編譯會減慢顯示速度。

是的,包括頁面底部的 javascript 確實加快了頁面的加載速度。 由於瀏覽器是同步執行的,因此如果將其放置在頁面頂部,則會影響頁面加載。 如果它被放置在頁面底部,那么當瀏覽器開始加載 javascript 時,頁面將加載整個標記,從而為用戶提供更好的體驗。

建議將所有內聯腳本放在最后以提高性能,您不希望用戶在腳本呈現時盯着空白屏幕。 您可以使用 defer 屬性,例如。 防止鏈接腳本延遲您的 html 呈現。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM