HTML頁面加載和解析流程
（1）. 用戶輸入網(wǎng)址（假設(shè)是個html頁面，并且是第一次訪問），瀏覽器向服務(wù)器發(fā)出請求，服務(wù)器返回html文件；
（2）. 瀏覽器開始載入html代碼，發(fā)現(xiàn)＜head＞標(biāo)簽內(nèi)有一個＜link＞標(biāo)簽引用外部CSS文件；
（3）. 瀏覽器又發(fā)出CSS文件的請求，服務(wù)器返回這個CSS文件；
（4）. 瀏覽器繼續(xù)載入html中＜body＞部分的代碼，并且CSS文件已經(jīng)拿到手了，可以開始渲染頁面了；
（5）. 瀏覽器在代碼中發(fā)現(xiàn)一個＜img＞標(biāo)簽引用了一張圖片，向服務(wù)器發(fā)出請求。此時瀏覽器不會等到圖片下載完，而是繼續(xù)渲染后面的代碼；
（6）. 服務(wù)器返回圖片文件，由于圖片占用了一定面積，影響了后面段落的排布，因此瀏覽器需要回過頭來重新渲染這部分代碼；
（7）. 瀏覽器發(fā)現(xiàn)了一個包含一行Javascript代碼的＜script＞標(biāo)簽，趕快運行它；
（8）. Javascript腳本執(zhí)行了這條語句，它命令瀏覽器隱藏掉代碼中的某個＜div＞ （style.display=”none”）。突然少了這么一個元素，瀏覽器不得不重新渲染這部分
代碼；
（9）. 終于等到了＜/html＞的到來，瀏覽器淚流滿面……
（10）. 等等，還沒完，用戶點了一下界面中的“換膚”按鈕，Javascript讓瀏覽器換了一下＜link＞標(biāo)簽的CSS路徑；
（11）. 瀏覽器召集了在座的各位＜div＞＜span＞＜ul＞＜li＞們，“大伙兒收拾收拾行李，咱得重新來過……”，瀏覽器向服務(wù)器請求了新的CSS文件，重新渲染頁面。

上述這個過程是逐步完成的，為了更好的用戶體驗，渲染引擎將會盡可能早的將內(nèi)容呈現(xiàn)到屏幕上，并不會等到所有的html都解析完成之后再去構(gòu)建和布局render樹。
它是解析完一部分內(nèi)容就顯示一部分內(nèi)容，同時，可能還在通過網(wǎng)絡(luò)下載其余內(nèi)容。

javascript的加載和執(zhí)行的特點：
（1）載入后馬上執(zhí)行；
（2）執(zhí)行時會阻塞頁面后續(xù)的內(nèi)容（包括頁面的渲染、其它資源的下載）。原因：因為瀏覽器需要一個穩(wěn)定的DOM樹結(jié)構(gòu)，而JS中很有可能有 代碼直接改變了DOM樹結(jié)構(gòu)，
比如使用 document.write 或 appendChild,甚至是直接使用的location.href進(jìn)行跳轉(zhuǎn)，瀏覽器為了防止出現(xiàn)JS修 改DOM樹，需要重新構(gòu)建DOM樹的情況，
所以 就會阻塞其他的下載和呈現(xiàn)。

（1）Reflow（回流）：瀏覽器要花時間去渲染，當(dāng)它發(fā)現(xiàn)了某個部分發(fā)生了變化影響了布局，那就需要倒回去重新渲染。
（2）Repaint（重繪）：如果只是改變了某個元素的背景顏色，文字顏色等，不影響元素周圍或內(nèi)部布局的屬性，將只會引起瀏覽器的repaint，重畫某一部分。
Reflow要比Repaint更花費時間