上一章咱們學過了如何在和在html中引入script腳本,上一章有一個要點忘說了,不管用什麼方式引入script腳本,只要屬性裏面不存在defer和async瀏覽器都會按照script在頁面中出現的前後順序進行解析,也就意味着,解析script標籤的時候中,咱們全部的在該script標籤以後的html是不被解析的css
因此咱們從這裏知道script標籤的
放置位置是很是重要滴!有的時候甚至會影響頁面的加載速度和性能
按照傳統的作法,全部script元素應該被放置到頁面的head元素中
這種方法是爲了把外部全部的css文件和js文件統一的放在同一個位置,這種傳統的方式會使在文檔中的head元素中包含全部javaScript文件,意味着必須等到所有js代碼都被下載解析執行完成之後,才能開始呈現頁面的內容,會形成上面所說過的頁面可能出現的延遲。因此大多數的前端規範(包括雅虎的31條軍規)中都要求把script標籤放在body標籤的後面以下:
這樣,在解析包含的JavaScript代碼以前,頁面的內容將徹底呈如今瀏覽器中。而用戶也會由於瀏覽器窗口顯示空白頁面的時間縮短而感到頁面的速度加快了(也就是頁面性能好了)
可是你們別忘記我們上面提到了兩個屬性「defer」和「async」這兩個屬性就是爲了
「延遲腳本」(有些地方也叫作異步加載js代碼)而建立的
上面的寫法等同於:
而async屬性,讓加載和渲染後續文檔元素(也就是HTML和CSS)的過程將和 script.js 的加載與執行並行進行(異步)。 若是仍是不是很清楚的話看一下下面的表格:
上面的紅色的線表示的是html的解析,黃色的線表示在async/defer的狀況下js的解析,怎麼樣是否是明瞭了不少