Resize Observer JavaScript API’nin Kullanımı: Element Boyut Değişikliklerini Etkin Bir Şekilde İzleme
Web uygulamaları giderek daha dinamik ve duyarlı hale geldikçe, kullanıcı arayüzlerinin çeşitli ekran boyutlarına ve cihazlara uyum sağlaması zorunlu hale gelmiştir. Bu uyum sürecinde, bir DOM elementinin boyutunun değiştiğini algılamak ve bu değişikliğe göre arayüzü güncellemek kritik bir öneme sahiptir. Geleneksel olarak bu tür boyut değişikliklerini izlemek, bazı zorlukları ve performans sorunlarını beraberinde getiriyordu. İşte bu noktada, modern web geliştiricilerinin imdadına yetişen güçlü bir araç olan Resize Observer JavaScript API devreye giriyor.
Bu makalede, Resize Observer API’nin ne olduğunu, neden kullanılması gerektiğini, nasıl çalıştığını, detaylı kullanım örneklerini, olası sınırlamalarını ve en iyi uygulamalarını derinlemesine inceleyeceğiz. Amacımız, bu API’yi kullanarak daha performanslı, duyarlı ve bakımı kolay web uygulamaları geliştirmeniz için size kapsamlı bir rehber sunmaktır.
Giriş: Neden Boyut Değişikliklerini İzlemeye İhtiyaç Duyarız?
Günümüz web dünyasında, kullanıcı deneyimi (UX) her şeyden önce gelir. Mükemmel bir UX sunmanın temel taşlarından biri de uygulamanın farklı bağlamlarda (farklı cihazlar, pencere boyutları, dinamik içerik yüklemeleri vb.) tutarlı ve işlevsel bir şekilde çalışmasıdır. Bu bağlamda, bir web sayfasındaki elementlerin boyutlarının değiştiğini bilmek ve buna tepki vermek birçok senaryoda hayati önem taşır:
* Duyarlı Tasarım (Responsive Design): Sayfanın genel pencere boyutu değiştiğinde veya bir yan menü açılıp kapandığında, içerik alanlarının genişliği otomatik olarak ayarlanmalı, metin boyutları güncellenmeli veya bileşenlerin düzeni yeniden düzenlenmelidir.
* Dinamik Bileşenler: Bir grafik veya çizelge bileşeni, kapsayıcısının boyutları değiştiğinde kendini yeniden çizmelidir. Bir video oynatıcı, kapsayıcısının boyutuna göre oynatma alanını ayarlamalıdır.
* Performans Optimizasyonu: Yalnızca görünür alandaki öğeleri yükleyen sanal listeler veya sonsuz kaydırma mekanizmaları, öğelerin yüksekliklerinin dinamik olarak değiştiğini algılayarak doğru kaydırma konumunu ve görünür öğeleri hesaplamalıdır.
* Sürükle-Bırak (Drag-and-Drop) Arayüzleri: Bir öğe sürüklendiğinde, bırakılacak alanların boyutları veya konumları değişebilir ve bu değişikliklere göre görsel geri bildirimler sağlanmalıdır.
Geleneksel olarak bu tür boyut değişikliklerini izlemek için window.onresize olayı veya setInterval ile periyodik boyut kontrolleri gibi yöntemler kullanılırdı. Ancak bu yöntemlerin ciddi dezavantajları vardı:
* window.onresize: Yalnızca pencerenin boyutu değiştiğinde tetiklenir. Pencere boyutu değişmeden bir elementin (örneğin bir yan menü açılıp kapandığında) boyutu değiştiğinde bu olayı yakalayamaz. Ayrıca, pencere boyutundaki her piksel değişikliği için tetiklendiğinden performans sorunlarına yol açabilir.
* setInterval ile Periyodik Kontroller: Belirli aralıklarla elementin boyutunu manuel olarak kontrol etmek, gereksiz hesaplamalara ve layout thrashing’e neden olabilir. Doğru aralığı belirlemek zordur ve her zaman güncel bilgiye sahip olmayabilir.
MutationObserver: DOM ağacındaki değişiklikleri izlemek için tasarlanmıştır, ancak bir elementin boyut* değişikliğini doğrudan izlemez. Boyut değişiklikleri genellikle CSS veya JavaScript tarafından tetiklenen stil değişikliklerinden kaynaklanır ve MutationObserver bu tür stil değişikliklerini doğrudan değil, ancak attributeFilter ile style özniteliğini izleyerek veya childList ile DOM yapısındaki değişiklikleri izleyerek dolaylı yoldan yakalayabilir, ki bu da karmaşık ve verimsizdir.
Resize Observer, tüm bu zorlukları ele alarak, herhangi bir DOM elementinin boyutundaki değişiklikleri asenkron ve performanslı bir şekilde izlemek için modern ve standart bir çözüm sunar.
Resize Observer Nedir?
Resize Observer API, belirli bir DOM elementinin “içerik kutusu” (content box) veya “kenarlık kutusu” (border box) boyutundaki değişiklikleri asenkron olarak izleyen bir JavaScript arayüzüdür. Bu API, bir elementin boyutunda bir değişiklik olduğunda otomatik olarak bir geri çağırma (callback) fonksiyonunu tetikler.
window.onresize‘dan farklı olarak, Resize Observer yalnızca izlediği elementin boyutu değiştiğinde tetiklenir. Bu, onu çok daha verimli ve hedefe yönelik bir çözüm haline getirir. API, tarayıcı tarafından optimize edilmiş bir şekilde çalışır ve layout thrashing gibi performans sorunlarını en aza indirmeye yardımcı olur.
Temel Özellikleri:
* Element Odaklı: Yalnızca belirli bir DOM elementinin boyutunu izler, tüm pencerenin değil.
* Asenkron: Boyut değişiklikleri tespit edildiğinde, callback fonksiyonu bir mikro görev (microtask) olarak sıraya alınır ve tarayıcının render döngüsünden sonra, ancak bir sonraki render döngüsünden önce çalıştırılır. Bu, callback içinde güncel layout bilgilerine erişebileceğiniz anlamına gelir.
* Performanslı: Tarayıcı, boyut değişikliklerini dahili olarak optimize edilmiş bir şekilde izler. Gereksiz tetiklenmeleri önler.
* Esnek: CSS, JavaScript veya tarayıcı penceresinin yeniden boyutlandırılması gibi herhangi bir nedenle oluşan boyut değişikliklerini yakalar.
Resize Observer, modern web uygulamalarında duyarlı bileşenler oluşturmak için vazgeçilmez bir araç haline gelmiştir.
Neden Resize Observer Kullanmalıyız?
Resize Observer’ın sunduğu avantajlar, onu eski yöntemlere göre çok daha üstün kılar:
Performans Avantajları
window.onresize olayı, pencere boyutu değiştiğinde her piksel değişikliği için tetiklenebilir ve bu da pahalı DOM manipülasyonları veya yeniden çizim işlemleri yapıldığında ciddi performans sorunlarına yol açabilir. Resize Observer ise sadece izlediği elementin boyutu değiştiğinde tetiklenir ve bu tetiklenme, tarayıcının render döngüsüne entegre edilmiş optimize edilmiş bir süreçle gerçekleşir. Bu, gereksiz hesaplamaları ve layout/paint işlemlerini önler.
Doğruluk ve Güvenilirlik
Resize Observer, elementin gerçek boyut değişikliğini yakalar. Bu değişiklikler CSS tarafından (örneğin width: 100% veya flex-grow ile), JavaScript tarafından (element.style.width = '200px') veya hatta kullanıcının tarayıcı penceresini yeniden boyutlandırmasıyla bile tetiklenebilir. API, bu değişikliklerin tümünü güvenilir bir şekilde algılar.
Esneklik
Herhangi bir HTML elementini izleyebilir. Bir div, img, canvas, iframe veya özel bir bileşen olsun, Resize Observer ile boyut değişikliklerini kolayca takip edebilirsiniz.
Karmaşıklığı Azaltma
Manuel boyut kontrolü, setTimeout veya setInterval ile debouncing/throttling uygulamaya çalışmak karmaşık ve hataya açık olabilir. Resize Observer, bu karmaşıklığı soyutlayarak size temiz ve yönetilebilir bir API sunar.
Örnek Senaryolar
Resize Observer’ın faydalarını daha iyi anlamak için bazı pratik kullanım senaryolarına göz atalım:
* Dinamik Grafik ve Çizelgeler: Bir Chart.js veya D3.js grafiğini içeren bir div‘in boyutu değiştiğinde, grafiği otomatik olarak yeniden çizmek ve verileri yeni boyutlara göre ölçeklendirmek için Resize Observer kullanabilirsiniz.
* Video Oynatıcıların veya Medya Bileşenlerinin Responsive Hale Getirilmesi: Bir video oynatıcının veya resim galerisinin kapsayıcısının boyutu değiştiğinde, medya içeriğini doğru en boy oranında ve boyutta yeniden konumlandırmak veya ölçeklendirmek.
* Sürükle-Bırak Arayüzlerinde Elementlerin Yerleşimi: Sürüklenen bir öğe, bırakılacak alanın boyutunu değiştirdiğinde, diğer öğelerin veya yer tutucuların konumunu dinamik olarak ayarlamak.
* Sanal Listeler veya Sonsuz Kaydırma (Virtual Lists/Infinite Scroll): Yalnızca görünür öğeleri DOM’a render eden listelerde, öğelerin dinamik yüksekliklere sahip olması durumunda, kapsayıcının veya öğelerin boyut değişikliklerini izleyerek doğru kaydırma pozisyonunu ve görünür öğe setini hesaplamak.
* Metin Sığdırma (Text Fitting) Algoritmaları: Bir metin bloğunun kapsayıcısının boyutu değiştiğinde, metin boyutunu veya satır yüksekliğini otomatik olarak ayarlayarak metnin her zaman kapsayıcıya sığmasını sağlamak.
* Yan Menülerin veya Panellerin Dinamik Olarak Genişlemesi/Daralması: Bir yan menü açıldığında veya kapandığında, ana içerik alanının genişliği değişir. Ana içerik alanının bu boyutsal değişikliğe göre kendini ayarlaması için Resize Observer kullanılabilir.
Bu senaryolar, Resize Observer’ın modern web uygulamalarında ne kadar temel bir rol oynayabileceğini göstermektedir.
Resize Observer Nasıl Çalışır?
Resize Observer API’sini kullanmak oldukça basittir. Temel olarak üç ana adımdan oluşur: bir ResizeObserver örneği oluşturmak, izlenecek elementleri belirtmek ve izlemeyi durdurmak.
Temel Yapı
// 1. ResizeObserver örneği oluşturma
const myObserver = new ResizeObserver(entries => {
// 2. Boyut değişiklikleri algılandığında çalışacak callback fonksiyonu
for (let entry of entries) {
// entry.target: Boyutu değişen DOM elementi
// entry.contentRect: Elementin content-box boyutlarını içerir
// entry.borderBoxSize: Elementin border-box boyutlarını içerir (dizi)
// entry.contentBoxSize: Elementin content-box boyutlarını içerir (dizi)
console.log(Element: ${entry.target.id || entry.target.tagName});
console.log(Content Box Width: ${entry.contentRect.width}px);
console.log(Content Box Height: ${entry.contentRect.height}px);
// Alternatif olarak, daha modern boyut bilgileri için:
if (entry.contentBoxSize) {
for (const boxSize of entry.contentBoxSize) {
console.log(Inline Size (Content Box): ${boxSize.inlineSize}px);
console.log(Block Size (Content Box): ${boxSize.blockSize}px);
}
}
}
});
// 3. İzlenecek elementi/elementleri belirtme
const myElement = document.getElementById('myResizableDiv');
if (myElement) {
myObserver.observe(myElement);
}
// Birden fazla elementi izlemek isterseniz:
const anotherElement = document.getElementById('anotherDiv');
if (anotherElement) {
myObserver.observe(anotherElement);
}
// İzlemeyi durdurma
// myObserver.unobserve(myElement); // Belirli bir elementi durdurur
// myObserver.disconnect(); // Observer'ın izlediği tüm elementleri durdururCallback Fonksiyonu
ResizeObserver‘ın constructor’ına ilettiğiniz callback fonksiyonu, izlenen elementlerden birinin boyutu değiştiğinde tetiklenir. Bu fonksiyon iki argüman alır:
1. entries: Bir ResizeObserverEntry nesneleri dizisi. Bu dizi, boyutları değişen her bir elementi temsil eden nesneleri içerir. Aynı anda birden fazla elementin boyutu değişmişse, bu dizide birden fazla giriş olacaktır.
2. observer: Callback’i tetikleyen ResizeObserver örneğinin kendisi. Bu, callback içinde unobserve veya disconnect gibi yöntemleri çağırmanız gerektiğinde kullanışlıdır.
ResizeObserverEntry Yapısı
entries dizisindeki her bir ResizeObserverEntry nesnesi, boyutu değişen element hakkında ayrıntılı bilgi sağlar:
* target: Boyutu değişen DOM elementinin kendisi. Bu, observer.observe() metoduna ilettiğiniz elementtir.
* contentRect: Elementin content-box‘ının (padding ve border hariç, içeriğin kapladığı alan) boyutlarını ve konumunu içeren bir DOMRectReadOnly nesnesi. Bu nesne x, y, width, height, top, right, bottom, left gibi özellikleri içerir.
* contentBoxSize: Elementin content-box‘ının boyutlarını ResizeObserverSize nesneleri dizisi olarak verir. Genellikle bu dizide tek bir ResizeObserverSize nesnesi bulunur. Daha modern ve esnek bir boyut bilgisidir.
* borderBoxSize: Elementin border-box‘ının (padding ve border dahil, margin hariç) boyutlarını ResizeObserverSize nesneleri dizisi olarak verir. Genellikle bu dizide tek bir ResizeObserverSize nesnesi bulunur.
* devicePixelContentBoxSize: Elementin content-box‘ının cihaz pikseli cinsinden boyutlarını ResizeObserverSize nesneleri dizisi olarak verir. Daha az yaygın kullanılan, gelişmiş senaryolar için bir özelliktir.
contentRect genellikle yeterli olsa da, contentBoxSize ve borderBoxSize daha yeni ve geleceğe dönük yaklaşımlar sunar, özellikle de yazma modu (writing mode) gibi CSS özellikleri düşünüldüğünde.
ResizeObserverSize Nedir?
ResizeObserverSize nesnesi, elementin boyutlarını mantıksal bir şekilde ifade eder:
* inlineSize: Elementin yazma moduna (writing mode) göre yatay boyutu. Çoğu Batı dilinde bu, width‘e karşılık gelir.
* blockSize: Elementin yazma moduna göre dikey boyutu. Çoğu Batı dilinde bu, height‘a karşılık gelir.
Bu özellikler, width ve height‘a göre daha evrenseldir çünkü CSS writing-mode özelliği (örneğin dikey metinler için) elementin fiziksel boyutlarını değiştirmeden mantıksal “yatay” ve “dikey” yönlerini değiştirebilir. Çoğu durumda, inlineSize ve blockSize sırasıyla width ve height ile aynı değerleri verecektir.
Kullanım Örnekleri
Şimdi Resize Observer’ın farklı senaryolarda nasıl kullanılabileceğine dair pratik örneklere geçelim.
Basit Bir İzleyici Oluşturma
Bir div elementinin boyutunu izleyelim ve boyut değiştikçe konsola yeni boyutları yazdıralım. Elementin boyutunu manuel olarak veya CSS resize özelliği ile değiştirebiliriz.
Resize Observer Basit Örnek
Bu div'in boyutunu sağ alt köşesinden sürükleyerek değiştirebilirsiniz.
Boyut değişiklikleri konsola yazılacaktır.
Bu örnekte, resize: both CSS özelliği sayesinde kullanıcı div‘in boyutunu manuel olarak değiştirebilir. Her boyut değişikliğinde, resizeObserver tetiklenir ve yeni boyutlar konsola yazılır.
Birden Fazla Elementi İzleme
Aynı ResizeObserver örneğini kullanarak birden fazla elementi izleyebilir ve her birinin boyut değişikliklerini ayrı ayrı işleyebilirsiniz.
Resize Observer Çoklu Element Örnek
Kutu 1
Kutu 2
Kutu 3
Güncel Boyutlar:
Kutu 1: Yükleniyor...
Kutu 2: Yükleniyor...
Kutu 3: Yükleniyor...
Bu örnekte, üç farklı div elementi aynı ResizeObserver örneği tarafından izlenmektedir. Callback fonksiyonu içinde entries dizisi döngüye alınarak her bir değişen elementin ID’si ve yeni boyutları alınır ve hem konsola yazılır hem de sayfadaki bilgi kutularına yansıtılır.
Özel İşlevsellik Ekleme: Dinamik Sınıf Yönetimi
Bir elementin boyutu belirli bir eşiğin altına düştüğünde veya üzerine çıktığında CSS sınıfı ekleyip çıkararak görsel değişiklikler yapabiliriz.
Resize Observer Dinamik Sınıf Örnek
Bu div'in boyutu değiştikçe, boyutuna göre farklı CSS sınıfları uygulanacaktır.
Mevcut boyut durumu: Yükleniyor...
Bu örnek, dynamicDiv‘in genişliği ve yüksekliğine göre small, medium veya large CSS sınıflarını dinamik olarak ekleyip çıkarır. Bu sayede, elementin görsel stilini boyutuna göre otomatik olarak ayarlayabiliriz.
React/Vue Gibi Framework’lerle Kullanım
Modern JavaScript framework’lerinde ResizeObserver‘ı kullanırken, observer’ı component’in yaşam döngüsüyle doğru bir şekilde yönetmek önemlidir. Özellikle component unmount edildiğinde observer.disconnect() veya observer.unobserve() çağrısı yaparak bellek sızıntılarını önlemelisiniz.
React Örneği (Custom Hook ile):
import React, { useRef, useEffect, useState, useCallback } from 'react';
function useResizeObserver(ref, callback) {
useEffect(() => {
const currentRef = ref.current;
if (!currentRef) return;
const observer = new ResizeObserver(entries => {
// Callback'i debouncing/throttling ile sarmak isteyebilirsiniz
// veya sadece doğrudan çağırabilirsiniz. ResizeObserver zaten
// bir miktar optimizasyon içerir.
callback(entries);
});
observer.observe(currentRef);
return () => {
observer.unobserve(currentRef); // Sadece bu elementi durdur
// observer.disconnect(); // Eğer tek bir element izliyorsanız ve hook her çalıştığında yeni observer oluşturuyorsanız bu da çalışır.
};
}, [ref, callback]); // ref ve callback bağımlılıklar arasına eklenmeli
}
function ResizableBox() {
const boxRef = useRef(null);
const [size, setSize] = useState({ width: 0, height: 0 });
const handleResize = useCallback(entries => {
if (entries[0]) {
const { width, height } = entries[0].contentRect;
setSize({ width: Math.floor(width), height: Math.floor(height) });
}
}, []); // useCallback ile callback'i memoize et
useResizeObserver(boxRef, handleResize);
useEffect(() => {
// İlk renderda veya resize observer tetiklenmeden önce
// başlangıç boyutlarını ayarlamak için de kullanışlı olabilir.
if (boxRef.current) {
const { width, height } = boxRef.current.getBoundingClientRect();
setSize({ width: Math.floor(width), height: Math.floor(height) });
}
}, []); // Sadece bir kere çalışsın
return (
Bu kutuyu yeniden boyutlandırın.
Mevcut Boyut: {size.width}px x {size.height}px
);
}
export default ResizableBox;Bu React örneği, tekrar kullanılabilir bir useResizeObserver custom hook’u oluşturarak ResizeObserver‘ı component’e entegre etmenin temiz bir yolunu gösterir. useEffect hook’u, component mount edildiğinde observer’ı başlatır ve component unmount edildiğinde temizleme fonksiyonu (return içindeki) observer’ı durdurur.
options Parametresi: İzleme Kutucukları (Observation Boxes)
observer.observe(element, options) metoduna ikinci bir argüman olarak bir options nesnesi iletebilirsiniz. Bu nesnenin en önemli özelliği box özelliğidir. box özelliği, Resize Observer’ın elementin hangi kutucuğunun boyut değişikliklerini izlemesi gerektiğini belirler.
box için üç olası değer vardır:
1. 'content-box' (Varsayılan): Bu, elementin içeriğinin kapladığı alanı (padding ve border hariç) izler. CSS box-sizing: content-box ile aynıdır. ResizeObserverEntry.contentRect ve ResizeObserverEntry.contentBoxSize bu kutucuğun boyutlarını yansıtır.
2. 'border-box': Bu, elementin içeriği, padding’i ve border’ının kapladığı alanı (margin hariç) izler. CSS box-sizing: border-box ile aynıdır. ResizeObserverEntry.borderBoxSize bu kutucuğun boyutlarını yansıtır.
3. 'device-pixel-content-box': Bu, elementin content-box‘ının cihaz pikseli cinsinden boyutlarını izler. Tarayıcının zoom seviyesi gibi faktörlerden etkilenir ve daha spesifik, düşük seviyeli senaryolar için kullanılır. ResizeObserverEntry.devicePixelContentBoxSize bu kutucuğun boyutlarını yansıtır.
Neden farklı kutulara ihtiyaç duyarız?
box-sizing CSS özelliği, bir elementin width ve height değerlerinin padding ve border‘ı içerip içermediğini belirler.
* Eğer CSS’iniz box-sizing: content-box ise ve width: 100px olarak ayarlandıysa, elementin gerçek genişliği 100px + padding + border olacaktır. Bu durumda content-box 100px, border-box ise daha büyük olacaktır.
* Eğer CSS’iniz box-sizing: border-box ise ve width: 100px olarak ayarlandıysa, elementin gerçek genişliği 100px olacaktır ve padding ile border bu 100px içine dahil edilecektir. Bu durumda border-box 100px, content-box ise daha küçük olacaktır.
İhtiyacınıza göre hangi kutucuğun boyut değişikliklerini izleyeceğinizi seçmek, doğru ve tutarlı sonuçlar almanızı sağlar. Çoğu durumda, varsayılan 'content-box' yeterli olacaktır, ancak bir elementin border veya padding‘i değiştiğinde de tetiklenmek istiyorsanız 'border-box' kullanmak isteyebilirsiniz.
// Border-box değişikliklerini izleme örneği
const myDiv = document.getElementById('myDiv');
const observerForBorderBox = new ResizeObserver(entries => {
for (let entry of entries) {
if (entry.borderBoxSize && entry.borderBoxSize.length > 0) {
const borderBox = entry.borderBoxSize[0];
console.log(Border Box Yeni Boyut: ${borderBox.inlineSize}x${borderBox.blockSize});
}
}
});
observerForBorderBox.observe(myDiv, { box: 'border-box' });Resize Observer’ın Sınırlamaları ve Dikkat Edilmesi Gerekenler
Resize Observer güçlü bir araç olsa da, bazı sınırlamaları ve dikkat edilmesi gereken noktaları vardır:
document veya window‘u İzleyemezsiniz
Resize Observer, yalnızca belirli DOM elementlerinin boyut değişikliklerini izlemek için tasarlanmıştır. document veya window nesnelerini doğrudan observe() metoduna iletemezsiniz. Pencere boyut değişikliklerini izlemek için hala window.onresize olayını kullanmanız gerekmektedir. Ancak, document.body veya document.documentElement gibi elementleri izleyerek dolaylı yoldan pencere boyut değişikliklerini yakalayabilirsiniz, zira bunlar genellikle pencere boyutuyla birlikte yeniden boyutlanır.
Sonsuz Döngü Tehlikesi
Resize Observer callback’i içinde, izlediğiniz elementin boyutunu doğrudan değiştirirseniz, bu yeniden bir boyut değişikliği tetikleyebilir ve sonsuz bir döngüye girmenize neden olabilir.
Örnek (Yanlış Kullanım):
const problematicDiv = document.getElementById('problematicDiv');
const observer = new ResizeObserver(entries => {
for (let entry of entries) {
// Bu kod, div'in genişliğini değiştirir, bu da observer'ı yeniden tetikler.
// Sonsuz döngüye yol açar!
entry.target.style.width = entry.contentRect.width + 10 + 'px';
}
});
observer.observe(problematicDiv);Çözüm: Callback içinde boyut değişikliklerini doğrudan tetiklemekten kaçının. Eğer bir elementin boyutunu değiştirmek zorundaysanız, bunu dolaylı yollardan (örneğin CSS sınıfı ekleyerek) yapın veya boyut değişikliğinin yalnızca bir kez gerçekleştiğinden emin olmak için bir koşul ekleyin. Daha karmaşık senaryolarda requestAnimationFrame veya setTimeout kullanarak boyut değişikliklerini bir sonraki render döngüsüne erteleyebilirsiniz.
Mikro Görev Kuyruğu (Microtask Queue)
Resize Observer’ın callback fonksiyonu, tarayıcının layout ve paint işlemlerinden sonra, ancak bir sonraki render döngüsünden önce çalıştırılır. Bu, callback içinde güncel layout bilgilerine erişebileceğiniz anlamına gelir. Ancak, requestAnimationFrame ile karşılaştırıldığında, requestAnimationFrame render döngüsünden önce çalışır. Çoğu zaman bu fark önemli değildir, ancak çok hassas animasyonlar veya layout hesaplamaları yapıyorsanız bu sırayı göz önünde bulundurmalısınız.
Cross-origin Iframe’ler
Güvenlik kısıtlamaları nedeniyle, farklı bir kaynaktan (cross-origin) yüklenmiş bir iframe içindeki elementleri doğrudan ResizeObserver ile izleyemezsiniz.
Gelişmiş Kullanım Senaryoları ve İpuçları
Resize Observer’ı daha verimli ve etkili kullanmak için bazı gelişmiş teknikler ve ipuçları:
Debounce/Throttle ile Kullanım
Resize Observer, zaten bir miktar dahili optimizasyon içerir ve window.onresize gibi olaylara göre daha az tetiklenir. Ancak, çok hızlı ve sık boyut değişiklikleri olan durumlarda (örneğin, bir kullanıcının pencereyi hızla sürüklemesi) callback fonksiyonunuzun aşırı sık çalışmasını önlemek için hala debounce veya throttle uygulamak isteyebilirsiniz.
function debounce(func, delay) {
let timeout;
return function(...args) {
const context = this;
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(context, args), delay);
};
}
const myObserver = new ResizeObserver(debounce(entries => {
// İşlemleri burada yap
console.log('Debounced Resize Observer Callback Tetiklendi!');
for (let entry of entries) {
console.log(${entry.target.id || entry.target.tagName}: ${entry.contentRect.width}x${entry.contentRect.height});
}
}, 100)); // 100ms gecikme
// Elementleri izlemeye başla
myObserver.observe(document.getElementById('someElement'));Genellikle ResizeObserver için debounce veya throttle doğrudan gerekli değildir, ancak callback içinde pahalı DOM manipülasyonları veya karmaşık hesaplamalar yapıyorsanız, performansı artırmak için düşünebilirsiniz.
Performans İzleme
Callback fonksiyonunuzun ne kadar sürdüğünü anlamak, performans sorunlarını tespit etmek için önemlidir. Tarayıcı geliştirici araçlarındaki Performans sekmesini kullanabilir veya JavaScript performance.now() veya performance.measure() API’lerini kullanabilirsiniz.
const myObserver = new ResizeObserver(entries => {
performance.mark('resizeObserverCallbackStart');
for (let entry of entries) {
// Yoğun işlemler burada
}
performance.mark('resizeObserverCallbackEnd');
performance.measure('Resize Observer Callback Duration', 'resizeObserverCallbackStart', 'resizeObserverCallbackEnd');
const measures = performance.getEntriesByName('Resize Observer Callback Duration');
if (measures.length > 0) {
console.log(Callback süresi: ${measures[0].duration.toFixed(2)} ms);
}
});Tarayıcı Desteği
Resize Observer API, modern tarayıcıların çoğunda geniş bir desteğe sahiptir. Chrome, Firefox, Safari, Edge ve Opera gibi güncel tarayıcıların büyük bir kısmı bu API’yi destekler.
Güncel tarayıcı desteği için [Can I use… Resize Observer](https://caniuse.com/?search=ResizeObserver) adresini kontrol edebilirsiniz.
Eski tarayıcılar veya belirli mobil tarayıcılar için desteğe ihtiyacınız varsa, bir polyfill kullanmanız gerekebilir. Popüler bir polyfill, resize-observer-polyfill paketidir.
npm install resize-observer-polyfillArdından, uygulamanızın giriş noktasında veya ihtiyacınız olan yerde import edebilirsiniz:
import ResizeObserver from 'resize-observer-polyfill';
// Sonra normal ResizeObserver gibi kullanabilirsiniz
window.ResizeObserver = window.ResizeObserver || ResizeObserver;Sonuç
Resize Observer API, modern web geliştiricileri için duyarlı ve performanslı kullanıcı arayüzleri oluşturmada vazgeçilmez bir araçtır. window.onresize gibi eski ve sınırlı yöntemlerin aksine, element bazında boyut değişikliklerini asenkron ve verimli bir şekilde izleyerek web uygulamalarını daha akıllı ve etkileşimli hale getirir.
Bu makalede ele aldığımız konuları özetleyecek olursak:
* Resize Observer, belirli bir DOM elementinin boyut değişikliklerini izlemek için tasarlanmıştır.
* Performanslıdır, çünkü yalnızca ilgili elementin boyutu değiştiğinde tetiklenir ve tarayıcı tarafından optimize edilmiş bir süreçle çalışır.
* Callback fonksiyonu, boyutları değişen elementler hakkında detaylı bilgi içeren ResizeObserverEntry nesneleri dizisi alır.
* content-box, border-box ve device-pixel-content-box gibi farklı kutucukları izleme seçenekleri sunar.
* Sonsuz döngüden kaçınmak ve window/document gibi nesneleri doğrudan izleyememe gibi sınırlamalarına dikkat etmek önemlidir.
* Modern framework’lerle (React, Vue) entegrasyonu kolaydır, ancak yaşam döngüsü yönetimini doğru yapmak gerekir.
* Geniş tarayıcı desteğine sahiptir ve eski tarayıcılar için polyfill mevcuttur.
Resize Observer’ı projelerinize dahil ederek, kullanıcı deneyimini önemli ölçüde iyileştirebilir, daha esnek ve bakımı kolay bileşenler oluşturabilirsiniz. Bu güçlü API’nin sunduğu olanakları keşfederek web uygulamalarınızı bir sonraki seviyeye taşıyın.