javascript/jquery - $（document）.ready（）和腳本位置

Question

我想知道$(document).ready()如何工作，以及一般腳本。假設我有腳本在頁面底部（出於性能方面的原因，我被告知？）。舉個例子：假設你有一個鏈接，你需要阻止它的默認動作（preventDefault()）。如果腳本位於頁面底部，用戶是否有可能看到該頁面並在瀏覽器知道不遵循該鏈接之前單擊該鏈接？

Answer 1

「頭部」部分中的腳本在腳本標記加載到瀏覽器的位置（即在主體之前）進行評估。文檔末尾的腳本標籤在瀏覽器遇到瀏覽器分析頁面時也會執行，因此在「文檔就緒」事件之前。當整個頁面被加載時 - 即當瀏覽器分析結束標籤時，「文檔就緒」事件被觸發。

所以是的，如果需要一段時間才能加載並執行禁用文檔末尾鏈接的腳本，則用戶可以同時點擊鏈接。

一種選擇是反向操作 - 即加載禁用鏈接的頁面，並讓您的JavaScript啓用它們。或者，在頂部的腳本中使用'live'或'delegate'（在加載jquery後），以便鏈接在創建時受到影響。

查看here瞭解有關瀏覽器如何處理動態加載腳本的一些複雜性，這些複雜性略有不同。

Answer 2

雅虎建議把所有的腳本在文檔的末尾性能 - http://developer.yahoo.com/performance/rules.html

但你可以在文檔閱讀，$(document).ready()

指定函數來執行，當DOM完全加載。

用那個說，我覺得你真的不用擔心$(document).ready()。

我猜如果$(document).ready()放在最下面就會失敗，如果互聯網連接速度太慢。我想不出有任何其他情況會導致失敗。

Answer 3

如果腳本是 頁面的底部，是不是有可能，用戶 可以看到頁面，點擊瀏覽器之前的鏈接 明白不要跟隨 的聯繫？

根據我的經驗，是的，這是可能的。從document.ready()（我知道，服務器渲染效果更好）中爲奇數/偶數着色的表格造型時，我遇到過這種情況。在頂部的腳本顯示是無縫的。使用底部的腳本，在加載HTML頁面和渲染行之間有時會出現明顯的延遲。這也是一張小桌子。

建議您將腳本放在底部的原因是腳本加載在HTML中的工作方式。每次瀏覽器遇到<script>標記時，頁面加載都將停止，直到該腳本加載（或從緩存中檢索）。如果該腳本位於底部，則頁面已加載，以便用戶可以看到某些內容。如果腳本位於頂部，用戶將看到一個空白頁面，直到腳本加載。

通常這種延遲是無關緊要的，但有時它們是。另外，就像在我的例子中一樣，如果你的Javascript具有視覺效果，那麼不渲染頁面然後改變它可能是更好的用戶體驗。

Answer 4

是的，這是可能的，但在實踐中並不常見。 $(document).ready()綁定到生成dom後但在獲取所有資源之前觸發的dom：loaded事件。如果你在$（document）.ready中做了一些需要很長時間的事情，用戶肯定有一個窗口，雖然使用非綁定元素的範圍很窄。

.ready在加載css之前甚至會觸發，所以如果您可以在它的樣式之前看到您的頁面，那麼這是您使用無限事件的窗口。因此，您需要將任何需要css屬性或圖像尺寸的代碼放入$（document）.load（...）函數中。

Answer 5

要附加一個「返回false」的onclick事件：

<a href="http://www.google.com" onclick="return false;">Google</a> 

可用性納粹的會告訴你，這是很糟糕，因爲人們不能跟隨鏈接，如果他們沒有的JavaScript。

我說，你最好不要使用「A」的標籤，如果你沒有真正想要的任何地方連接人:)

<span style="cursor:pointer;text-decoration:underline">Google</span> 

可以有相同的影響。

Answer 6

我同意這是可能的，但如果網站是從progressive enhancement角度構建的，那應該不是問題。如果用戶禁用了JavaScript（爲什麼他們會這麼做？！？！？）或不支持您的腳本正在執行的某些舊瀏覽器，那麼該鏈接是他們必須訪問內容的唯一方式。

因此，如果用戶在加載腳本之前在半秒左右的時間內點擊鏈接，他們仍然可以工作。如果他們等待頁面完全加載，那麼腳本將啓動並且鏈接單擊會顯示一個模式對話框而不是導航。無論哪種方式，用戶都可以訪問內容。