圖像顯示原理
- 顯示屏有刷新率參數(shù)。表示每秒鐘可更新多少個圖片到顯示器上。圖片來自于顯卡的前緩沖區(qū)。刷新率有60HZ時硅瞧，每秒鐘可更新60個圖片到顯示器上。
- 顯卡合成實時的圖片并緩存到顯卡的后緩沖區(qū)中恕汇。后緩沖區(qū)中有新圖片時腕唧，前緩沖區(qū)和后緩沖區(qū)交換，保證顯示最新的畫面瘾英。
- 顯卡的圖片處理能力低時枣接，圖片更新頻率小于屏幕刷新率，視覺上可感受到卡頓缺谴。
- 將渲染流水線生成的每一幅圖片稱為一幀但惶，渲染流水線每秒更新了多少幀稱為幀率。
渲染流水線
構(gòu)建DOM樹、生成stylesheet膀曾、計算節(jié)點樣式县爬、生成布局樹并保存坐標(biāo)信息、分層添谊、圖層繪制财喳、柵格化操作、顯示斩狱。
生成一幀圖像的方式
重排耳高、重繪、合成。依據(jù)之前知識，性能排序：合成 > 重繪 > 重排耳贬。
合成
- 合成不需經(jīng)過布局、重繪階段碌燕，且由獨立的合成線程操作，不阻塞主線程瓣蛀，性能較優(yōu)陆蟆。
- 合成的實現(xiàn)基于之前的分層、分塊惋增。
- 基于分層，當(dāng)有CSS動畫改鲫、及透明度變化時诈皿，只需顯卡對圖層與圖層進行操作。而JS動畫像棘，需完整執(zhí)行渲染流水線稽亏，性能更低。
- 基于分塊缕题，優(yōu)先生成視口內(nèi)的位圖截歉，更快的顯示頁面。且chorme有額外的策略烟零，在首次生成位圖時先生成半分辨率的圖像呈現(xiàn)出來瘪松，標(biāo)準(zhǔn)分辨率圖像生成后再替換上去，減小白屏?xí)r間锨阿。
利用分層進行優(yōu)化
- 有頻繁進行形狀變換宵睦、透明度變換或縮放的元素時，提前告知渲染引擎為它創(chuàng)建獨立的圖層墅诡。
- 在變換時壳嚎，渲染引擎直接通過合成線程處理變換，不涉及主線程，提高渲染效率烟馅。
- 設(shè)置元素的
will-change樣式屬性即可
.itme{
will-change: transform, opacity;
}
- 這種方式會創(chuàng)建新的圖層说庭，使用不慎會創(chuàng)建過多圖層，會占用額外內(nèi)存郑趁。
