Long Animation Frames API (LoAF - Lo-Af olarak bilinir), yavaş kullanıcı arayüzü (UI) güncellemelerinin daha iyi anlaşılmasını sağlamak için Long Tasks API'de yapılan bir güncellemedir. Bu, duyarlılığı ölçen Sonraki Boyamayla Etkileşim (INP) Önemli Web Verileri metriğini etkileme olasılığı yüksek olan yavaş animasyon karelerini tanımlamak veya düzgünlüğü etkileyen diğer kullanıcı arayüzü duraklamalarını tanımlamak için yararlı olabilir.
API'nin durumu
Tarayıcı Desteği
- 123
- x
- x
- x
LoAF API, Chrome 116'dan Chrome 122'ye yapılan kaynak denemesinin ardından Chrome 123'ten kullanıma sunulmuştur.
Uzun Görevler API'sı
Long Animation Frames API, Chrome'da bir süredir (Chrome 58'den beri) kullanılan Long Tasks API'nin bir alternatifidir. Adından da anlaşılacağı gibi, Long Task API, ana iş parçacığını 50 milisaniye veya daha uzun süre kaplayan uzun görevleri izlemenize olanak tanır. Uzun görevler, PeformanceObserver ile PerformanceLongTaskTiming arayüzü kullanılarak izlenebilir:
const observer = new PerformanceObserver((list) => {
console.log(list.getEntries());
});
observer.observe({ type: 'longtask', buffered: true });
Uzun görevler yanıt verme sorunlarına neden olabilir. Bir kullanıcı bir sayfayla etkileşim kurmaya çalışırsa (örneğin, bir düğmeyi tıklama veya menü açma) ancak ana ileti dizisi zaten uzun bir görevle ilgileniyorsa söz konusu görevin tamamlanmasını beklerken kullanıcının etkileşimi gecikir.
Yanıt hızını iyileştirmek için genellikle uzun görevleri bölmeniz önerilir. Her uzun görev bunun yerine bir dizi küçük göreve bölünürse etkileşimlere yanıt verirken önemli gecikmeler yaşamamak için bunlar arasında daha önemli görevlerin yürütülmesine izin verilebilir.
Bu nedenle, yanıt verme hızını iyileştirmeye çalışırken ilk çaba genellikle bir performans izlemesi çalıştırmak ve uzun görevlere bakmaktır. Bu işlemi, Lighthouse gibi (Uzun ana iş parçacığı görevlerinden kaçınma denetimi bulunan) laboratuvar tabanlı bir denetleme aracıyla gerçekleştirebilir veya Chrome Geliştirici Araçları'nda uzun görevlere bakabilirsiniz.
Laboratuvar tabanlı testler, etkileşimleri içermeyebileceğinden yanıt verme sorunlarını belirlemek için genellikle iyi bir başlangıç noktası değildir. Bu araçlar etkileşim içermese de olası etkileşimlerin küçük bir alt kümesidir. İdeal olan, alandaki yavaş etkileşimlerin nedenlerini ölçmenizdir.
Long Tasks API'nin Eksiklikleri
Sahadaki uzun görevleri bir Performans Gözlemcisi kullanarak ölçmek biraz yararlıdır. Aslında bu bilgi uzun bir görevin gerçekleştirildiği ve bunun ne kadar sürdüğü gerçeği dışında pek fazla bilgi vermez.
Gerçek Kullanıcı İzleme (RUM) araçları bu metriği genellikle uzun görevlerin sayısına veya süresine bakarak ya da hangi sayfalarda gerçekleştirdiklerini belirlemek için kullanır. Ancak uzun göreve neyin neden olduğuyla ilgili temel ayrıntılara yer verilmeden bu özelliğin kullanımı sınırlıdır. Uzun Görevler API'sının yalnızca temel ilişkilendirme modeli vardır. Bu model, en iyi ihtimalle yalnızca uzun görevin içinde gerçekleştiği kapsayıcıyı (üst düzey doküman veya <iframe>) belirtir. Tipik bir girişte gösterildiği gibi, bu modeli veya bunu çağıran komut dosyasını veya işlevi değil:
{
"name": "unknown",
"entryType": "longtask",
"startTime": 31.799999997019768,
"duration": 136,
"attribution": [
{
"name": "unknown",
"entryType": "taskattribution",
"startTime": 0,
"duration": 0,
"containerType": "window",
"containerSrc": "",
"containerId": "",
"containerName": ""
}
]
}
Uzun Görevler API'si de bazı önemli görevleri hariç tutabileceği için aynı zamanda tamamlanmamış bir görünümdür. Oluşturma gibi bazı güncellemeler ayrı görevler halinde gerçekleşir. Söz konusu güncellemenin, söz konusu etkileşim için "toplam iş yükünü" doğru bir şekilde ölçmek amacıyla önceki yürütmeyle birlikte eklenmesi tercih edilir. Görevlere güvenmeyle ilgili sınırlamalar hakkında daha fazla bilgi edinmek için açıklayıcıdaki "Uzun görevlerin yetersiz kaldığı yerler" bölümüne bakın.
Son sorun ise uzun görevlerin ölçülmesi yalnızca 50 milisaniye sınırını aşan bağımsız görevlerin raporlanmasıdır. Bir animasyon çerçevesi, bu 50 milisaniyelik sınırın altındaki çeşitli görevlerden oluşabilir ancak yine de tarayıcının oluşturma yeteneği toplu olarak engellenir.
Uzun Animasyon Çerçeveleri API'si
Tarayıcı Desteği
- 123
- x
- x
- x
Long Animation Frames API (LoAF), geliştiricilerin yanıt verme sorunlarını çözmelerine ve INP'yi iyileştirmeye yardımcı olacak daha uygulanabilir analizler elde etmesini sağlamak için Uzun Görevler API'sinin bazı eksikliklerini gidermeyi amaçlayan yeni bir API'dir.
Yanıt verme özelliğinin iyi olması, bir sayfanın kendisiyle yapılan etkileşimlere hızlı yanıt vermesi anlamına gelir. Bu, kullanıcının ihtiyaç duyduğu güncellemeleri zamanında boyayabilmek ve bu güncellemelerin gerçekleşmesini engellemekten kaçınmayı kapsar. INP için 200 milisaniye veya daha kısa sürede yanıt verilmesi önerilir, ancak diğer güncellemeler (örneğin, animasyonlar) için bu süre çok uzun olabilir.
Uzun Animasyon Çerçeveleri API'si, engelleme çalışmalarını ölçmeye alternatif bir yaklaşımdır. Long Animasyon Frames API'si, adından da anlaşılacağı üzere bağımsız görevleri ölçmek yerine uzun animasyon karelerini ölçer. Oluşturma güncellemesinin 50 milisaniyeden (Uzun Görevler API'sinin eşiğiyle aynıdır) fazla gecikmesine uzun animasyon karesi denir.
Uzun animasyon kareleri, PerformanceObserver içeren uzun görevlere benzer şekilde gözlemlenebilir ancak bunun yerine long-animation-frame türüne bakılır:
const observer = new PerformanceObserver((list) => {
console.log(list.getEntries());
});
observer.observe({ type: 'long-animation-frame', buffered: true });
Önceki uzun animasyon kareleri de Performans Zaman Çizelgesi'nden şu şekilde sorgulanabilir:
const loafs = performance.getEntriesByType('long-animation-frame');
Ancak performans girişleri için bir maxBufferSize mevcut olduğundan daha sonra yeni girişler çıkarılır. Bu nedenle, PerformanceObserver yaklaşımı önerilir. long-animation-frame arabellek boyutu, long-tasks boyutuyla aynı şekilde 200 olarak ayarlanmıştır.
Görevler yerine çerçevelere bakmanın avantajları
Buna görevler açısından değil, kare perspektifinden bakmanın temel avantajı, uzun bir animasyonun toplamda uzun bir animasyon karesiyle sonuçlanan herhangi bir sayıda görevden oluşabilmesidir. Bu, daha önce bahsedilen son noktaya yöneliktir. Örneğin, bir animasyon karesinden önceki birçok küçük, oluşturmayı engelleyen görev, Uzun Görevler API'si tarafından ortaya çıkarılmayabilir.
Uzun görevlerde bu alternatif görünümün bir başka avantajı da tüm karenin zamanlama dökümlerini sağlayabilmesidir. Uzun Görevler API'sinde olduğu gibi sadece bir startTime ve duration eklemek yerine LoAF, aşağıdakiler de dahil olmak üzere kare süresinin çeşitli bölümlerinin çok daha ayrıntılı bir dökümünü içerir:
startTime: Gezinme başlangıç zamanına göre uzun animasyon çerçevesinin başlangıç zamanı.duration: Uzun animasyon karesinin süresi (sunum süresi hariç).renderStart: Oluşturma döngüsünün başlangıç zamanı. BunarequestAnimationFramegeri çağırma, stil ve düzen hesaplama, yeniden boyutlandırma gözlemleyicisi ve kesişim gözlemleyicisi geri çağırmaları dahildir.styleAndLayoutStart: Stil ve düzen hesaplamalarında harcanan dönemin başlangıcı.firstUIEventTimestamp: Bu çerçevenin süresi boyunca işlenecek ilk kullanıcı arayüzü etkinliğinin (fare/klavye vb.) zamanı.blockingDuration: Animasyon karesinin engellendiği süre (milisaniye cinsinden).
Bu zaman damgaları, uzun animasyon çerçevesinin zamanlamalara bölünmesine olanak tanır:
| Zamanlama | Hesaplama |
|---|---|
| Başlangıç Zamanı | startTime |
| Bitiş Zamanı | startTime + duration |
| İş süresi | renderStart ? renderStart - startTime : duration |
| Oluşturma süresi | renderStart ? (startTime + duration) - renderStart: 0 |
| Oluştur: Düzen öncesi süresi | styleAndLayoutStart ? styleAndLayoutStart - renderStart : 0 |
| Oluşturma: Stil ve Düzen süresi | styleAndLayoutStart ? (startTime + duration) - styleAndLayoutStart : 0 |
Bu tek tek zamanlamalar hakkında daha fazla bilgi için, uzun bir animasyon karesine hangi etkinliğin katkıda bulunduğuyla ilgili ince ayrıntı sağlayan açıklamaya bakın.
Daha iyi ilişkilendirme
long-animation-frame giriş türü, uzun bir animasyon çerçevesine katkıda bulunan her komut dosyasının daha iyi ilişkilendirme verilerini içerir.
Uzun Görevler API'sine benzer şekilde bu özellik de bir dizi atıf girişi halinde sunulur. Bu girişlerin her biri aşağıdaki bilgileri içerir:
- Hem
namehem deEntryTypeişleviscriptsonucunu döndürür. - Komut dosyasının nasıl çağrıldığını belirten anlamlı bir
invoker(örneğin,'IMG#id.onload','Window.requestAnimationFrame'veya'Response.json.then'). - Komut dosyası giriş noktasının
invokerType:user-callback: Bir web platformu API'sinden kaydedilmiş bilinen bir geri çağırma (ör.setTimeout,requestAnimationFrame).event-listener: Platform etkinliğinin işleyicisi (örneğin,click,load,keyup).resolve-promise: Platform vaadinin işleyicisi (örneğin,fetch(). Vaatler durumunda aynı vaatlerin tüm işleyicileri tek bir "komut dosyası" olarak karıştırılır..reject-promise:resolve-promiseuyarınca, ancak ret için.classic-script: Komut dosyası değerlendirmesi (ör.<script>veyaimport())module-script:classic-scriptile aynıdır, ancak modül komut dosyaları için geçerlidir.
- Bu komut dosyası için zamanlama verilerini ayırın:
startTime: Giriş işlevinin çağrıldığı zaman.duration:startTimeile sonraki mikro görev sırasının işlenmesi arasındaki süre.executionStart: Derlemeden sonraki süre.forcedStyleAndLayoutDuration: Bu işlevin içinde zorunlu düzeni/stili işlemek için harcanan toplam süre (harcama bölümüne bakın).pauseDuration: Senkronize işlemlerde "duraklatma" sırasında harcanan toplam süre (uyarı, eşzamanlı XHR).
- Komut dosyası kaynağı ayrıntıları:
sourceURL: Varsa komut dosyası kaynağı adı.sourceFunctionName: Varsa komut dosyası işlevinin adı.sourceCharPosition: Varsa komut dosyasının karakter konumu (veya bulunmadıysa -1).
windowAttribution: Uzun animasyon çerçevesinin içinde bulunduğu kapsayıcı (üst düzey doküman veya<iframe>).window: Aynı kaynak penceresine referans.
Kaynak girişleri, geliştiricilerin uzun animasyon çerçevesindeki her bir komut dosyasının nasıl çağrıldığını, çağıran komut dosyasındaki karakter konumuna kadar tam olarak bilmelerini sağlar. Bu, bir JavaScript kaynağında uzun animasyon çerçevesiyle sonuçlanan tam konumu verir.
long-animation-frame performans girişi örneği
Tek bir komut dosyası içeren eksiksiz bir long-animation-frame performans girişi örneği şöyledir:
{
"blockingDuration": 0,
"duration": 60,
"entryType": "long-animation-frame",
"firstUIEventTimestamp": 11801.099999999627,
"name": "long-animation-frame",
"renderStart": 11858.800000000745,
"scripts": [
{
"duration": 45,
"entryType": "script",
"executionStart": 11803.199999999255,
"forcedStyleAndLayoutDuration": 0,
"invoker": "DOMWindow.onclick",
"invokerType": "event-listener",
"name": "script",
"pauseDuration": 0,
"sourceURL": "https://web.dev/js/index-ffde4443.js",
"sourceFunctionName": "myClickHandler",
"sourceCharPosition": 17796,
"startTime": 11803.199999999255,
"window": [Window object],
"windowAttribution": "self"
}
],
"startTime": 11802.400000000373,
"styleAndLayoutStart": 11858.800000000745
}
Bu durum, görüleceği gibi, web sitelerinin gecikmeli oluşturma güncellemelerinin nedenini anlayabilmesi için eşi benzeri görülmemiş miktarda veri sağlamaktadır.
Uzun Animasyon Çerçeveleri API'sini etkinleştirme
Long Animation Frames API, Chrome 123'te varsayılan olarak etkinleştirilmiştir.
Alanda Uzun Animasyon Çerçeveleri API'sini kullanma
Lighthouse gibi araçlar, sorunları keşfetmek ve yeniden oluşturmak için kullanışlı olsa da yalnızca saha verilerinin sağlayabileceği, kullanıcı deneyiminin önemli yönlerini kaçırabilecek laboratuvar araçlarıdır. Uzun Animasyon Çerçeveleri API'si, Uzun Görevler API'sinin alamadığı kullanıcı etkileşimleri için önemli bağlamsal veriler toplamak amacıyla alanda kullanılabilir. Bu, etkileşimle ilgili başka şekilde keşfedemeyebileceğiniz sorunları ortaya çıkarmanıza ve yeniden oluşturmanıza yardımcı olabilir.
Önerilen stratejilerden bazıları aşağıda listelenmiştir. Ancak Chrome ekibi, bu API ile ilgili geri bildirim almak ve geliştiricilerin ve RUM sağlayıcıların, API'nın sağladığı bilgileri kullanırken nasıl bir deneyim yaşayacaklarını öğrenmek istemektedir.
Uzun Animasyon Çerçeveleri API desteğini algılayan özellik
API'nin desteklenip desteklenmediğini test etmek için aşağıdaki kodu kullanabilirsiniz:
if (PerformanceObserver.supportedEntryTypes.includes('long-animation-frame')) {
// Monitor LoAFs
}
Uzun animasyon kareleri henüz varsayılan olarak desteklenmediğinden bu geçiş durumunda aşağıdaki alternatif kullanılabilir:
if ('PerformanceLongAnimationFrameTiming' in window) {
// Monitor LoAFs
}
Uzun animasyon verilerini analiz uç noktasına geri raporlama
Gösterildiği gibi, LoAF performans girişi değerli bilgiler içermektedir. Stratejilerden biri, tüm LoAF'leri izlemek ve belirli bir eşiğin üzerindekileri daha sonra analiz için tekrar analiz uç noktasına yönlendirmektir:
const REPORTING_THRESHOLD_MS = 150;
const observer = new PerformanceObserver(list => {
for (const entry of list.getEntries()) {
if (entry.duration > REPORTING_THRESHOLD_MS) {
// Example here logs to console, but could also report back to analytics
console.log(entry);
}
}
});
observer.observe({ type: 'long-animation-frame', buffered: true });
Uzun animasyon karesi girişleri oldukça büyük olabileceğinden, girişteki hangi verilerin Analytics'e gönderilmesi gerektiğine geliştiriciler karar vermelidir. Örneğin, girişin özet zamanları ve belki de komut dosyası adları ya da gerekli olduğu kabul edilebilecek başka minimum bağlamsal veri kümeleri.
En kötü uzun animasyon karelerini gözlemleme
Siteler, işaretlenmesi gereken veri hacmini azaltmak için en uzun animasyon karesinde (veya karelerinde) veri toplamak isteyebilir. Dolayısıyla, bir sayfanın kaç animasyon çerçevesi olursa olsun, yalnızca en kötü olana, beşine veya kesinlikle gerekli olan çok sayıda uzun animasyon çerçevesine ait veriler geri işaretlenir.
MAX_LOAFS_TO_CONSIDER = 10;
let longestBlockingLoAFs = [];
const observer = new PerformanceObserver(list => {
longestBlockingLoAFs = longestBlockingLoAFs.concat(list.getEntries()).sort(
(a, b) => b.blockingDuration - a.blockingDuration
).slice(0, MAX_LOAFS_TO_CONSIDER);
});
observer.observe({ type: 'long-animation-frame', buffered: true });
İşaretlenen veriler uygun zamanda (ideal olarak visibilitychange etkinliğinde) analizlere geri gönderilir. Yerel test için console.table ürününü düzenli aralıklarla kullanabilirsiniz:
console.table(longestBlockingLoAFs);
En uzun INP etkileşimine bağlantı oluşturma
En kötü LoAF'leri gözlemlemenin bir uzantısı olarak, INP girişine karşılık gelen LoAF kareleri, INP'nin nasıl iyileştirileceğiyle ilgili daha fazla ayrıntı vermek için ilişkilendirme verisi olarak kullanılabilir.
Şu anda bir INP girişini ilgili LoAF girişine veya girişlerine bağlamak için doğrudan bir API yoktur ancak bunu, her birinin başlangıç ve bitiş zamanlarını karşılaştırarak kodda yapmak mümkündür (bu örnek komut dosyasına bakın).
Etkileşimlerle birlikte uzun animasyon karelerini raporlama
Daha az kod gerektiren alternatif bir yaklaşım da, çerçeve sırasında etkileşimin gerçekleştiği (firstUIEventTimestamp değerinin varlığıyla algılanabilir) her zaman en büyük (veya üstteki X en büyük) LoAF girişlerini göndermektir. Çoğu durumda bu, belirli bir ziyaret için INP etkileşimini içerir. Nadiren de olsa düzeltilmesi gereken uzun etkileşimler diğer kullanıcılar için INP etkileşimi olabilir.
Aşağıdaki kod, kare sırasında bir etkileşimin gerçekleştiği 150 milisaniyeden uzun tüm LoAF girişlerini günlüğe kaydeder. Burada 150, 200 milisaniyelik "iyi" INP eşiğinden biraz daha küçük olduğu için seçilmiştir. İhtiyaçlarınıza bağlı olarak daha yüksek veya daha düşük bir değer seçebilirsiniz.
const REPORTING_THRESHOLD_MS = 150;
const observer = new PerformanceObserver(list => {
for (const entry of list.getEntries()) {
if (entry.duration > REPORTING_THRESHOLD_MS &&
entry.firstUIEventTimestamp > 0
) {
// Example here logs to console, but could also report back to analytics
console.log(entry);
}
}
});
observer.observe({ type: 'long-animation-frame', buffered: true });
Uzun animasyon karelerinde yaygın kalıpları belirleme
Alternatif bir strateji, uzun animasyon karesi girişlerinde en çok görünen yaygın komut dosyalarına bakmaktır. Tekrarlanan suçların belirlenmesi için veriler komut dosyası ve/veya karakter konumu düzeyinde raporlanabilir.
Bu, özellikle performans sorunlarına neden olan temaların veya eklentilerin çeşitli sitelerde daha kolay tanımlanabildiği özelleştirilebilir platformlarda işe yarayabilir.
Uzun animasyon çerçevelerinde yaygın komut dosyalarının (veya üçüncü taraf kaynaklarının) yürütülme süresi özetlenip raporlanabilir ve bir site ya da site koleksiyonundaki uzun animasyon karelerine en çok katkıda bulunanları belirlemek için raporlanabilir. Örneğin URL'lere bakmak için:
const observer = new PerformanceObserver(list => {
const allScripts = list.getEntries().flatMap(entry => entry.scripts);
const scriptSource = [...new Set(allScripts.map(script => script.sourceURL))];
const scriptsBySource= scriptSource.map(sourceURL => ([sourceURL,
allScripts.filter(script => script.sourceURL === sourceURL)
]));
const processedScripts = scriptsBySource.map(([sourceURL, scripts]) => ({
sourceURL,
count: scripts.length,
totalDuration: scripts.reduce((subtotal, script) => subtotal + script.duration, 0)
}));
processedScripts.sort((a, b) => b.totalDuration - a.totalDuration);
// Example here logs to console, but could also report back to analytics
console.table(processedScripts);
});
observer.observe({type: 'long-animation-frame', buffered: true});
Bu çıkışa örnek olarak şunlar verilebilir:
(index) |
sourceURL |
count |
totalDuration |
|---|---|---|---|
0 |
'https://example.consent.com/consent.js' |
1 |
840 |
1 |
'https://example.com/js/analytics.js' |
7 |
628 |
2 |
'https://example.chatapp.com/web-chat.js' |
1 |
5 |
Araçlarda Uzun Animasyon Çerçeveleri API'sini kullanma
API, yerel hata ayıklama için ek geliştirici araçlarına da olanak tanıyabilir. Lighthouse ve Chrome Geliştirici Araçları gibi bazı araçlar bu verilerin çoğunu daha alt düzey izleme ayrıntılarını kullanarak toplayabilse de bu üst düzey API'ye sahip olmak diğer araçların bu verilere erişmesine olanak tanıyabilir.
Geliştirici Araçları'nda uzun animasyon karesi verilerini görüntüleme
performance.measure() API'sini kullanarak Geliştirici Araçları'nda uzun animasyon kareleri gösterebilirsiniz. Bu kareler daha sonra performans iyileştirmeleri için çalışmalarınızı nereye yoğunlaştıracağınızı göstermek üzere performans izlemelerindeki DevTools kullanıcı zamanlamaları kanalında gösterilir:
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
performance.measure('LoAF', {
start: entry.startTime,
end: entry.startTime + entry.duration,
});
}
});
observer.observe({ type: 'long-animation-frame', buffered: true });
Bu API uzun vadede fayda sağlarsa büyük olasılıkla Geliştirici Araçları'na dahil edilecektir. Ancak bu süre zarfında, önceki kod snippet'i API'nin burada gösterilmesine olanak tanıyacaktır.
Diğer geliştirici araçlarında uzun animasyon karesi verilerini kullanma
Web Verileri uzantısı, performans sorunlarını teşhis etmek için özet hata ayıklama bilgilerinin günlüğe kaydedilmesinde gerekli değeri göstermiştir. API kullanıma sunuldu. Bu tür araçlar, geliştiricilerin çalışmalarını nerede yoğunlaşacaklarını bilmelerine yardımcı olacak verileri daha kolay bir şekilde ortaya çıkarabilir. Ayrıca sürüm 4'te bu özelliği web vitals JavaScript kitaplığına da eklemeyi planlıyoruz.
Otomatik test araçlarında uzun animasyon karesi verilerini kullanma
Benzer şekilde otomatikleştirilmiş test araçları (örneğin CI/CD ardışık düzenlerinde), çeşitli test paketlerini çalıştırırken uzun animasyon karelerini ölçerek olası performans sorunlarıyla ilgili ayrıntıları ortaya çıkarabilir.
SSS
Bu API ile ilgili sık sorulan sorulardan bazıları şunlardır:
Uzun Görevler API'sının kapsamını genişletmeye veya yinelemeye ne dersiniz?
Bu, potansiyel duyarlılık sorunlarının benzer ancak sonuçta farklı bir ölçümünü bildirmeye alternatif bir yaklaşımdır. Mevcut kullanım alanlarının kesintiye uğramaması için mevcut Long Tasks API'yi kullanan sitelerin çalışmaya devam etmesi önemlidir.
Uzun Görevler API'si LoAF'nin bazı özelliklerinden (daha iyi bir ilişkilendirme modeli gibi) yararlanabilse de, görevler yerine çerçevelere odaklanmanın, bunu mevcut Uzun Görevler API'sinden temelde farklı bir API haline getiren birçok avantaj sunduğunu düşünüyoruz.
Bu hizmet, Uzun Görevler API'sinin yerini alacak mı?
Long Animation Frames API'nin uzun görevleri ölçmek için daha iyi ve daha eksiksiz bir API olduğuna inanmakla birlikte, şu an için Long Tasks API'yi kullanımdan kaldırma gibi bir planımız bulunmamaktadır.
Geri bildirim istendi
Geri bildirimleri GitHub Sorunları listesinden sağlanabilir veya Chrome'un API'yi uygulamasına ilişkin hatalar Chrome'un sorun izleyicisine kaydedilebilir.
Sonuç
Uzun Animasyon Çerçeveleri API'si, önceki Uzun Görevler API'sına kıyasla birçok potansiyel avantajı olan heyecan verici yeni bir API.
Bu özelliğin, INP tarafından yapılan ölçümlere göre yanıt verme sorunlarını çözme konusunda önemli bir araç olduğu kanıtlanmıştır. INP, optimize edilmesi zor bir metriktir. Bu API, Chrome ekibinin geliştiriciler için sorunları daha kolay tespit edip ele almayı amaçladıkları yollardan biridir.
Ancak Uzun Animasyon Çerçeveleri API'sinin kapsamı INP'nin ötesine geçer ve web sitesinin kullanıcı deneyiminin genel olarak sorunsuz olmasını etkileyebilecek yavaş güncellemelerin diğer nedenlerini belirlemeye yardımcı olabilir.