Dev araçlar zaman çizelgesinde, boş yeşil dikdörtgenler nelerdir?

Question

Chrome dev araçları zaman çizelgesinde, doldurulmuş, yeşil dikdörtgenler (boya işlemlerini temsil eden) ile boş, yeşil dikdörtgenler arasındaki fark nedir (görünüşte boya işlemleri hakkında bir şeyler temsil ediyor ...)? aramaları ve pikselleştirmeyi çizmek:

Answer 1

Boyama gerçekten iki görevler olduğunu.

• Arama çağrıları. Bu, çizmek istediğiniz şeylerin bir listesi ve öğelerinize uygulanan CSS'den türetilmiştir. Sonuçta, Canvas elementine benzemeyen çizim çağrılarının bir listesi vardır: moveTo, lineTo, fillRect (Skia'da biraz farklı adlar olsa da, Chrome'un resim arka planı, benzer bir kavramdır.)
• Rasterleştirme. Bu adımlara adım atma işlemi, gerçek pikselleri, kompozisyon için GPU'ya yüklenebilen arabelleklere doldurur.

Yani, bu arka plan ile, başlıyoruz:

• katı yeşil bloklar beraberlik Chrome tarafından kayıt altına çağırır vardır. Bunlar, JavaScript, stil hesaplamaları ve düzen ile birlikte ana iş parçacığı üzerinde yapılır. Bu çizim çağrıları, bir veri yapısı olarak birlikte gruplandırılır ve birleşik konuya aktarılır. boş yeşil bloklar rasterleştirmedir. Bunlar, besteci tarafından üretilen bir işçi ipliğiyle ele alınır.

Esas olarak, her ikisi de boyadır, yalnızca genel işin farklı alt görevlerini temsil ederler. Performans sorunları yaşıyorsanız (ve sağladığınız kepçeden boya bağlı gibi görünüyorsanız), CSS veya JavaScript ile hangi özellikleri değiştirdiğinizi incelemeniz ve elde etmek için yalnızca bir yöntem olup olmadığını gözden geçirmeniz gerekebilir. aynı biter. CSS Triggers muhtemelen burada yardımcı olabilir.