解析 HTML 文件，構(gòu)建 DOM 樹光督，同時瀏覽器主進(jìn)程負(fù)責(zé)下載 CSS 文件
CSS 文件下載完成，解析 CSS 文件成樹形的數(shù)據(jù)結(jié)構(gòu)，然后結(jié)合 DOM 樹合并成 RenderObject 樹
布局 RenderObject 樹 （Layout/reflow）萧吠，負(fù)責(zé) RenderObject 樹中的元素的尺寸，位置等計算
繪制 RenderObject 樹 （paint）桐筏，繪制頁面的像素信息
瀏覽器主進(jìn)程將默認(rèn)的圖層和復(fù)合圖層交給 GPU 進(jìn)程纸型，GPU 進(jìn)程再將各個圖層合成（composite），最后顯示出頁面
一梅忌、 資源合并與壓縮-http
1狰腌、html壓縮
（1）、使用在線網(wǎng)站進(jìn)行壓縮牧氮，這種方式在現(xiàn)代化的前端工程中幾乎不會再去使用
（2）琼腔、nodejs提供了html-minifier工具（構(gòu)建層面的壓縮）
（3）、后端模板引擎渲染壓縮（服務(wù)端層面的壓縮）
2踱葛、css壓縮
（1）丹莲、使用在線網(wǎng)站進(jìn)行壓縮
（2）光坝、使用html-minifier對html中的css進(jìn)行壓縮
（3）、使用clean-css對css進(jìn)行壓縮
3.Js壓縮與混亂
（1）甥材、使用在線網(wǎng)站進(jìn)行壓縮
（2）盯另、使用html-minifier對html中的js進(jìn)行壓縮
（3）、使用uglifyjs2對js進(jìn)行壓縮
4擂达、文件合并
（1）土铺、使用在線網(wǎng)站進(jìn)行文件合并
（2）、使用nodejs實(shí)現(xiàn)文件合并（基于常見的gulp或者webpack進(jìn)行配置板鬓，如在webpack中悲敷，配置好entry和output，webpack自帶的機(jī)制就會去自動根據(jù)文件之間的依賴關(guān)系進(jìn)行打包）
5俭令、把 js 腳本置底加載
js 腳本是很容易形成阻塞后德，導(dǎo)致資源加載停滯，為了避免這種情況抄腔，先加載其他資源瓢湃，最后加載腳本
6、css 放在 head 中
頁面渲染過程還要經(jīng)歷重繪重排赫蛇，這樣做是避免會出現(xiàn) DOM 加載完之后卻沒有樣式的情況绵患。
