国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

硬件加速

xiaotianyi / 2755人閱讀

摘要：但硬件加速是把雙刃劍，過渡的使用硬件加速會適得其反。所以，一定要牢記不要讓頁面的每個元素都使用硬件加速，當且僅當需要的時候才為元素創建渲染層。參考文檔無線性能優化動畫及硬件加速高性能動畫與頁面渲染渲染優化層模型

前言

談起瀏覽器的硬件加速，想必大家都知道的一個技巧就是在用CSS3做動畫時，給元素添加transform: translateZ(0)或者transform: translate3d(0, 0, 0)就會開啟GPU的硬件加速，將本來應該是瀏覽器處理的動畫效果轉交給GPU處理，從而使得動畫看起來更加順暢，在移動端體驗更好。本文將進一步探索其中的奧秘，例如哪些條件可以觸發GPU硬件加速？硬件加速背后的工作原理是什么？是不是開啟GPU硬件加速的動畫應該越多越好？
首先讓我們來看一個動畫效果，通過CSS3的animation屬性來實現讓一個小球從坐到右移動200px的距離。現在有兩種實現方式：

第一種方法通過改變該元素的top屬性來實現：

.ball1{
  width:100px;
  height:100px;
  border-radius: 100px;
  background:red;
}
.ball1{
  animation:mymove 3s infinite linear;
  -moz-animation:mymove 3s infinite linear;
  -webkit-animation:mymove 3s infinite linear;
  -o-animation:mymove 3s infinite linear;
}

@keyframes mymove{
   from {top:0px;}
   to {top:200px;}
}

第二種方法通過translate來實現：

.ball1{
   animation:translateMove 3s infinite linear;
   -moz-animation:translateMove 3s infinite linear;
   -webkit-animation:translateMove 3s infinite linear;
   -o-animation:translateMove 3s infinite linear;
}
@keyframes translateMove {
   from {transform: translate3d(0,0,0);}
   to {transform: translate3d(0,200px,0)}
}

兩種方式都能達到同樣的效果，但瀏覽器在內部渲染的過程卻大不相同。哪種實現方式更優？在回答這個問題之前，我們先來了解一下瀏覽器的渲染過程。

瀏覽器渲染過程

已知JS是單線程工作的，但是瀏覽器可以開啟多個線程，渲染一個網頁需要兩個重要的線程來共同完成：Main Thread 主線程 Compositor Thread 合成器線程

主線程做的工作： 
運行JS
計算 HTML 元素的 CSS 樣式
布局頁面
將元素繪制到一個或多個位圖中
把這些位圖交給 Compositor Thread 來處理
合成器線程做的工作： 
通過 GPU 將位圖繪制到屏幕上
通知主線程去更新頁面中可見或即將可見的部分的位圖
計算出頁面中那些部分是可見的
計算出在滾動頁面時候，頁面中哪些部分是即將可見的
滾動頁面時將相應位置的元素移動到可視區

在了解了這兩個線程各自負責的部分之后，我們再來看瀏覽器的渲染過程。大體流程如下：

???
當我們通過某種方法引起瀏覽器的reflow時，需要重新經歷style和layout階段，導致瀏覽器重新計算頁面中每個dom元素的尺寸及重新布局，伴隨著重新進行repaint，這個過程是非常耗時的。為了把代價降到最低，當然最好只留下composite這一個步驟最好。假設當我們改變一個容器的樣式時，影響的只是它自己，并且還無需重繪，直接通過在GPU中改變紋理的屬性來改變樣式，豈不是更好？

如何能使元素達到這個效果？就是讓元素擁有自己的層（layer）。有了層的概念，讓我們從層的概念再來看瀏覽器的渲染過程：

獲取 DOM 并將其分割為多個層(RenderLayer)

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

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

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

可以將這個過程理解為設計師的Photoshop文件。在ps源文件里，一個圖像是由若干個圖層相互疊加而展示出來的。分成多個圖層的好處就是每個圖層相對獨立，修改方便，對單個圖層的修改不會影響到頁面上的其他圖層。因此層（layer）存在的意義在于：用最小的代價來改變某個頁面元素。可以將某個css動畫或某個js交互效果抽離到一個多帶帶的渲染層，來達到加速渲染的目的。

那么如何才能創建一個層呢？

3d transform屬性

backface-visibility為hidden的元素

使用加速視頻解碼的

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

混合插件(如 Flash)

