效能優化 合成層

2022-02-03 19:03:20 字數 787 閱讀 3798

1. 提公升移動或漸變元素的繪製層

繪製並非總是在記憶體中的單層畫面裡完成的。實際上,瀏覽器在必要時將會把一幀畫面繪製成多層畫面,

然後將這若干層畫面合併成一張顯示到螢幕上。通過渲染層提公升可以減小繪製區域,我們可以用除錯工具檢視到繪製層:

在頁面中新建乙個渲染層最好的方式就是使用 will-change 屬性,同時再與 transform 屬性一起使用,就會建立乙個新的組合層:

.element

對於那些目前還不支援 will-change 屬性、但支援建立渲染層的瀏覽器,可以使用乙個 3d transform

屬性來強制瀏覽器建立乙個新的渲染層:

.element

標籤 ,可以建立合成層。

注意: 別盲目建立渲染層,一定要分析其實際效能表現。因為建立渲染層是有代價的,每建立乙個新的渲染層,

就意味著新的記憶體分配和更複雜的層的管理。並且在移動端 gpu 和 cpu 的頻寬有限制,

建立的渲染層過多時,合成也會消耗跟多的時間。

2. 元素提公升為合成層後,transform 和 opacity 才不會觸發 paint,如果不是合成層,則其依然會觸發 paint

在 blink 和 webkit 核心的瀏覽器中,對於應用了 transition 或者 animation的 opacity 元素,瀏覽器會將渲染層提公升為合成層。

也可以使用 translatez(0) 或者 translate3d(0,0,0) 來人為地強制性地建立乙個合成層。

前端效能優化 合併請求

測試環境,express 搭建的web伺服器 chrome瀏覽器監聽頁面載入速度 頁面 doctype html html head title title title link rel stylesheet href stylesheets style.css head body h1 title...

spark程式效能優化 合併檔案

背景 把總量3t的檔案和40g的檔案合併按key合併,把3t中40g有的記錄換成40g的,40g中3t沒有的加上。原先是按其中乙個資料域經過hash,把資料分成3個part進行處理,大概每個半小時,3個任務1.5小時處理完 之前3t的資料總量大約1.2t 但隨著資料增加,每個部分資料變為了1t,並且...

Service層的效能優化

很多學j2ee方向的同學都接觸過s2sh,即傳統的三大框架,學習這三個經典技術的重點就是挖原理和細節,慢慢地我們就能形成一套思想,以幫助理解其他新框架和新技術。學習技術本身並不難,設計技術方案才是難點,為什麼要這麼設計,這樣設計的哲學依據又在哪?不難發現 struts2中控制層的action是多例的...