為什么要了解瀏覽器的加載悬槽、解析怀吻、渲染這幾個(gè)過(guò)程
- 了解瀏覽器如何進(jìn)行加載，我們可以在引用外部樣式文件陷谱，外部js文件時(shí)烙博，將他們放到合適的位置瑟蜈，使瀏覽器以最快的速度將文件加載完畢。
- 了解瀏覽器如何進(jìn)行解析渣窜，我們可以在構(gòu)建DOM結(jié)構(gòu)铺根，組織css選擇器時(shí)，選擇最優(yōu)的寫(xiě)法乔宿，提高瀏覽器的解析速率位迂。
- 了解瀏覽人如何進(jìn)行渲染，我們可以在設(shè)置元素屬性详瑞，編寫(xiě)js文件時(shí)掂林，可以減少"重排""重繪"的消耗。
這三個(gè)過(guò)程在事件進(jìn)行的時(shí)候不是完全獨(dú)立坝橡，會(huì)有交叉泻帮。會(huì)一邊加載，一遍解析计寇，一遍渲染的工作想象锣杂。
瀏覽器是如何進(jìn)行加載、解析番宁、渲染的呢元莫？
- 用戶訪問(wèn)網(wǎng)頁(yè)，DNS服務(wù)器會(huì)根據(jù)用戶提供的域名查找對(duì)應(yīng)的IP地址蝶押，找到后踱蠢，系統(tǒng)會(huì)向?qū)?yīng)IP地址的網(wǎng)絡(luò)服務(wù)器發(fā)送一個(gè)http請(qǐng)求。
- 網(wǎng)絡(luò)服務(wù)器解析請(qǐng)求后棋电，并發(fā)送請(qǐng)求給數(shù)據(jù)庫(kù)服務(wù)器茎截。
- 數(shù)據(jù)庫(kù)服務(wù)器將請(qǐng)求的資源返回給網(wǎng)絡(luò)服務(wù)器，網(wǎng)絡(luò)服務(wù)器解析數(shù)據(jù)离陶，并生成html文件稼虎，放入http response中衅檀，返回給瀏覽器招刨。
- 瀏覽器解析 http response。訪問(wèn)服務(wù)器可能遭遇的問(wèn)題：如果網(wǎng)絡(luò)服務(wù)器無(wú)法獲取數(shù)據(jù)庫(kù)服務(wù)器返回的資源文件（就會(huì)響應(yīng) http response 404）,或者由于并發(fā)原因暫時(shí)無(wú)法處理用戶的http請(qǐng)求（http response 500）
- 瀏覽器解析 http response后哀军，需要下載html 文件沉眶，以及html文件內(nèi)包含外部引用文件，以及文件內(nèi)涉及的圖片或者多媒體文件杉适。
加載
瀏覽器五個(gè)常駐線程：
1 瀏覽器GUI渲染線程
2 js引擎線程
3 瀏覽器定時(shí)器觸發(fā)線程
4 瀏覽器事件觸發(fā)線程
5 瀏覽器http異步請(qǐng)求線程谎倔。
當(dāng)js引擎線程（第2個(gè)）進(jìn)行時(shí)，會(huì)掛起其他一切線程猿推。由于js引擎為單線程片习，所以代碼都是先壓到隊(duì)列中捌肴，采用先進(jìn)先出的方式運(yùn)行，事件處理函數(shù)藕咏，timer函數(shù)也會(huì)壓到隊(duì)列中状知，不斷的從隊(duì)頭取出事件。
瀏覽器加載過(guò)程中遇到外部css文件孽查，瀏覽器會(huì)另外發(fā)一個(gè)請(qǐng)求饥悴，來(lái)獲取css文件。遇到圖片資源盲再，瀏覽器會(huì)發(fā)出另一個(gè)請(qǐng)求西设，來(lái)獲取圖片。但是當(dāng)文檔加載過(guò)程中遇到j(luò)s文件時(shí)答朋，html文檔會(huì)掛起渲染線程（加載解析渲染同步）贷揽，不僅要等待文檔中js文件加載完畢，還要等待解析執(zhí)行完畢梦碗，才可以恢復(fù)html文檔的渲染線程擒滑。
雖然css文件的加載不影響js文件的加載，但是卻影響js文件的執(zhí)行叉弦，即使js文件內(nèi)只有一行代碼丐一，也會(huì)造成阻塞。原因：某些js代碼淹冰，如：var width = $('#id').width()库车。這意味著，js代碼執(zhí)行前樱拴，瀏覽器必須保證css文件已下載和解析完成柠衍。這是css阻塞后續(xù)js的根本原因。
解析
- html文檔解析生成解析樹(shù)晶乔，是由dom元素及屬性節(jié)點(diǎn)組成珍坊，樹(shù)的根是document對(duì)象。
- css解析將css文件解析為樣式表對(duì)象正罢。改對(duì)象包含了css規(guī)則阵漏，該規(guī)則包含了選擇器和聲明對(duì)象。
- js解析因?yàn)槲募诩虞d的同時(shí)也進(jìn)行解析翻具。
渲染
即為構(gòu)建渲染樹(shù)的過(guò)程履怯，他是原來(lái)DOM樹(shù)可視化表示。構(gòu)建這棵樹(shù)是為了以正確的順序繪制文檔內(nèi)容裆泳。
參考文獻(xiàn)：
http://www.reibang.com/p/e141d1543143
