何時不使用 defer 屬性

Question

我以為我知道如何在從我的 html 頁面引用外部腳本時使用 'defer' 屬性。 我什至認為我沒有理由不使用它。 但是在發生了一些意想不到的事情之后，我開始研究（即使在這里），我想我不能 100% 確定每次使用腳本標簽時使用它的安全性。

是否存在不應使用 defer 的已知用例列表？

Answer 1

defer所做的唯一一件事就是在 DOM 完成解析后，但在DOMContentReady事件被觸發之前運行您的腳本。

所以：如果你的代碼不依賴於 DOM（直接或間接地通過訪問只能在 DOM 完成后確定的document屬性），則沒有理由defer . 例如：一個實用程序庫添加了一個新的命名空間ComplexNumbers ，具有ComplexNumber對象類型和相關實用程序函數用於執行復數數學，沒有理由等待 DOM：它不需要被推遲。 自定義 websocket 庫也是如此：即使您自己使用該庫需要執行 DOM 更新，它也不依賴於 DOM 並且不需要defer 。

但是對於那些試圖訪問任何有關的DOM任何代碼：您需要使用defer 。 是的：您幾乎應該defer任何作為初始頁面加載一部分加載的腳本，如果您的工作正確，這些腳本在嘗試接觸它們的 DOM 的各個部分時不會相互干擾需要合作。

事實上，你應該同時擁有defer * 和 * async ，以免阻塞頁面線程。 例外情況是，如果您正在加載type="module"腳本，在這種情況下，您無法選擇延遲：默認情況下是延遲的。 但它仍然需要async 。