參考原文 豆豆蛙：關(guān)于js css html加載順序整理

1.js放在head中會(huì)立即執(zhí)行，阻塞后續(xù)的資源下載與執(zhí)行。因?yàn)閖s有可能會(huì)修改dom，如果不阻塞后續(xù)的資源下載，dom的操作順序不可控。
正常的網(wǎng)頁加載流程是這樣的。
瀏覽器一邊下載HTML網(wǎng)頁，一邊開始解析
解析過程中，發(fā)現(xiàn)<script>標(biāo)簽
暫停解析，網(wǎng)頁渲染的控制權(quán)轉(zhuǎn)交給JavaScript引擎
如果<script>標(biāo)簽引用了外部腳本，就下載該腳本，否則就直接執(zhí)行
執(zhí)行完畢，控制權(quán)交還渲染引擎，恢復(fù)往下解析HTML網(wǎng)頁
　　如果外部腳本加載時(shí)間很長（比如一直無法完成下載），就會(huì)造成網(wǎng)頁長時(shí)間失去響應(yīng)，瀏覽器就會(huì)呈現(xiàn)“假死”狀態(tài)，這被稱為“阻塞效應(yīng)”。
html需要等head中所有的js和css加載完成后才會(huì)開始繪制，
但是html不需要等待放在body最后的js下載執(zhí)行就會(huì)開始繪制,因此將js放在body的最后面，可以避免資源阻塞，同時(shí)使靜態(tài)的html頁面迅速顯示。
將腳本文件都放在網(wǎng)頁尾部加載，還有一個(gè)好處。在DOM結(jié)構(gòu)生成之前就調(diào)用DOM，JavaScript會(huì)報(bào)錯(cuò)，如果腳本都在網(wǎng)頁尾部加載，就不存在這個(gè)問題，因?yàn)檫@時(shí)DOM肯定已經(jīng)生成了。

2.js的執(zhí)行依賴前面的樣式。即只有前面的樣式全部下載完成后才會(huì)執(zhí)行js，但是此時(shí)外鏈css和外鏈js是并行下載的。
　css需要分塊，首頁的css獨(dú)立，其余的css需要?jiǎng)討B(tài)加載，因?yàn)閔tml的繪制會(huì)被css阻塞，這樣可以減少首次進(jìn)入時(shí)的白屏?xí)r間。

3.外鏈的js如果含有defer="true"屬性，將會(huì)并行加載js，到頁面全部加載完成后才會(huì)執(zhí)行，會(huì)按順序執(zhí)行。
　defer屬性的作用是，告訴瀏覽器，等到DOM加載完成后，再執(zhí)行指定腳本。
瀏覽器開始解析HTML網(wǎng)頁
解析過程中，發(fā)現(xiàn)帶有defer屬性的script標(biāo)簽
瀏覽器繼續(xù)往下解析HTML網(wǎng)頁，同時(shí)并行下載script標(biāo)簽中的外部腳本
瀏覽器完成解析HTML網(wǎng)頁，此時(shí)再執(zhí)行下載的腳本
　　對于內(nèi)置而不是連接外部腳本的script標(biāo)簽，以及動(dòng)態(tài)生成的script標(biāo)簽，defer屬性不起作用。

4.外鏈的js如果含有async="true"屬性，將不會(huì)依賴于任何js和css的執(zhí)行，此js下載完成后立刻執(zhí)行，不保證按照書寫的順序執(zhí)行。因?yàn)閍sync="true"屬性會(huì)告訴瀏覽器，js不會(huì)修改dom和樣式，故不必依賴其它的js和css。　
　async屬性的作用是，使用另一個(gè)進(jìn)程下載腳本，下載時(shí)不會(huì)阻塞渲染。
瀏覽器開始解析HTML網(wǎng)頁
解析過程中，發(fā)現(xiàn)帶有async屬性的script標(biāo)簽
瀏覽器繼續(xù)往下解析HTML網(wǎng)頁，同時(shí)并行下載script標(biāo)簽中的外部腳本
腳本下載完成，瀏覽器暫停解析HTML網(wǎng)頁，開始執(zhí)行下載的腳本
腳本執(zhí)行完畢，瀏覽器恢復(fù)解析HTML網(wǎng)頁
　　async屬性可以保證腳本下載的同時(shí)，瀏覽器繼續(xù)渲染。需要注意的是，一旦采用這個(gè)屬性，就無法保證腳本的執(zhí)行順序。哪個(gè)腳本先下載結(jié)束，就先執(zhí)行那個(gè)腳本。另外，使用async屬性的腳本文件中，不應(yīng)該使用document.write方法。

　　一般來說，如果腳本之間沒有依賴關(guān)系，就使用async屬性，如果腳本之間有依賴關(guān)系，就使用defer屬性。如果同時(shí)使用async和defer屬性，后者不起作用，瀏覽器行為由async屬性決定。

轉(zhuǎn)載于:https://www.cnblogs.com/lexiaofei/p/8078689.html

總結(jié)

以上是生活随笔為你收集整理的关于js css html加载顺序整理的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。