作為前端開發(fā)人員入录，我們在寫頁面的時(shí)候經(jīng)常見到一些標(biāo)簽洽胶，但不一定知道它有什么作用晒夹，或者只知道一些標(biāo)簽的某部分功能。今天就介紹兩個(gè)比較常見的標(biāo)簽姊氓，一個(gè)是DOCTYPE丐怯，一個(gè)是<script>。
- DOCTYPE標(biāo)簽
<!DOCTYPE>是表示文檔類型的標(biāo)簽翔横，它的作用是告訴瀏覽器應(yīng)以什么類型的文檔來解析文檔读跷。不同的文檔類型會(huì)影響瀏覽器對CSS，甚至是Javascript的解析禾唁。
在使用DOCTYPE是應(yīng)確保讓其置于HTML的頂端效览，如果有任何字符在它前面，會(huì)導(dǎo)致IE9或更早期的瀏覽器觸發(fā)怪異模式荡短。
有兩種類型：
1）標(biāo)準(zhǔn)類型丐枉。瀏覽器以W3C標(biāo)準(zhǔn)來解析文檔，瀏覽器會(huì)以最高標(biāo)準(zhǔn)來解析文檔
2）怪異類型掘托。在解析文檔時(shí)瘦锹，瀏覽器會(huì)采用向后兼容的方式來解析。
- script標(biāo)簽
在寫JS代碼時(shí)，肯定是會(huì)用到這個(gè)標(biāo)簽的沼本，但我們通常用的是不帶任何屬性的script標(biāo)簽噩峦。其實(shí)，它還有兩個(gè)屬性抽兆，分別是defer和async识补。不同的屬性，瀏覽器會(huì)采用的不同的方式來加載和執(zhí)行JS腳本辫红。
1）不帶任何屬性
script標(biāo)簽不帶任何屬性時(shí)凭涂，當(dāng)瀏覽器識(shí)別到它時(shí)會(huì)暫停文檔的解析，開始加載script指向的JS代碼贴妻，當(dāng)加載完畢后切油，接著開始執(zhí)行，當(dāng)執(zhí)行完畢后才會(huì)接著解析剩下的文檔名惩。
2）帶defer屬性
當(dāng)script標(biāo)簽帶有defer屬性時(shí)澎胡，即<script defer>，JS代碼的加載是異步的娩鹉。就是說攻谁，JS代碼的加載不影響DOM文檔的解析，當(dāng)文檔解析完畢后弯予，才會(huì)執(zhí)行JS代碼戚宦。
3）帶async屬性
JS代碼的加載也是異步的，與defer不同的是锈嫩，在加載完JS代碼后立即執(zhí)行受楼，執(zhí)行結(jié)束會(huì)再繼續(xù)解析文檔。
下面這張圖可以直觀地看出三者之前的區(qū)別呼寸。圖中艳汽，青色部分是文檔的解析，藍(lán)色部分是JS腳本的加載对雪，紅色部分是JS腳本的執(zhí)行河狐。
