如何確定iOS Safari中導致「樣式失效」的原因？

我在iOS上滾動時遇到了性能問題。在touchstart和touchend上，Safari無效，然後重新計算樣式，這導致在滾動響應之前稍微延遲。 Safari的工具有一個「啓動器」列，但在我的測試中它是空白的。如何確定iOS Safari中導致「樣式失效」的原因？

我已經試過：

滾動元件上施加任何will-change: transform;或transform: translateZ(0);。這對Chrome非常有幫助，但對iOS Safari沒有任何幫助。分析器仍然報告正在重新計算樣式。
去除有position: fixed;
檢查的Javascript每一行的DOM的所有元素（這只是jQuery和在我的測試角的核心代碼）通過剖析報告，看看他們在Paul Irish's list of things that force layout/reflow
要重現在Android上，我可以使用Chrome的恆星開發工具，但沒有成功。該問題僅影響iOS Safari，而Safari Safari只能從桌面Safari進行調試。

如何確定是什麼導致我的樣式在iOS Safari中失效？

來源

2016-12-16 adamdport

這是iOS中已知的「問題」，請參閱此處：https：//developers.google.com/web/updates/2013/12/300ms-tap-delay-gone-away。使用Fastclick.js來幫助緩解，我認爲8之後更新版本的iOS刪除了這個點擊延遲「功能」。希望有所幫助！ –

我不確定這是一樣的。對於我來說，滾動對於更簡單的DOM結構的頁面響應速度更快，這不是一個靜態延遲。我確定它與風格無效有關。 – adamdport

面對同樣的問題，唯一有效的方法是查看單個頁面上的每個動畫內容並嘗試禁用它並檢查它是否有幫助。在我的情況下，迴流是由來自離子的組件的「animated ='true'」參數引起的。 –

這爲我工作，當我調試一個類似的問題。

獲取您想要查看的事件的開始時間。從屏幕截圖看，應該在倒數第二列。
單擊名爲「框架」的「事件」選項卡旁邊的選項卡。
尋找匹配起始時間最近的幀。（有時並非確切）
擴展該框架可以讓您看到正在查看的事件之前/之後發生的事件。在最後一列「位置」上，您可以看到問題的來源。如果它已填充，則可以單擊右箭頭查看導致該行的行。 但它並不總是有東西在列中。我不得不看看以前的事件，試圖找出問題所在。

這並不完美，但我已經能夠調試我遇到的這種方法的問題。希望這可以幫助！

來源

2016-12-23 08:35:48 heraldo

如何確定iOS Safari中導致「樣式失效」的原因？

回答

相關問題