關於

  首先聲明。這在</body>之后插入其他元素,從HTML 2.0起就是不合標准的。按照HTML5標准中的HTML語法規則,如果在</body>后再出現<script>或任何元素的開始標簽,都是parse error,瀏覽器會忽略之前的</body>,即視作仍舊在body內。所以實際效果和寫在</body>之前是沒有區別的。這種寫法雖然也能work,但是並沒有帶來任何額外好處,實際上出現這樣的寫法很可能是誤解了“將script放在頁面最末端”的教條。所以還是不要這樣寫為好。

因為在body以外寫script也可能存在其他異常嘛。有什么理由能讓開發者推斷出后者會更安全呢?實際上在沒有充分測試的前提下,如果要進行推斷,那么可以推斷出后者的風險更大。

第一,這是不合標准的行為,而且從有HTML標准以來都是不合標准的,因此瀏覽器實現不一致或者在這種情況下有bug的風險顯然更大。

 

第二,雖然將<script>寫在</body>之后,但最終的DOM樹里,<script>元素還是會成為body的子節點,這一點很容易在firebug等調試器里驗證。既然如此,如果將<script>寫在</body>之前會有問題,你又如何保證寫在之后(並在DOM里又變成了和寫在之前一樣的結構)就沒有問題?

那最優解的一邊解析頁面一邊下載JS應該怎樣實現呢?

  我們<script>標簽這里面有兩個屬性(async和defer),現在80%的瀏覽器都可以識別他們,這兩個屬性能讓瀏覽器做到一邊下載JS(還是只能同時下載兩個JS),一邊解析HTML。他的優點不是增加JS的並發下載數量,而是做到下載時不block解析HTML。

1 <script type="text/javascript" src="path/to/script1.js" async></script>  
2 <script type="text/javascript" src="path/to/script2.js" async></script>  

  如上圖我們同時引入兩條外部js文件時:

  async屬性能保證script會異步執行,只要下載完就執行,這會導致script2.js可能先於script1.js執行(如果script2.js比較大,下載慢)。
defer屬性就能保證script有序執行,script1.js先執行,script2.js后執行。

 

 
 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找