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

資訊專欄INFORMATION COLUMN

硬件加速

mo0n1andin / 3531人閱讀

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

前言

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

第一種方法通過改變?cè)撛氐膖op屬性來實(shí)現(xiàn)：

.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來實(shí)現(xiàn)：

.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)}
}

兩種方式都能達(dá)到同樣的效果，但瀏覽器在內(nèi)部渲染的過程卻大不相同。哪種實(shí)現(xiàn)方式更優(yōu)？在回答這個(gè)問題之前，我們先來了解一下瀏覽器的渲染過程。

瀏覽器渲染過程

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

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

在了解了這兩個(gè)線程各自負(fù)責(zé)的部分之后，我們?cè)賮砜礊g覽器的渲染過程。大體流程如下：

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

如何能使元素達(dá)到這個(gè)效果？就是讓元素?fù)碛凶约旱膶樱╨ayer）。有了層的概念，讓我們從層的概念再來看瀏覽器的渲染過程：

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

將每個(gè)層?xùn)鸥窕ⅹ?dú)立的繪制進(jìn)位圖中

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

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

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

那么如何才能創(chuàng)建一個(gè)層呢？

3d transform屬性

backface-visibility為hidden的元素

使用加速視頻解碼的

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

混合插件(如 Flash)

對(duì) opacity、transform、fliter、backdrop-filter 應(yīng)用了 animation 或者 transition（需要是 active 的 animation 或者 transition，當(dāng) animation 或者 transition 效果未開始或結(jié)束后，合成層也會(huì)失效）

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

元素有一個(gè)包含復(fù)合層的后代節(jié)點(diǎn)(換句話說，就是一個(gè)元素?fù)碛幸粋€(gè)子元素，該子元素在自己的層里)

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

在webkit內(nèi)核的瀏覽器中，如果有上述情況，就會(huì)創(chuàng)建一個(gè)獨(dú)立的層(layer)。我們可以借助chrome瀏覽器開發(fā)者工具中的layers和rendering結(jié)合來查看頁面中有哪些獨(dú)立的層。

性能分析

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

通過改變transform屬性：

從上圖可以看出，運(yùn)動(dòng)的元素如何沒有獨(dú)立的層，每一幀的繪制都需要經(jīng)過不停的rendering和painting過程。

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

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

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

參考文檔

無線性能優(yōu)化：composite

CSS動(dòng)畫及硬件加速

Javascript高性能動(dòng)畫與頁面渲染

chrome渲染優(yōu)化-層模型

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/93557.html

相關(guān)文章

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

    摘要：今天分享的主題是阿里七層流量入口硬件加速探索之路。業(yè)務(wù)驅(qū)動(dòng)了技術(shù)創(chuàng)新，年接入層在硬件加速領(lǐng)域邁出了第一步。三監(jiān)控，對(duì)硬件加速相關(guān)的資源指標(biāo)進(jìn)行實(shí)時(shí)監(jiān)控和報(bào)警，防患于未然。硬件加速效果上線后我們獲得了一些加速效果的數(shù)據(jù)。 摘要： Tengine在軟件層面已經(jīng)有了深度的調(diào)試和優(yōu)化經(jīng)驗(yàn)，但是在硬件層面，通用處理器（CPU）已經(jīng)進(jìn)入了摩爾定律，有了瓶頸。而在業(yè)務(wù)量突飛猛進(jìn)的當(dāng)下，如何利用硬件來...

    shadajin 評(píng)論0 收藏0

  • 陳天奇等人提出TVM：深度學(xué)習(xí)自動(dòng)優(yōu)化代碼生成器

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

    raledong 評(píng)論0 收藏0

  • 瀏覽器之硬件加速機(jī)制

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

    mengera88 評(píng)論0 收藏0

  • 硬件加速

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

    xiaotianyi 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<