Script標籤裡的defer屬性,你知多少?

2021-08-25 12:37:46 字數 833 閱讀 3545

先看下面三段**,寫出你認為的輸出結果?

test

test

test

你一定對第二種很感興趣,在第二段**中,script標籤的載入順序跑在了它下面的button後面,這裡要講解script標籤中的defer屬性。

先摘錄一段貌似官方的說法:

其實我們一般的寫法中也有defer屬性的,只不過它的預設值是false,比如

它等價於

我們可以顯示的定義defer

或者是

當然了,好處就是那個官方的說法,瀏覽器不會立即對其進行處理,這樣的好處是提高載入**的效能,不過用defer有幾點需要注意的

最後請注意兩點:

1、不要在defer型的指令碼程式段中呼叫document.write命令,因為document.write將產生直接輸出效果。

2、而且,不要在defer型指令碼程式段中包括任何立即執行指令碼要使用的全域性變數或者函式。

加上defer等於在頁面完全在入後再執行,相當於 window.onload,但應用上比window.onload更靈活! 下面舉個defer的實際應用,通常我們說eval是**的,eval is evil,那麼有了這個defer屬性,我們就可以打造屬於自己eval方法

具體參見[url]

script標籤中defer和async的區別?

defer 延遲 async 非同步 先來試個一句話解釋仨,當瀏覽器碰到 script 指令碼的時候 沒有 defer 或 async,瀏覽器會立即載入並執行指定的指令碼,立即 指的是在渲染該 script 標籤之下的文件元素之前,也就是說不等待後續載入的文件元素,讀到就載入並執行。有 async,...

script標籤的crossorigin屬性

通常我們使用window.onerror來捕獲js指令碼的錯誤資訊。但是對於跨域呼叫的js指令碼,onerror事件只會給出很少的報錯資訊 error script error.這個簡單的資訊很明顯不足以看出指令碼的具體錯誤,所以我們可以使用crossorigin屬性,使得載入的跨域指令碼可以得出跟...

script標籤的位置

在我們編寫 的時候,會在頁面內使用 script 標籤來寫js,雖然理論上script標籤的位置放在 可以,但是還是有一點區別的。為什麼很多人把script標籤放在底部 初學者在學習js的時候看見很多demo裡面的script標籤寫在底部,但是卻不是很清楚為什麼,下面來解釋一下 雖然理論上放在 都是...