script的延遲執行

libmw發表於2014-06-23

看這段程式碼:

<body>
    <script src="deffer.js"></script>
    content
 </body>

deffer.js的內容為:

alert(1)

 

這樣在alert視窗沒有被關閉之前,頁面都會是一片空白。因為alert視窗阻止了頁面的繼續渲染。

 

為了避免此類問題,html規範裡定義了deffer和async屬性,這兩個屬性的具體定義這裡不討論,反正他們都是用來告訴瀏覽器,一定要在頁面渲染完成以後再執行本指令碼的內容,這樣指令碼執行的時候頁面已經渲染完畢了。

<body>
    <script deffer async src="deffer.js"></script>
    content
 </body>

 

注意,對於多個加了deffer或者async的指令碼,他們的執行順序和他們在頁面上出現的順序無關。即使html規範定義了deffer指令碼應該按照順序來執行,但是瀏覽器事實上並沒有全部遵守這個約定。

 

相關文章