一、瀏覽器渲染流程
1延刘、使用html解析器將html頁面轉(zhuǎn)化成瀏覽器能夠理解的dom樹 （ParseHTML）
2、將css解析成瀏覽器能夠理解的css樹（通過link標(biāo)簽引入的css才會(huì)走這一步，如果css是寫到html里的話在第一步就解析了）
3奇钞、樣式計(jì)算（Relcalculate Style）
4、dom樹和css樹生成布局樹（Layout）
5漂坏、根據(jù)布局樹生成圖層樹 —— 重排. (pre-paint)? ??（Update Layer Tree）.?
6景埃、繪制（背景顏色、邊框等）（按照?qǐng)D層去一個(gè)個(gè)繪制）?—— 重繪（paint）
7顶别、組合圖層?—— 合成（Composite Layers）
圖層樹的幾種情況：
????1谷徙、css3D
????2、position:fixed
????3驯绎、video
????4完慧、canvas
????5、css3動(dòng)畫加載的時(shí)候作為一個(gè)單獨(dú)的圖層
二剩失、瀏覽器每次接收的數(shù)據(jù)大小
瀏覽器每次可以接收64kb的數(shù)據(jù)屈尼，例如一個(gè)圖片是120kb大小，那么瀏覽器將分成2次才能接收完數(shù)據(jù)
三拴孤、html文件解析分析
1脾歧、css解析的時(shí)候，瀏覽器會(huì)開一個(gè)線程去解析html演熟，去開一個(gè)線程去解析css鞭执，這樣會(huì)阻塞瀏覽器的渲染，但是不會(huì)阻塞dom的解析芒粹。
2蚕冬、js解析的時(shí)候，會(huì)阻塞瀏覽器的渲染是辕，會(huì)阻塞dom的解析囤热，會(huì)阻塞js的執(zhí)行
四、重排（Reflow）和重繪（Repaint）
重排和重繪都是以圖層為單位去操作获三，所以如果是一些變化的元素旁蔼，最好將它單獨(dú)作為一個(gè)圖層隔離起來進(jìn)行操作
1锨苏、重排：計(jì)算元素在窗口的幾何位置
2、重繪：計(jì)算元素在窗口具體的呈現(xiàn)
五棺聊、具體性能優(yōu)化方案
1伞租、元素位置移動(dòng)盡量使用transform代替top、left
????1.1限佩、直接使用transform會(huì)觸發(fā)重排和重繪
????1.2葵诈、結(jié)合position:relative使用時(shí)只觸發(fā)重繪
????1.3、作為單獨(dú)圖層時(shí)祟同，不觸發(fā)重排和重繪（會(huì)交給GPU進(jìn)程去處理）
2作喘、使用opacity代替visibility
????2.1、使用visibility會(huì)觸發(fā)重繪
????2.2晕城、使用opacity既觸發(fā)重排泞坦，也觸發(fā)重繪?
????2.3、配合圖層使用砖顷，opacity不觸發(fā)重排和重繪
3贰锁、多次改變樣式的操作合并成一次
4、利用文檔碎片（documentFragment）
5滤蝠、不要把某些dom節(jié)點(diǎn)的屬性值放到循環(huán)里當(dāng)成循環(huán)的變量
查詢屬性值的時(shí)候會(huì)觸發(fā)重排豌熄、重繪！物咳！
6锣险、為動(dòng)畫元素新建圖層