對 opacity、transform、fliter、backdrop-filter 應用了 animation 或者 transition（需要是 active 的 animation 或者 transition，當 animation 或者 transition 效果未開始或結束后，合成層也會失效）

will-change 設置為 opacity、transform、top、left、bottom、right（其中 top、left 等需要設置明確的定位屬性，如 relative 等）

元素有一個包含復合層的后代節點(換句話說，就是一個元素擁有一個子元素，該子元素在自己的層里)

元素有一個 z-index 較低且包含一個復合層的兄弟元素(換句話說就是該元素在復合層上面渲染)

在webkit內核的瀏覽器中，如果有上述情況，就會創建一個獨立的層(layer)。我們可以借助chrome瀏覽器開發者工具中的layers和rendering結合來查看頁面中有哪些獨立的層。

性能分析

現在回到文章開始的那個動畫效果，讓我們通過chrome的performance工具來看看具體的執行過程。（注：本次性能分析是將CPU性能將至原來的六分之一 模擬移動端的效果進行分析的。具體操作可將performance工具中的CPU選擇6*slowdown）
通過改變top屬性：

通過改變transform屬性：

從上圖可以看出，運動的元素如何沒有獨立的層，每一幀的繪制都需要經過不停的rendering和painting過程。

但硬件加速是把雙刃劍，過渡的使用硬件加速會適得其反。其影響表現在：

內存。創建一個新的渲染層，需要消耗額外的內存和管理資源，如果渲染層的個數過多，很容易引起內存問題，這一點在移動端瀏覽器上尤為明顯，可以引起電池耗電量的上升，降低電池的壽命。所以，一定要牢記不要讓頁面的每個元素都使用硬件加速，當且僅當需要的時候才為元素創建渲染層。

使用GPU渲染會影響字體的抗鋸齒效果。文本在動畫期間有可能會顯示的模糊。

參考文檔

無線性能優化：composite

CSS動畫及硬件加速

Javascript高性能動畫與頁面渲染

chrome渲染優化-層模型

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/52046.html

相關文章

  • 阿里七層流量入口 Tengine硬件加速探索之路

    摘要：今天分享的主題是阿里七層流量入口硬件加速探索之路。業務驅動了技術創新，年接入層在硬件加速領域邁出了第一步。三監控，對硬件加速相關的資源指標進行實時監控和報警，防患于未然。硬件加速效果上線后我們獲得了一些加速效果的數據。 摘要： Tengine在軟件層面已經有了深度的調試和優化經驗，但是在硬件層面，通用處理器（CPU）已經進入了摩爾定律，有了瓶頸。而在業務量突飛猛進的當下，如何利用硬件來...

    shadajin 評論0 收藏0

  • 陳天奇等人提出TVM：深度學習自動優化代碼生成器

    摘要：是由華盛頓大學在讀博士陳天奇等人提出的深度學習自動代碼生成方法，去年月機器之心曾對其進行過簡要介紹。目前的堆棧支持多種深度學習框架以及主流以及專用深度學習加速器。 TVM 是由華盛頓大學在讀博士陳天奇等人提出的深度學習自動代碼生成方法，去年 8 月機器之心曾對其進行過簡要介紹。該技術能自動為大多數計算硬件生成可部署優化代碼，其性能可與當前最優的供應商提供的優化計算庫相比，且可以適應新型專用加...

    raledong 評論0 收藏0

  • 瀏覽器之硬件加速機制

    摘要：書接上文瀏覽器內核之渲染基礎硬件加速基礎概念硬件加速技術是指使用的硬件能力為幫助渲染網頁，在為的作用主要是用來繪制圖形并且性能特別好。包含的節點表示的是使用硬件加速的元素或者技術。 showImg(https://segmentfault.com/img/remote/1460000016348971); 微信公眾號：愛寫bugger的阿拉斯加如有問題或建議，請后臺留言，我會盡力解決你...

    mengera88 評論0 收藏0

  • 硬件加速

    摘要：但硬件加速是把雙刃劍，過渡的使用硬件加速會適得其反。所以，一定要牢記不要讓頁面的每個元素都使用硬件加速，當且僅當需要的時候才為元素創建渲染層。參考文檔無線性能優化動畫及硬件加速高性能動畫與頁面渲染渲染優化層模型 前言 談起瀏覽器的硬件加速，想必大家都知道的一個技巧就是在用CSS3做動畫時，給元素添加transform: translateZ(0)或者transform: transla...

    mo0n1andin 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<