北京赛車pk10玩法
  • ?
    聯系我們

    廣東聯迪信息科技有限公司

    服務熱線

    網絡集成:400-899-0899

    軟件支持:400-8877-991

    咨詢熱線

    公司前臺:0756-2119588

    售前咨詢:0756-2133055

    公司地址

    珠海市香洲區興華路212號能源大廈二樓

    社會新聞
    當前位置 > 首頁 > 社會新聞

    一文讀懂:GPU加速是什么?

    類別:社會新聞發布人:聯迪發布時間:2017-04-17

    眾所周知,網頁不僅應該被快速加載,同時還應該流暢運行,比如快速響應的交互,如絲般順滑的動畫……

    一. GPU加速能做什么?

    首先我們要了解什么是16ms優化

    大多數設備的刷新頻率是60次/秒,(1000/60 = 16.6ms)也就說是瀏覽器對每一幀畫面的渲染工作要在16ms內完成,超出這個時間,頁面的渲染就會出現卡頓現象,影響用戶體驗。

    瀏覽器在一幀里面,會依次執行以下這些動作。減少或者避免layout,paint可以讓頁面不卡頓,動畫效果更加流暢。

    JavaScript:JavaScript實現動畫效果,DOM元素操作等。

    Style(計算樣式):確定每個DOM元素應該應用什么CSS規則。

    Layout(布局):計算每個DOM元素在最終屏幕上顯示的大小和位置。由于web頁面的元素布局是相對的,所以其中任意一個元素的位置發生變化,都會聯動的引起其他元素發生變化,這個過程叫reflow。

    Paint(繪制):在多個層上繪制DOM元素的的文字、顏色、圖像、邊框和陰影等。

    Composite(渲染層合并):按照合理的順序合并圖層然后顯示到屏幕上。

    利用GPU加速優先使用渲染層合并屬性,避免layout,paint。

    從上圖可以看出,可以通過改變元素的transform實現移動,伸縮變換而非改變物體的left,top,width,height避免layout,paint。讓動畫效果更加流暢。

    優化

    [email protected] demo {0% {transform: translateY(10px);}100% {transform: translateY(30px);}}

    二. GPU是什么,如何用Chrome devtools進行分析debug?瀏覽器渲染一個頁面大致是按照下面這個步驟執行。獲取DOM并將其分割為多個層(RenderLayer)

    將每個層柵格化,并獨立的繪制進位圖中

    將這些位圖作為紋理上傳至GPU

    復合多個層來生成最終的屏幕圖像(終極layer )。

    Chrome開啟查看renderlayer

    按上面的步驟之后,即可看到

    黃色邊框:有動畫3d變換的元素,表示放到了一個新的復合層(composited layer)中渲染

    藍色的柵格:這些分塊可以看作是比層更低一級的單位,這些區域就是RenderLayer

    打開一個頁面,如果該頁面的黃色邊框很多,那么肯定要查看一下原因了

    Chrome查看layer

    打開timeline進行錄制,選中timeline的某一幀,然后選擇下面的layer,可以左右拖動該模塊出現3d。

    我們可以看到一個頁面實際是像下面一樣組成的

    從上圖不難理解,雖然我們最終在瀏覽器上看到的只是一個復印版,即最終只有一個層。類似于PhotoShop軟件中的“圖層”概念,最后合并所有可視圖層,輸出一張圖片到屏幕上。但實際上一些dom會因為一些規則被提升成獨立的層(開啟GPU加速),一旦被獨立出來之后,便不會再影響其他dom的布局,因為它改變之后,只是“貼上”了頁面。

    根據這個優點,我們可以把頁面中一些布局經常變換的dom(動畫)提升到獨立的層。那么,瀏覽器在之后的16ms中,只需進行下面的幾個步驟。

    三.如何開啟GPU加速?目前下面這些因素都會引起Chrome創建合成層:

    3D或透視變換(perspective,transform) CSS屬性

    使用加速視頻解碼的video元素

    擁有3D (WebGL)上下文或加速的2D上下文的canvas元素

    混合插件(如Flash)

    對自己的opacity做CSS動畫或使用一個動畫webkit變換的元素

    擁有加速CSS過濾器的元素

    元素A有一個z-index比自己小的元素B,且元素B是一個合成層(換句話說就是該元素在復合層上面渲染),則元素A會提升為合成層

    上面6點都非常容易理解,在日常開發中,最容易出現問題的是第7點

    四. GPU加速隱藏的坑–隱式合成元素A有一個z-index比自己小的元素B,且元素B是一個合成層(換句話說就是該元素在復合層上面渲染)

    拿實際項目舉個栗子,我們按照上面的步驟開啟layer borders

    尚未給上圖右手添加高層級的z-index時,整個頁面在移動端打開后閃退。而添加了z-index之后,頁面正常顯示,不閃退了。

    仔細看上面的gif,僅僅改變了z-index,就會改變大批數量的層(黃色邊框)

    為什么z-index力量這么大?

    我們來看一個栗子,B在做動畫,理所當然把B提到單獨的合成層。減少重繪。

    按照上圖,我們遇到一個邏輯問題,元素B應該在單獨的合成層上,并且屏幕的最終圖像應該在GPU上組成。但是A元素在B元素的頂部,我們沒有指定提升A元素自身層級的東西。那么瀏覽器會做什么?它將強制為元素A創建一個新的合成圖層。

    這樣,A和B都被提升到單獨的復合層。

    因此,使用GPU加速提升動畫性能時,最好給當前動畫元素增加一個高一點的z-index屬性,人為干擾復合層的排序,可以有效減少Chrome創建不必要的復合層,提升渲染性能。

    注意:GPU不僅需要發送渲染層圖像到GPU,而且還需存儲它們,以便稍后在動畫中重用。別盲目創建渲染層,一定要分析其實際性能表現。因為創建渲染層是有代價的,每創建一個新的渲染層,就意味著新的內存分配和更復雜的層的管理。對于使用移動設備的用戶來說是很坑的。移動設備沒有臺式機那么多的內存。過多的GPU加速會引起頁面卡頓甚至閃退。

    找到layers,點擊當前層,在右邊查看占用的memory(內存)

    總結

    整篇文章介紹了下面幾個部分

    GPU加速能做什么

    GPU是什么,如何用Chrome devtools進行分析debug?

    如何開啟GPU加速?

    GPU加速隱藏的坑–隱式合成

    ?
    客服1 客服2 客服3
    北京赛車pk10玩法 海南环岛赛 河南正宗麻将 杭州麻将技巧 快乐飞艇 陕西11选5开奖结 实战打卡五星必胜绝技 成都麻将怎么打初学规则 足彩大赢家比分网 安徽十一选五开奖一 海南麻将计分规则 球深比分网即时比分007 手机比分网旧版 场外配资是否构成非法经营 秒速时时彩 广东十一选五开奖历 海南麻将 临高麻将