問(wèn)題描述

這里有什么特殊意義么，是不是完全可以用translateX()代替translate3d()啊？

問(wèn)題解答

增加http://www.infoq.com/cn/artic...文章比較長(zhǎng)，而且沒(méi)看懂，摘一段

...但我的第一猜測(cè)這么做的原因是為了使用translate3d hack。簡(jiǎn)單來(lái)說(shuō)如果你給一個(gè)元素添加上了-webkit-transform: translateZ(0);或者-webkit-transform: translate3d(0,0,0);屬性，那么你就等于告訴了瀏覽器用GPU來(lái)渲染該層，與一般的CPU渲染相比，提升了速度和性能。(我很確定這么做會(huì)在Chrome中啟用了硬件加速，但在其他平臺(tái)不做保證。就我得到的資料而言，在大多數(shù)瀏覽器比如Firefox、Safari也是適用的)。

但這樣的說(shuō)法其實(shí)并不準(zhǔn)確，至少在現(xiàn)在的Chrome版本中這算不上一個(gè)hack。因?yàn)槟J(rèn)渲染所有的網(wǎng)頁(yè)時(shí)都會(huì)經(jīng)過(guò)GPU。那么這么做還有必要嗎？有。在理解原理之前，你必須先了解一個(gè)層(Layer)的概念。

html在瀏覽器中會(huì)被轉(zhuǎn)化為DOM樹(shù)，DOM樹(shù)的每一個(gè)節(jié)點(diǎn)都會(huì)轉(zhuǎn)化為RenderObject, 多個(gè)RenderObject可能又會(huì)對(duì)應(yīng)一個(gè)或多個(gè)RenderLayer。瀏覽器渲染的流程如下：

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

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

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

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

這和游戲中的3D渲染類(lèi)似，雖然我們看到的是一個(gè)立體的人物，但這個(gè)人物的皮膚是由不同的圖片“貼”和“拼”上去的。網(wǎng)頁(yè)比此還多了一個(gè)步驟，雖然最終的網(wǎng)頁(yè)是由多個(gè)位圖層合成的，但我們看到的只是一個(gè)復(fù)印版，最終只有一個(gè)層。當(dāng)然有的層是無(wú)法拼合的，比如flash。

2014-6-24 11:04:16

@bobscript @f2e

開(kāi)啟3dGPU加速。

效果一樣，不過(guò)后者會(huì)觸發(fā)瀏覽器的硬件加速。這篇文章有詳解：http://cubefe.com/ipad_web_gp...

在支持css3的瀏覽器上開(kāi)發(fā)js動(dòng)畫(huà)還是比較輕松方便的。一般來(lái)說(shuō)利用css3 translate來(lái)代替?zhèn)鹘y(tǒng)的修改left和top實(shí)現(xiàn)動(dòng)畫(huà)，某些情況下能會(huì)更好一點(diǎn)。具體原因是能夠減少瀏覽器repait量。經(jīng)過(guò)實(shí)踐發(fā)現(xiàn)translate方法和left,top方法性能上相差無(wú)幾，都是很差的，全屏的動(dòng)畫(huà)repait量無(wú)論如何都無(wú)法減小。

經(jīng)過(guò)調(diào)研發(fā)現(xiàn)這種情況可以利用webkit的gpu加速渲染功能實(shí)現(xiàn)流暢的動(dòng)畫(huà)效果，理論。簡(jiǎn)單說(shuō)下開(kāi)啟gpu加速的一些方法：1,html5 video,bing首頁(yè)動(dòng)態(tài)背景使用video的原因之一吧。2,transition 和 animation（在ipad上使用會(huì)開(kāi)啟gpu加速)。3,-webkit-transform-style:preserve-3d; -webkit-transform: translate3d(0,0,0); 。4,給元素transform加上translateZ(0px),iScroll采用的方法。按照上述方法開(kāi)啟gpu加速后，涉及到的區(qū)域就會(huì)被gpu直接渲染在屏幕對(duì)應(yīng)區(qū)域，不用和瀏覽器進(jìn)程共享內(nèi)存和減輕cpu負(fù)擔(dān)是gpu加速的理論原理。帶來(lái)的問(wèn)題：同時(shí)開(kāi)啟gpu加速后也會(huì)帶來(lái)一些額外的問(wèn)題，首要的應(yīng)該是設(shè)備耗電量會(huì)增加，畢竟gpu也開(kāi)始工作了。其次會(huì)出現(xiàn)一些渲染上面的問(wèn)題，例如被加速部分元素z-index值和未被加速部分之間將無(wú)法正常比較。被加速元素如果有position定位的子元素，這些子元素有可能無(wú)法渲染到被加速元素以外的區(qū)域——left設(shè)置成-10000px都會(huì)渲染成0px。pc上有些顯卡還會(huì)出現(xiàn)渲染bug，好在ipad上沒(méi)這個(gè)問(wèn)題。