在之前一直看到【渲染】這個詞腾么，但是始終沒搞懂是怎么回事，這兩天在網上找了一些大神的資料，稍微明白了一些些射富。在這邊只說淺層的意思膝迎，不做深入的研究，我也怕把自己繞進去搞得暈乎乎的胰耗，這篇也只適合剛入門的小小白看限次，大神請繞道勿噴謝謝啦~~
下面和大家分享一個講得比較好理解的例子。
我們知道瀏覽器內部有一個渲染引擎（也叫瀏覽器內核）柴灯，不同的瀏覽器引擎是不同的卖漫，一般情況下，渲染引擎可以顯示HTML文檔和圖片赠群，也可以借助插件顯示其他類型的數據羊始，幾大主流的瀏覽器的渲染引擎分別為：Chrome&Safari——webkit，F(xiàn)irefox——Gecko查描，IE——Trident突委。
為什么要說到渲染引擎呢，因為渲染引擎決定了瀏覽器如何顯示網頁的內容以及頁面的格式信息冬三，不同的瀏覽器內核對網頁編寫語法的解釋也有不同匀油，因此顯示的效果也會不同，這也就是為什么我們在寫代碼的時候需要兼容各種瀏覽器的原因勾笆。好啦扯太多這不是今天的重點敌蚜。
簡單地說，頁面渲染就是瀏覽器將html代碼根據CSS定義的規(guī)則顯示在瀏覽器窗口中的這個過程窝爪。
下面是大神對瀏覽器加載內容模擬的一個情景弛车，我就是看了下面的這個描述才明白了HTML、CSS和JS是怎么一個加載過程蒲每。
這邊附上原文地址：http://www.cnblogs.com/ada-zheng/p/4308581.html
1.用戶輸入網址（假設是個html頁面帅韧，并且是第一次訪問），瀏覽器向服務器發(fā)出請求啃勉，服務器返回html文件忽舟；
2. 瀏覽器開始載入html代碼，發(fā)現(xiàn)標簽內有一個標簽<link>引用外部CSS文件淮阐；
3. 瀏覽器又發(fā)出CSS文件的請求叮阅，服務器返回這個CSS文件；
4. 瀏覽器繼續(xù)載入html中<body>部分的代碼泣特，并且CSS文件已經拿到手了浩姥，可以開始渲染頁面了；
5.瀏覽器在代碼中發(fā)現(xiàn)一個<img>標簽引用了一張圖片状您，向服務器發(fā)出請求勒叠。此時瀏覽器不會等到圖片下載完兜挨，而是繼續(xù)渲染后面的代碼；
6.服務器返回圖片文件眯分，由于圖片占用了一定面積拌汇，影響了后面段落的排布，因此瀏覽器需要回過頭來重新渲染這部分代碼弊决；
7. 瀏覽器發(fā)現(xiàn)了一個包含一行Javascript代碼的<script>標簽噪舀，趕快運行它；
8. Javascript腳本執(zhí)行了這條語句飘诗，它命令瀏覽器隱藏掉代碼中的某個（style.display=”none”）与倡。杯具啊，突然就少了這么一個元素昆稿，瀏覽器不得不重新渲染這部分代碼纺座；
9. 終于等到了</html>的到來，瀏覽器淚流滿面……
10. 等等溉潭，還沒完比驻，用戶點了一下界面中的“換膚”按鈕，Javascript讓瀏覽器換了一下<link>標簽的CSS路徑岛抄；
11. 瀏覽器召集了在座各位<span><ul><li>們别惦，“大伙兒收拾收拾行李，咱得重新來過…”夫椭，瀏覽器向服務器請求了新的CSS文件掸掸，重新渲染頁面。
模擬情景結束啦~~~~
瀏覽器每天就這么來來回回跑著蹭秋，要知道不同的人寫出來的html和css代碼質量參差不齊扰付，說不定哪天跑著跑著就掛掉了。
reflow（回退）
我們說頁面打開為什么會慢仁讨？那是因為瀏覽器要花時間羽莺、花精力去渲染，尤其是當它發(fā)現(xiàn)某個部分發(fā)生了點變化影響了布局洞豁，需要倒回去重新渲染盐固，而這個回退的過程就稱為reflow。
reflow幾乎是無法避免的≌尚現(xiàn)在界面上流行的一些效果刁卜，比如樹狀目錄的折疊、展開（實質上是元素的顯示與隱藏）等曙咽，都將引起瀏覽器的 reflow蛔趴。鼠標滑過、點擊……只要這些行為引起了頁面上某些元素的占位面積例朱、定位方式孝情、邊距等屬性的變化鱼蝉，都會引起它內部、周圍甚至整個頁面的重新渲染箫荡。通常我們都無法預估瀏覽器到底會reflow哪一部分的代碼魁亦，它們都彼此相互影響著。
reflow問題的優(yōu)化菲茬。我們可以盡量減少不必要的reflow。比如開頭例子中的<img>圖片載入問題派撕，我們只要給定圖片的寬和高就可以了婉弹。這樣瀏覽器就知道了圖片的占位面積，在載入圖片前就預留好了位置终吼。
repaint（重繪）
如果只改變了某個元素的背景色镀赌、文字顏色、邊框顏色等不影響它周圍或內部布局的屬性际跪，就只會引起repaint商佛，而不會reflow。
repaint的速度快于 reflow（注意：在IE下姆打，reflow要比repaint 慢）
IE原來你是如此難伺候的銀良姆。。幔戏。hhh
