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

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

一. 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加快隱蔽的坑–隱式分解