Webkit 博客原文 ? 機翻 + 校對
最近發(fā)布的Safari測試版（Safari Technology Preview）在 Web 檢查器中添加了一個新的實驗性功能：Layers tab挽霉。在現(xiàn)有的Layers sidebar的基礎(chǔ)上防嗡，該選項卡引入了被檢查頁面圖層的三維展示，為開發(fā)人員提供更實用的（并且充滿樂趣Ｏ揽病）的方式來了解圖層的生成方式和渲染順序蚁趁。
在這篇文章中，我們將看看如何使用 Layers tab 來查找網(wǎng)頁上的意外內(nèi)存消耗或過度重繪实胸。
Layers 的快速介紹
在介紹任何調(diào)試工具之前他嫡，首先了解一下我們打算調(diào)試的內(nèi)容。乍一看庐完，圖層可視化可能與DOM可視化（如Firefox的Tilt）非常相似钢属，但合成圖層和DOM元素在概念上是不同的實體。盡管Web開發(fā)人員非常熟悉DOM樹作為頁面上元素的結(jié)構(gòu)门躯，但這些元素在屏幕上呈現(xiàn)的方式往往只是在需要時才會被學(xué)習(xí)到淆党。
DOM元素不是一個接一個地畫在屏幕上的，在計算每個元素的位置和大小后，它們被繪制到一系列稱為圖層的表面上宁否，正是這些圖層以特定的順序合成以產(chǎn)生網(wǎng)頁的最終外觀窒升。雖然頁面都有一個與文檔本身相對應(yīng)的根圖層，但任何DOM元素也都會創(chuàng)建新的圖層慕匠。比如某些特殊元素（例如<canvas>）饱须、包含某些CSS屬性（例如3D轉(zhuǎn)換）或與某些圖層生成元素產(chǎn)生交互。
圖層對渲染性能有重大影響台谊。如果沒有圖層存在蓉媳，就不得不在元素進行動畫處理（例如，滑動標(biāo)題）的時候重繪整個頁面锅铅。但是酪呻，如果元素具有其自己的圖層，則有可能跳過全體重繪盐须，只對需要的圖層生成動畫玩荠。當(dāng)然，節(jié)省計算的代價是高昂的內(nèi)存成本贼邓，所以創(chuàng)建過多的圖層可能會在內(nèi)存受限的設(shè)備上產(chǎn)生災(zāi)難性結(jié)果阶冈。與其他性能問題的解決方法一樣，找到正確的平衡點才可以塑径，但以往這都是根據(jù)經(jīng)驗來完成的女坑，因此擁有合適的調(diào)試工具至關(guān)重要！
通過 Layers Tab 定位問題
圖層選項卡包含统舀，圖層的3D可視化和數(shù)據(jù)表的實時展示匆骗。我們可以結(jié)合使用它們來發(fā)現(xiàn)潛在的性能問題。
探索可視化界面誉简，了解每個圖層的位置碉就，大小和渲染順序。要進行導(dǎo)航闷串，請使用左鍵拖動進行旋轉(zhuǎn)铝噩，右鍵拖動以進行平移，然后滾動至縮放窿克。點擊圖表中的圖層會突出顯示圖層表中的相應(yīng)行骏庸。
（此處有個看上去是 gif 但實際是 .mp4 的文件沒法轉(zhuǎn)過來）
然后，我們可以使用該表來識別最耗費的圖層年叮，按內(nèi)存對內(nèi)存消耗進行排序（默認值）具被，或者被重繪次數(shù)計數(shù)。在表格中選擇任意一行可顯示有關(guān)圖層存在的原因以及其合成和可見尺寸（分別可視化為輪廓和平面）的信息只损。這也重新調(diào)整了選擇的可視化一姿，闡明了該圖層如何適應(yīng)更大的圖像七咧。
因此我們可能會察覺到到附近有會一個位置奇怪的圖層，并快速找到它叮叹，或者我們可以依次檢查每個最消耗資源的圖層艾栋。如果一個圖層看起來可疑，我們可以單擊其表格行中的箭頭圖標(biāo)切換到元素選項卡并檢查生成它的DOM元素蛉顽。如果這還不足以解釋非常高的重繪次數(shù)蝗砾，我們可以轉(zhuǎn)到時間線選項卡來確定哪些繪畫事件被觸發(fā)。
一旦我們確定了我們的問題携冤，我們就可以適當(dāng)?shù)男薷腍TML / CSS悼粮！
反饋
圖層選項卡可在最新的Safari測試版（Safari Technology Preview）中找到。要啟用它曾棕，請訪問Web Inspector的“Settings”選項卡上的“Experimental”面板扣猫，然后選中“Enable Layers Tab”設(shè)置。試一試翘地，讓我們知道你的想法申尤！在Freenode IRC的＃webkit-inspector上，或在Twitter上致力于@webkit衙耕，或者通過提交錯誤信息昧穿。
羅小黑寫寫文字
如果喜歡文章 請留下一個贊~
如果喜歡文章 分享給更多人~自由轉(zhuǎn)載-非商用-非衍生-保持署名（創(chuàng)意共享3.0許可證）
轉(zhuǎn)載時請保留原文鏈接 以保證可及時獲取對文章的訂正和修改
