掃二維碼與項目經(jīng)理溝通
我們在微信上24小時期待你的聲音
解答本文疑問/技術咨詢/運營咨詢/技術建議/互聯(lián)網(wǎng)交流
引言
網(wǎng)站建設哪家好，找創(chuàng)新互聯(lián)公司！專注于網(wǎng)頁設計、網(wǎng)站建設、微信開發(fā)、重慶小程序開發(fā)公司、集團企業(yè)網(wǎng)站建設等服務項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了昌寧免費建站歡迎大家使用！
對于大多數(shù)Web開發(fā)者而言，Web頁面的基本模型就是DOM模型。頁面的渲染過程常常并不為人所知，大家只是知道它是一個將頁面的DOM表示方式轉(zhuǎn)化為在屏幕上顯示的一個圖片的過程。近幾年，現(xiàn)代瀏覽器利用圖形卡對頁面渲染方式進行了改進：這種改進一般都籠統(tǒng)地稱為“硬件加速”。當談及普通Web頁面（也即：非Canvas2D或者WebGL頁面）時，硬件加速這個詞到底意味著什么？本文將對作為Chrome中硬件加速下Web頁面渲染基礎的基本模型進行說明。
冗長的注意事項
我們在這里討論的是WebKit，更具體地講，我們討論的是Chromium下的WebKit。 本文所涉及的是Chrome的實現(xiàn)細節(jié)，而不是Web平臺的特性。Web平臺及其標準并沒有對這個層次的實現(xiàn)細節(jié)做出詳細的規(guī)定，所以我們并不能保證本文中的內(nèi)容可以適用于其它的瀏覽器，但是對瀏覽器內(nèi)部工作機理的了解定會有益于對應用進行高水平的錯誤調(diào)試和性能調(diào)優(yōu)。
另外還要主意，整個這篇文章討論的都是Chrome渲染架構(gòu)中的一個核心部分，但這個結(jié)構(gòu)仍在迅速變化之中。本文試圖僅僅涉及那些不太可能發(fā)生變化的部分，但要是在6個月后再看這篇文章，那可就不一定是什么情況了。
很重要的是要明白Chrome當下有段時間還會有兩個不同的渲染途徑：硬件加速式的渲染和早期軟件式的渲染。直到寫這篇文章之時為止，在Windows、 ChromeOS和Android下的Chrome中，所有的頁面都走的是硬件加速途徑。在Mac和Linux下， 只有那些部分內(nèi)容需要組合的頁面才會走硬件加速途徑（更多關于什么才需要組合的說明請參見下文），但用不了多久，所有頁面將都會走硬件加速途徑。
最后要說的是，我們在這里的內(nèi)容只是對Chrome的渲染引擎的管窺之見，所看到的只是其對性能影響比較大的一些特性。當你想要提高你的網(wǎng)站的性能時，對層模型有所了解會非常有幫助作用，但這也容易造成搬起石頭砸自己腳的情況：層這種結(jié)構(gòu)非常有用，但是創(chuàng)建過多的層會造成整個圖形棧開銷的增加。到時候可別說我沒有提前警告過你哦！
從DOM到屏幕
層的引入
頁面一旦在裝入并解析完成后，就會表示為許多Web開發(fā)者所熟悉的結(jié)構(gòu)：DOM。然而，在頁面的渲染過程中，瀏覽器還具有一系列并不直接暴露給開發(fā)者的頁面中間表示方式。這些表示方式中最重要的結(jié)構(gòu)就是層。
在Chrome中實際上有幾種不同類型的層：掌管DOM子樹的渲染層（RenderLayer）以及掌管渲染層子樹的圖形層（GraphicsLayer）。 我們這里最關心的是后者，因為作為紋理上傳到GPU之中的就是圖形層。本文自此就只用“層”來指代圖形層了。
稍稍離題說一下同GPU有關的幾個術語：什么是紋理？紋理可以看作是位圖圖像，從主存儲器（也就是RAM）傳遞到視頻存儲器（也就是GPU之上的 VRAM）之中的就是這個圖像。一旦傳遞到GPU之中后，你就能夠?qū)⒓y理映射到一個網(wǎng)格幾何結(jié)構(gòu)之上 —— 在視頻游戲或者CAD程序中，這種技術用來給框架式的3D模型添加“皮膚”。Chrome采用紋理把頁面中的內(nèi)容分塊發(fā)送給GPU。紋理能夠以很低的代價映射到不同的位置，而且還能夠以很低的代價通過把它們應用到一個非常簡單的矩形網(wǎng)格中進行變形。這就是3D CSS的實現(xiàn)原理，而且這么做對頁面在屏幕的快速滾動也非常好 —— 現(xiàn)在先說這些，這兩方面更詳細的探討情況下文。
下面讓我們用幾個例子來說明層的概念。
在Chome中研究層時有一個非常有用的工具就是Chrome的開發(fā)者工具里設置（也就是那個小齒輪圖標）中“渲染（rendering）”小標題下的 “顯示層的組合邊界（show composited layer borders）”開關。讓我們把這個開關打開。本文中所有的截屏和例子都來自最新版的Chrome Canary，在寫這篇文章的時候是Chrome 27。
圖1： 只有一層的頁面 (將在新窗口中打開)
（譯者注：這里缺了一個圖，原文中的圖就看不到，可能是需要翻墻？）
在頁面的基本層中組合層的渲染邊界屏幕截圖
這個頁面只有一層。藍色的柵格表示的是分塊，這些分塊可以看作是比層更低一級的單位，Chrome以這些分塊為單位，一次向GPU上傳一個分塊的內(nèi)容。這里它們并不怎么重要。
圖2：有自己的層的元素 (open stand-alone)
- I am a strange root.
（譯者注：這里缺了一個圖，原文中的圖就看不到，可能是需要翻墻？）
旋轉(zhuǎn)后層的渲染邊界的截屏
在
層的創(chuàng)建準則
還要其它什么元素會得到自己的層？Chrome在這方面采用的規(guī)則仍在隨著時間推移逐漸發(fā)展變化，但在目前下面這些因素都會引起Chrome創(chuàng)建層：
實際意義：動畫
我們還可以將層在頁面中到處移動，正好可用于動畫。
圖3: 動畫層（將在新窗口中打開）
- div {
- -webkit-animation-duration: 5s;
- -webkit-animation-name: slide;
- -webkit-animation-iteration-count: infinite;
- -webkit-animation-direction: alternate;
- width: 200px;
- height: 200px;
- margin: 100px;
- background-color: gray;
- }
- @-webkit-keyframes slide {
- from {
- -webkit-transform: rotate(0deg);
- }
- to {
- -webkit-transform: rotate(120deg);
- }
- }
正如前文所述，層在將Web頁面中的靜態(tài)內(nèi)容隨處移動方面真的很有用。在最基本的情況下，Chrome將層中的內(nèi)容繪制到軟件位圖中，然后再將該位圖作為紋理上載到GPU之中。如果層中的內(nèi)容將來不會發(fā)生變化，那就不需要對其進行重繪了。這是個好事：重繪將會占用本可以用于干其它事情，比如運行 JavaScript的時間，而且如果繪制過程太長，動畫還會出現(xiàn)卡頓現(xiàn)象。
例如，可以在Chrome的開發(fā)工具中看一下這個頁面的時間線：但該層在來回旋轉(zhuǎn)的時候，并沒有出現(xiàn)繪制操作。 動畫過程中的開發(fā)者工具時間線屏幕截圖
無效！重繪
但是如果層中的內(nèi)容發(fā)生了改變，它就需要重繪了。
圖4：層的重繪 (將在新窗口打開)