script 有哪个属性可以让它不立即执行 defer,async
、async 和 defer 屬性
?http://blog.csdn.net/qq_34986769/article/details/52155871
1. defer 屬性
<script src="file.js" defer></script>
defer屬性聲明這個腳本中將不會有 document.write 或 dom 修改。
瀏覽器將會并行下載?file.js 和其它有 defer 屬性的script,而不會阻塞頁面后續處理。
defer屬性在IE 4.0中就實現了,超過13年了!Firefox 從 3.5 開始支持defer屬性 。
注:所有的defer 腳本保證是按順序依次執行的。
2. async 屬性
<script src="file.js" async></script>
async屬性是HTML5新增的。作用和defer類似,但是它將在下載后盡快執行,不能保證腳本會按順序執行。它們將在onload 事件之前完成。
Firefox 3.6、Opera 10.5、IE 9 和 最新的Chrome 和 Safari 都支持 async 屬性??梢酝瑫r使用 async 和 defer,這樣IE 4之后的所有 IE 都支持異步加載。
3. 詳細解釋
<script> 標簽在 HTML 4.01 與 HTML5 的區別:
??? type 屬性在HTML 4中是必須的,在HTML5中是可選的。
??? async 屬性是HTML5中新增的。
??? 個別屬性(xml:space)在HTML5中不支持。
說明:
??? async:false,script 將立即獲取(下載)并執行,然后才繼續后面的處理,這期間阻塞了瀏覽器的后續處理。
??? async:true,那么 script 將被異步下載并執行,同時瀏覽器繼續后續的處理。
??? HTML4中就有了defer屬性,它提示瀏覽器這個 script 不會產生任何文檔元素(沒有document.write),因此瀏覽器會繼續后續處理和渲染。
??? 如果沒有 async 屬性 但是有 defer 屬性,那么script 將在頁面parse之后執行。(async=false;defer=true)
??? 如果同時設置了二者,那么 defer 屬性主要是為了讓不支持 async 屬性的老瀏覽器按照原來的 defer 方式處理,而不是同步方式。(異步兼容,同時使用defer+async)
?
?
--------------------------------------------------------------------------------------------------------------------------------http://blog.csdn.net/q121516340/article/details/51436314
優化腳本文件的加載提高頁面的加載速度,一直是前端工程師提高頁面加載速度很重要的一條。因為涉及到各個瀏覽器對解析腳本文件的不同機制,以及加載腳本會阻塞其他資源和文件的加載。當瀏覽器解析器遇到<script>時,會立即加載(加載:下載,解析和執行),瀏覽器對其他資源和文檔的加載會停止。為了提高頁面的加載速度,得讓JS不阻塞其他資源的加載。
Webkit 和 Firefox 對JS的執行過程進行了優化,增加了“預解析”這個過程,“預解析”過程不會修改DOM樹,所以可以跟其他解析過程并行,該過程由預解析器去完成,而可能會改變DOM樹執行過程則由主解析器來完成,在通過解析過程了解JavaScript文章中有提到的JS的“預解析”過程,此過程應該就是由瀏覽器的預解析器完成,預解析器還負責解析樣式表和圖片。
另一方面,瀏覽器同事請求http的數量也是有一定限制的,加載js不像加載樣式那樣是并行的。樣式表是構建呈現樹的一部分,瀏覽器在解析頁面結構是由DOM樹和呈現樹兩部分組成,而解析執行樣式表只會改變樣式表不會更改DOM樹,呈現樹跟DOM樹雖然是相對應的,但并非一一對應。因此,也就沒有必要停止對其他資源和文檔的加載了。
提高頁面加載速度的最簡單快速的方法就是將腳本文件放到body底部。但這并不是提高頁面加載速度最優方案的方案,接下來我們介紹其他方案。
首先來介紹一下<script>時能讓腳本延遲和異步執行的兩個屬性:defer和async。
Defer、Async屬性
- defer是html4.0中定義的,該屬性使得瀏覽器能延遲腳本的執行,等文檔完成解析完成后會按照他們在文檔出現順序再去下載解析。也就是說defer屬性的<script>就類似于將<script>放在body的效果。
- async是HTML5新增的屬性,IE10和瀏覽器都是支持該屬性的。該屬性的作用是讓腳本能異步加載,也就是說當瀏覽器遇到async屬性的<script>時瀏覽器加載css一樣是異步加載的。
支持async屬性的瀏覽器貌似沒什么問題,但是defer屬性在各個瀏覽器中支持程度有點不同。測試代碼如下
<script type="text/javascript" defer> alert('defer') </script> <script type="text/javascript"> alert('script') </script> <script type="text/javascript"> window.onload = function(){ alert('onload') } </script>defer測試代碼,可將代碼復制到本地自己測試,外部腳本src引入,內聯腳本直接粘帖
運行以上代碼,得出以下結論:
- 外部JS在各個瀏覽器里運行結果跟定義的執行順序正常,alert信息會按照 script->defer->onload順序彈出;
- 內聯腳本,如果腳本都是IE9/8/7/6按照定義的順序彈出信息,其他瀏覽器則按照 defer->script->onload 順序彈出信息,表示defer失效。
- 而如果有多個內聯defer腳本、在body和head都有分布或者在iframe中也有內聯defer腳本,則在IE6中表現一致。
如果想給腳本增加defer屬性讓其延遲加載的話,最好是外部腳本,內聯的defer不僅多數瀏覽器不支持,而且IE6的表現也不一致。
所以將腳本放在body底部比給腳本增加defer屬性讓腳本延遲加載更好,就像yslow建議的那樣:put style top,put script bottom。
瀏覽器的在遇到defer和async屬性的<script>的瀏覽器執行過程如下(以下摘自javascript權威指南):
轉載于:https://www.cnblogs.com/qdcnbj/p/8066452.html
總結
以上是生活随笔為你收集整理的script 有哪个属性可以让它不立即执行 defer,async的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: JS 实现图片的预加载(转载)
- 下一篇: Redis集群管理(二)