#Webkit 翻譯# Web 檢查器中的圖層可視化工具

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許可證） 轉載時請保留原文連接 以保證可及時獲取對文章的訂正和修改