澳门六合免费心水资料大全2020

  

  • 
    聯系我們

    台灣依致美實業有限公司

    辦事熱線

    營業征詢:400-899-

    技術辦事:400-899-

    征詢熱線

    公司前台:-588

    售前征詢:-558

    公司地址

    台灣市噴鼻洲區興華路212號動力大廈二樓

    社會消息
    以後地位 > 首頁 > 社會消息

    一文讀懂:GPU加快是甚麽?

    種別:社會消息宣布人:依致美宣布時光:2017-04-17

    盡人皆知,網頁不只應當被疾速加載,同時還應當流利運轉,好比疾速呼應的交互,如絲般順滑的動畫……

    一. GPU加快能做甚麽?

    起首我們要懂得甚麽是16ms優化

    大多半設備的刷新頻率是60次/秒,(/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。讓動畫後果加倍流利。

    優化

    123456789@keyframes 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
    澳门六合免费心水资料大全2020