摘要:標簽加載順序如果要談標簽加載順序問題,首先要談的就是標簽的位置,因為標簽的位置對于加載順序來說有著很重要的影響。例如標簽在以上代碼中,可能由于下載時間比較長,由于兩個標簽都是異步執行,互不干擾,因此可能就會先于執行。
談談 標簽加載順序的問題
這篇文章比較長,如果你耐心讀完了,我會感謝你愿意在這篇文章上花費時間,也希望你有收獲。
其實說起,幾乎搞前端的都知道他的作用:引入 JavaScrit 代碼。沒錯,這就是被創建的最初原因。標簽出現的很早,這個元素是由 Netscape 創造,并在 Netscape Navigator 2中首先實現。后來,這個元素被加入到正式的 HTML 規范中。
JavaScript 的誕生離不開 Netscape ,JavaScript 是由 Netscape 公司的布蘭登·艾奇(Brendan Eich)在 1995 年開發的一種腳本語言,JavaScript 的第一個版本 JavaScript 1.0 就在 Netscape Navigator 2 實現。擁有的屬性
async:可選,表示應該立即下載腳本,但不應妨礙頁面中的其他操作,比如下載其他資源或等待加載其他腳本。只對外部腳本文件有效。
charset:可選。表示通過 src 屬性指定的代碼的字符集。由于大多數瀏覽器會忽略它的值,因此這個屬性很少有人用。
defer:可選。表示腳本可以延遲到文檔完全被解析和顯示之后再執行。只對外部腳本文件有效。IE7 及更早版本對嵌入腳本也支持這個屬性。
language: 已廢棄。原來用于表示編寫代碼使用的腳本語言(如 JavaScript 、 JavaScript1.2 或 VBScript )。大多數瀏覽器會忽略這個屬性,因此也沒有必要再用了。
src:可選。表示包含要執行代碼的外部文件。
type:可選。可以看成是 language 的替代屬性;表示編寫代碼使用的腳本語言的內容類型(也稱為 MIME 類型)。雖然 text/javascript
和 text/ecmascript 都已經不被推薦使用,但人們一直以來使用的都還是 text/javascript 。實際上,服務器在傳送 JavaScript 文件時使用的
MIME 類型通常是 application/x–javascript ,但在 type 中設置這個值卻可能導致腳本被忽略。另外,在非IE瀏覽器中還可以使用以下值:
application/javascript 和 application/ecmascript 。考慮到約定俗成和最大限度的瀏覽器兼容性,目前 type 屬性的值依舊還是
text/javascript 。不過,這個屬性并不是必需的,如果沒有指定這個屬性,則其默認值仍為text/javascript 。
在以上屬性中 async屬性是 HTML5 中的新屬性。引入方式 JavaScript 的兩種方式 內聯形式
這種方式指的是在 html 文件中,添加一個標簽,然后將 JavaScript代碼直接寫在里面,如:
外置形式script 標簽
外置形式是將 JavaScript 代碼寫在外部的一個文件里面,在 html 文件中通過 標簽的 src 屬性引入,如:
兩種引入形式的比較script 標簽
對于這兩種方式,毫無疑問,外置形式明顯好于內聯形式,主要表現為以下方面:
可維護性:外置 Javascript 文件可以被多個頁面調用而不用在每個頁面上反復地書寫.如果有需要改變的部分,你只需要在一處修改即可.所以外置JavaScript 導致代碼工作量減少,進而使得維護手續也更加方便。
可緩存:瀏覽器能夠根據具體的設置緩存鏈接的所有外部 JavaScript文件。也就是說,如果有兩個頁面都使用同一個文件,那么這個文件只需下載一次。因此,最終結果就是能夠加快頁面加載的速度。
關注點分離:將 JavaScript 封裝在外部的.js文件遵循了關注點分離的法則.總體來說,分離 HTML,CSS 和 JavaScript 從而讓我們更容易操縱他們.而且如果是多名開發者同步工作的話,這樣也更方便。
因此,在今后的開發中盡量使用外置方式的形式引入JavaScript。
標簽加載順序如果要談 標簽加載順序問題,首先要談的就是標簽的位置,因為標簽的位置對于JavaScript加載順序來說有著很重要的影響。
標簽位置標簽的位置有兩種,一種是方式元素里面,另外一種就是放在 元素中頁面內容的后面,下面將一一介紹這兩種形式:
標簽放在元素里Example HTML Page
這是一種比較傳統的做法,目的就是把所有外部文件(包括 CSS 文件和 JavaScript 文件)的引用都放在相同的地方.可是,在文檔的
元素中包含所有 JavaScript 文件,意味著必須等到全部 JavaScript 代碼都被下載、解析和執行完成以后,才能開始呈現頁面的內容(瀏覽器在遇到 標簽時才開始呈現內容)。對于那些需要很多 JavaScript 代碼的頁面來說,這無疑會導致瀏覽器在呈現頁面時出現明顯的延遲,而延遲期間的瀏覽器窗口中將是一片空白。很明顯,這種做法有著很明顯的缺點,特別是針對于現在的移動端來說,如果超過 1s 還沒有內容呈現的話將是一種很差的用戶體驗。為了避免這個問題,就有了下面這種加載方式。 標簽放在 元素中頁面內容的后面Example HTML Page
對于這種方式,在解析包含的 JavaScript 代碼之前,頁面的內容將完全呈現在瀏覽器中。而用戶也會因為瀏覽器窗口顯示空白頁面的時間縮短而感到打開頁面的速度加快了
延遲加載的每個屬性設計來肯定都是有用的,下面我們就來說一說 defer 屬性。
HTML 4.01 為 標簽定義了 defer 屬性。這個屬性的用途是表明腳本在執行時不會影響頁面的構造。也就是說,腳本會被延遲到整個頁面都解析完畢后再運行。因此,在 元素中設置defer 屬性,相當于告訴瀏覽器立即下載,但延遲執行,比如:
script 標簽
在這個例子中,雖然我們把 元素放在了文檔的 元素中,但其中包含的腳本將延遲到瀏覽器遇到 標簽后再執行。HTML5 規范要求腳本按照它們出現的先后順序執行,因此第一個延遲腳本會先于第二個延遲腳本執行,而這兩個腳本會先于 DOMContentLoaded 事件執行。在現實當中,延遲腳本并不一定會按照順序執行,也不一定會在 DOMContentLoaded 事件觸發前執行,因此最好只包含一個延遲腳本。
"在現實當中,延遲腳本并不一定會按照順序執行,也不一定會在 DOMContentLoaded 事件觸發前執行,因此最好只包含一個延遲腳本。" 這段話是《JavaScript 高級程序設計(第三版)》中的一句話,糾結了很久。自己也嘗試寫了一些例子,但反饋的結果都是:如果引入的 標簽 都使用了 defer 屬性,他們的執行順序都是按照他們引入的順序來的。那么作者為什么會寫上這一句話呢,個人感覺原因是:即使在 HTML5 規范中有這么一條,不一定所有的瀏覽器廠商都會遵照這個規定,可能某些瀏覽器廠商并沒有實現這個規范,但支持 defer 屬性,那么就會出現作者所描述的那種情況,所以為了安全起見,在開發中使用一個 defer 是非常有必要的。
還有一點需要注意的是,defer 屬性只適用于外部腳本文件。
從圖中可以看出,某些瀏覽器或者在一些低版本的瀏覽器中并不支持defer屬性,因此,把延遲腳本放在頁面底部仍然是最佳選擇。
異步加載說完了延遲加載,然后我們再說下異步加載,即使用 async屬性。
HTML5 為
在以上代碼中,可能由于 01.js 下載時間比較長,由于兩個
可以看出 IE9 及以下版本都不支持 async屬性,因此,把延遲腳本放在頁面底部仍然是最佳選擇。
標簽加載可視化下面將用一張圖來描述 標簽三種狀態下(normal,defer,async)于html加載的關系:
綠色代表html解析,淡藍色代表html解析停止,藍色代表script下載,粉紅色代表script執行。從上圖很容易的看出來只要執行script,html就會停止渲染,除此之外也可以清晰的看出他們之間的加載關系。
小結所有 標簽引進的 JavaScript 會按照他們引入的順序依次被解析,在沒有使用 defer 或者 async 的情況下,只有在解析完前面 元素中的代碼之后,才會開始解析后面 元素中的代碼。
由于瀏覽器會先解析完不使用 defer 屬性的 元素中的代碼,然后再解析后面的內容,所以一般應該把 元素放在頁面最后,即主要內容后面, 標簽前面。
使用 defer 屬性可以讓腳本在文檔完全呈現之后再執行,延遲腳本總是按照指定它們的順序執行。
使用 async 屬性可以表示當前腳本不必等待其他腳本,也不必阻塞文檔呈現。不能保證異步腳本按照它們在頁面中出現的順序執行。
結束語這篇文章是最近讀了 《JavaScript 高級程序設計(第三版)》后寫的。現在仔細閱讀這本書你會發現其中真的有很多的樂趣,這些樂趣來自于你可以更深一步的去了解 JavaScript,源自于你原來可以將這個知識點弄得這么的透徹,源自于你也許真的對這么語言有了興趣。其實我在github上創建了一個倉庫,用戶記錄自己在讀了這本書中一些知識點以后的一些理解,算是閱讀筆記吧,也算是鼓勵自己堅持認真的把這本書看完,抵抗一下天生的惰性,如果你也想進一步深刻的了解 JavaScript這門語言,可以點擊這里,大家一起在github學習。最后,如果這篇文章有寫的不對的地方還望各位大佬指出。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/93276.html
摘要:指定了屬性的元素標簽內不應該再有嵌入的腳本。該屬性定義元素包含或引用的腳本語言。為時缺省為方式。該屬性指示瀏覽器是否在允許的情況下異步執行該腳本。這個屬性被設定用來通知瀏覽器該腳本將在文檔完成解析后,觸發事件前執行。 html元素及其屬性,相信大家都很熟悉,但是script的屬性,未必熟悉,故而整理總結,以待查閱。 前言 默認情況下,瀏覽器是同步加載 JavaScript 腳本,即渲染...
摘要:指定了屬性的元素標簽內不應該再有嵌入的腳本。該屬性定義元素包含或引用的腳本語言。為時缺省為方式。該屬性指示瀏覽器是否在允許的情況下異步執行該腳本。這個屬性被設定用來通知瀏覽器該腳本將在文檔完成解析后,觸發事件前執行。 html元素及其屬性,相信大家都很熟悉,但是script的屬性,未必熟悉,故而整理總結,以待查閱。 前言 默認情況下,瀏覽器是同步加載 JavaScript 腳本,即渲染...
摘要:阻塞原理瀏覽器內核可以分成兩部分渲染引擎或者和引擎。等引擎運行完畢,瀏覽器又會把控制權還給渲染引擎,繼續和的構建。執行時,解析暫停。從加載完成立即執行來看,模式執行順序與寫的順序無關,不保證執行順序。 js阻塞原理 瀏覽器內核可以分成兩部分:渲染引擎(Layout Engine 或者 Rendering Engine)和 JS 引擎。早期渲染引擎和 JS 引擎并沒有十分明確的區分,但隨...
摘要:徹底搞懂通過瀏覽器的開發者工具可以直觀的看到,圖中藍色的線和藍色的字使用不同的表現形式表示這個事件觸發的時間。當腳本下載完后立即執行,執行順序不確定。 徹底搞懂 defer & async DOMContentLoaded showImg(https://segmentfault.com/img/remote/1460000013480394?w=1309&h=879); 通過 chr...
閱讀 632·2021-11-22 15:32
閱讀 2720·2021-11-19 09:40
閱讀 2313·2021-11-17 09:33
閱讀 1263·2021-11-15 11:36
閱讀 1864·2021-10-11 10:59
閱讀 1475·2019-08-29 16:41
閱讀 1780·2019-08-29 13:45
閱讀 2150·2019-08-26 13:36