Webkit 部落格原文 • 機翻 + 校對
最近釋出的Safari測試版（Safari Technology Preview）在 Web 檢查器中新增了一個新的實驗性功能：Layers tab。在現有的Layers sidebar的基礎上，該選項卡引入了被檢查頁面圖層的三維展示，為開發人員提供更實用的（並且充滿樂趣！）的方式來了解圖層的生成方式和渲染順序。
在這篇文章中，我們將看看如何使用 Layers tab 來查詢網頁上的意外記憶體消耗或過度重繪。
Layers 的快速介紹
在介紹任何除錯工具之前，首先了解一下我們打算除錯的內容。乍一看，圖層視覺化可能與DOM視覺化（如Firefox的Tilt）非常相似，但合成圖層和DOM元素在概念上是不同的實體。儘管Web開發人員非常熟悉DOM樹作為頁面上元素的結構，但這些元素在螢幕上呈現的方式往往只是在需要時才會被學習到。
DOM元素不是一個接一個地畫在螢幕上的，在計算每個元素的位置和大小後，它們被繪製到一系列稱為圖層的表面上，正是這些圖層以特定的順序合成以產生網頁的最終外觀。雖然頁面都有一個與文件本身相對應的根圖層，但任何DOM元素也都會建立新的圖層。比如某些特殊元素（例如<canvas>）、包含某些CSS屬性（例如3D轉換）或與某些圖層生成元素產生互動。
圖層對渲染效能有重大影響。如果沒有圖層存在，就不得不在元素進行動畫處理（例如，滑動標題）的時候重繪整個頁面。但是，如果元素具有其自己的圖層，則有可能跳過全體重繪，只對需要的圖層生成動畫。當然，節省計算的代價是高昂的記憶體成本，所以建立過多的圖層可能會在記憶體受限的裝置上產生災難性結果。與其他效能問題的解決方法一樣，找到正確的平衡點才可以，但以往這都是根據經驗來完成的，因此擁有合適的除錯工具至關重要！
通過 Layers Tab 定位問題
圖層選項卡包含，圖層的3D視覺化和資料表的實時展示。我們可以結合使用它們來發現潛在的效能問題。
探索視覺化介面，瞭解每個圖層的位置，大小和渲染順序。要進行導航，請使用左鍵拖動進行旋轉，右鍵拖動以進行平移，然後滾動至縮放。點選圖表中的圖層會突出顯示圖層表中的相應行。
（此處有個看上去是 gif 但實際是 .mp4 的檔案沒法轉過來）
然後，我們可以使用該表來識別最耗費的圖層，按記憶體對記憶體消耗進行排序（預設值），或者被重繪次數計數。在表格中選擇任意一行可顯示有關圖層存在的原因以及其合成和可見尺寸（分別視覺化為輪廓和平面）的資訊。這也重新調整了選擇的視覺化，闡明瞭該圖層如何適應更大的影象。
因此我們可能會察覺到到附近有會一個位置奇怪的圖層，並快速找到它，或者我們可以依次檢查每個最消耗資源的圖層。如果一個圖層看起來可疑，我們可以單擊其表格行中的箭頭圖示切換到元素選項卡並檢查生成它的DOM元素。如果這還不足以解釋非常高的重繪次數，我們可以轉到時間線選項卡來確定哪些繪畫事件被觸發。
一旦我們確定了我們的問題，我們就可以適當的修改HTML / CSS！
反饋
圖層選項卡可在最新的Safari測試版（Safari Technology Preview）中找到。要啟用它，請訪問Web Inspector的“Settings”選項卡上的“Experimental”皮膚，然後選中“Enable Layers Tab”設定。試一試，讓我們知道你的想法！在Freenode IRC的＃webkit-inspector上，或在Twitter上致力於@webkit，或者通過提交錯誤資訊。
羅小黑寫寫文字
如果喜歡文章 請留下一個贊~ 如果喜歡文章 分享給更多人~
自由轉載-非商用-非衍生-保持署名（創意共享3.0許可證） 轉載時請保留原文連結 以保證可及時獲取對文章的訂正和修改