瀏覽器環(huán)境
五大主流瀏覽器內(nèi)核
1.火狐Firefox： Gecko 引擎
2.蘋(píng)果Safari： WebKit 引擎
3.谷歌Chrome： Blink 引擎
4.IE瀏覽器: Trident 引擎
5.歐朋Opera： presto引擎
瀏覽器內(nèi)核主要分成兩部分：
渲染引擎(layoutengineerRenderingEngine)和JS引擎肯适。
渲染引擎：負(fù)責(zé)取得網(wǎng)頁(yè)的內(nèi)容（HTML擂红、XML借笙、圖像等等）郭变、整理訊息（例如加入CSS等）般码，以及計(jì)算網(wǎng)頁(yè)的顯示方式，然后會(huì)輸出至顯示器或打印機(jī)小作。瀏覽器的內(nèi)核的不同對(duì)于網(wǎng)頁(yè)的語(yǔ)法解釋會(huì)有不同具则，所以渲染的效果也不相同。所有網(wǎng)頁(yè)瀏覽器啦撮、電子郵件客戶端以及其它需要編輯谭网、顯示網(wǎng)絡(luò)內(nèi)容的應(yīng)用程序都需要內(nèi)核。
簡(jiǎn)單說(shuō)就是把html和css音頻視頻等,轉(zhuǎn)化成UI可以看到的東西
JS引擎則：解析和執(zhí)行javascript來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)的動(dòng)態(tài)效果赃春。
最開(kāi)始渲染引擎和JS引擎并沒(méi)有區(qū)分的很明確愉择，后來(lái)JS引擎越來(lái)越獨(dú)立，內(nèi)核就傾向于只指渲染引擎
瀏覽器渲染的工作原理
1.瀏覽器一邊下載 HTML 網(wǎng)頁(yè)，一邊開(kāi)始解析锥涕。也就是說(shuō)要拂，不等到下載完，就開(kāi)始解析站楚。
2.解析過(guò)程中脱惰，瀏覽器發(fā)現(xiàn)<script>元素，就暫停解析窿春，把網(wǎng)頁(yè)渲染的控制權(quán)轉(zhuǎn)交給 JavaScript 引擎拉一。
3.如果<script>元素引用了外部腳本，就下載該腳本再執(zhí)行
4.JavaScript 引擎執(zhí)行完畢旧乞，控制權(quán)交還渲染引擎蔚润，恢復(fù)往下解析 HTML 網(wǎng)頁(yè)。
如果外部腳本加載時(shí)間過(guò)長(zhǎng)(一直無(wú)法完成加載),那么瀏覽器就會(huì)一直
等待腳本下載完成,造成網(wǎng)頁(yè)長(zhǎng)時(shí)間失去響應(yīng),瀏覽器就會(huì)呈現(xiàn)"假死"
狀態(tài),這被稱為"阻塞效應(yīng)"
為了避免“阻塞效應(yīng)”尺栖，我們要把js放在最后嫡纠。
為了解決腳本文件下載阻塞網(wǎng)頁(yè)渲染的問(wèn)題，一個(gè)方法是對(duì)<script>元素加入defer屬性延赌。它的作用是延遲腳本的執(zhí)行除盏，等到 DOM 加載生成后，再執(zhí)行腳本
添加defer屬性渲染順序
1.瀏覽器開(kāi)始解析 HTML 網(wǎng)頁(yè)挫以。
2.解析過(guò)程中者蠕，發(fā)現(xiàn)帶有defer屬性的<script>元素。
3.瀏覽器繼續(xù)往下解析 HTML 網(wǎng)頁(yè)掐松，同時(shí)并行下載<script>元素加載的外部腳本踱侣。
4.瀏覽器完成解析 HTML 網(wǎng)頁(yè)，此時(shí)再回過(guò)頭執(zhí)行已經(jīng)下載完成的腳本大磺。
添加async屬性渲染順序
1.瀏覽器開(kāi)始解析 HTML 網(wǎng)頁(yè)抡句。
2.解析過(guò)程中，發(fā)現(xiàn)帶有async屬性的script標(biāo)簽杠愧。
3.瀏覽器繼續(xù)往下解析 HTML 網(wǎng)頁(yè)待榔，同時(shí)并行下載<script>標(biāo)簽中的外部腳本。
4.腳本下載完成殴蹄，瀏覽器暫停解析 HTML 網(wǎng)頁(yè)究抓，開(kāi)始執(zhí)行下載的腳本。
5.腳本執(zhí)行完畢袭灯，瀏覽器恢復(fù)解析 HTML 網(wǎng)頁(yè)刺下。
我們無(wú)法控制js的加載順序，哪個(gè)先加載完成哪個(gè)先運(yùn)行
何時(shí)使用async和defer
如果加載的兩個(gè)外部文件沒(méi)有依賴關(guān)系稽荧，就可以用async橘茉，有依賴關(guān)系工腋，就要用defer屬性。
如果兩個(gè)都寫(xiě)畅卓，就執(zhí)行async
