Web Uygulamanızı Anlama
Yüksek performanslı web uygulamaları, mükemmel bir kullanıcı deneyimi için olmazsa olmazdır. Web uygulamaları giderek daha karmaşık hale geldikçe, performans etkisini anlamak ilgi çekici bir deneyim oluşturmak için hayati önem taşır. Geçtiğimiz birkaç yıl içinde, ağın performansını, yükleme sürelerini vb. analiz etmeye yardımcı olması için tarayıcıda çok sayıda farklı API göründü. Ancak bunlar, uygulamanızı yavaşlatan şeyin ne olduğunu bulmak için yeterli esnekliği sağlayacak düzeyde ayrıntılı bilgiler vermeyebilir. Uygulamanızın nerede vakit geçirdiğini belirlemek üzere web uygulamanızı kullanmak için kullanabileceğiniz bir mekanizma sunan User Timing API'yi girin. Bu makalede, API'yi ve nasıl kullanıldığına dair örnekleri ele alacağız.
Ölçemediğiniz unsurları optimize edemezsiniz
Yavaş bir web uygulamasını hızlandırmanın ilk adımı, harcanan zamanı bulmaktır. JavaScript kod alanlarının zaman etkisini ölçmek, etkili noktaları belirlemenin ideal yoludur. Bu, performansı nasıl artıracağınızı bulmanın ilk adımıdır. Neyse ki User Timing API, JavaScript'inizin farklı bölümlerine API çağrıları eklemeniz ve daha sonra optimizasyon yapmanıza yardımcı olacak ayrıntılı zamanlama verileri çıkarmanız için bir yol sunar.
Yüksek Çözünürlük süresi ve now()
Hassasiyet, doğru zaman ölçümünün vazgeçilmez bir parçasıdır. Eskiden milisaniyelik ölçüme dayalı zamanlamamız vardı. Bu normaldi, ancak 60 FPS'lik olumsuzluklara sahip bir site oluşturmak, her karenin 16 ms'de çizilmesi gerektiği anlamına geliyordu. Dolayısıyla, yalnızca milisaniyelik doğrulukta, iyi bir analiz için gereken hassasiyete sahip olmazsınız. Modern tarayıcılarda yerleşik olarak bulunan yeni bir zamanlama türü olan Yüksek Çözünürlük Süresi'ni girin. Yüksek Çözünürlük Süresi, bize mikrosaniye çözünürlüğünde (öncekinden bin kat daha iyi) doğru olabilen kayan nokta zaman damgaları sağlıyor.
Web uygulamanızdaki geçerli saati almak için Performans arayüzünün bir uzantısını oluşturan now() yöntemini çağırın. Bunun nasıl yapılacağı aşağıdaki kodda gösterilmiştir:
var myTime = window.performance.now();
Web uygulamanızın yüklenme şekliyle ilgili olarak birkaç farklı zaman sunan PerformanceTiming adlı başka bir arayüz vardır. now() yöntemi, PerformanceTiming'te navigationStart olduğu andan itibaren geçen süreyi döndürür.
DOMHighResTimeStamp türü
Geçmişte web uygulamalarını zamanlamaya çalışırken Date.now() gibi bir DOMTimeStamp döndürüyordunuz. DOMTimeStamp, değeri olarak milisaniyelik bir tam sayı döndürür. Yüksek Çözünürlük süresi için gereken daha yüksek doğruluğu sağlamak amacıyla DOMHighResTimeStamp adlı yeni bir tür kullanıma sunuldu. Bu tür, süreyi milisaniye cinsinden döndüren bir kayan nokta değeridir. Ancak, kayan nokta olduğundan, değer kesirli milisaniyeleri temsil edebilir ve bu nedenle milisaniyenin binde biri oranında bir doğruluk sağlayabilir.
Kullanıcı Zamanlama Arayüzü
Artık yüksek çözünürlüklü zaman damgalarına sahip olduğumuza göre, zamanlama bilgilerini almak için Kullanıcı Zamanlaması arayüzünü kullanalım.
Kullanıcı Zamanlaması arayüzü, zamanın nerede harcandığını izlememize olanak tanıyan Hansel ve Gretel stili içerik haritası yolu sağlayabilen, uygulamamızın farklı yerlerinde yöntemler çağırmamızı sağlayan işlevler sağlar.
mark() kullanılıyor
mark() yöntemi, zamanlama analizi araç setimizin ana aracıdır. mark(), bizim için bir zaman damgası depolar. mark() ile ilgili en büyük fayda, zaman damgasını adlandırabilmemiz ve API'nin bu ad ile zaman damgasını tek bir birim olarak hatırlamasıdır.
Uygulamanızın çeşitli yerlerinden mark() numaralı telefonu aramak, web uygulamanızda bu "işarete" ulaşmak için ne kadar zaman harcadığınızı hesaplamanızı sağlar.
Spesifikasyonda, ilginç ve yeterince açıklayıcı olabilecek markalar için önerilen mark_fully_loaded, mark_fully_visible,mark_above_the_fold gibi çeşitli adlar belirtilmektedir.
Örneğin, aşağıdaki kodu kullanarak uygulamanın tam olarak yüklendiği zamanı işaret edebiliriz:
window.performance.mark('mark_fully_loaded');
Web uygulamamızda adlandırılmış işaretler belirleyerek çok sayıda zamanlama verisini toplayabilir ve uygulamanın ne yaptığını ve ne zaman yaptığını belirlemek için boş zaman verilerimizi analiz edebiliriz.
Ölçümler measure() ile hesaplanıyor
Bir dizi zamanlama işareti koyduktan sonra, bunlar arasında geçen süreyi öğrenmek istersiniz. Bunun için measure() yöntemini kullanırsınız.
measure() yöntemi, işaretler arasında geçen süreyi hesaplar. Ayrıca, işaretiniz ile PerformanceTiming arayüzündeki iyi bilinen etkinlik adları arasındaki süreyi de ölçebilirsiniz.
Örneğin, aşağıdaki gibi bir kod kullanarak DOM'un tamamlanmasından uygulamanızın durumunun tam olarak yüklenmesine kadar geçen süreyi hesaplayabilirsiniz:
window.performance.measure('measure_load_from_dom', 'domComplete', 'mark_fully_loaded');
measure() yöntemini çağırdığınızda sonucu, ayarladığınız işaretlerden bağımsız olarak depolar. Böylece daha sonra alabilirsiniz. Uygulamanız çalışırken zamanları depoladığınızda uygulama yanıt vermeye devam eder. Ayrıca, uygulamanız bir miktar çalışmayı tamamladıktan sonra daha sonra analiz edebilmek için tüm verileri dışarı çıkarabilirsiniz.
clearMarks() ile işaretler siliniyor
Bazen, önceden ayarladığınız bir sürü işaretten kurtulabilmek sizin için yararlı olur. Örneğin, web uygulamanızda toplu çalıştırmalar yapabilir ve bu nedenle her çalıştırmayı baştan başlatmak isteyebilirsiniz.
clearMarks() numaralı telefonu arayarak ayarladığınız işaretleri kolayca kaldırabilirsiniz.
Dolayısıyla, aşağıdaki örnek kod sahip olduğunuz tüm mevcut işaretleri kaldırır, böylece isterseniz tekrar bir zamanlama işlemi ayarlayabilirsiniz.
window.performance.clearMarks();
Elbette, tüm işaretlerini kaldırmak istemeyebileceğiniz durumlar olabilir. Dolayısıyla, belirli işaretleri kaldırmak istiyorsanız, kaldırmak istediğiniz markanın adını iletmeniz yeterlidir. Örneğin, aşağıdaki kod:
window.peformance.clearMarks('mark_fully_loaded');
ilk örnekte belirlediğimiz işaretten çıkarırken değiştirdiğimiz diğer işaretleri de bırakır.
Aldığınız tüm önlemleri almak istemiyorsanız bunun için kullanabileceğiniz clearMeasures() yöntemi vardır. clearMarks() metriğiyle tam olarak aynı şekilde çalışır, ancak kendi yaptığınız ölçümler üzerinde çalışır. Örneğin, kod:
window.performance.clearMeasures('measure_load_from_dom');
yukarıdaki measure() örneğinde yaptığımız önlemi kaldırır. Tüm ölçümleri kaldırmak isterseniz bu işlem clearMarks() işleviyle aynı şekilde çalışır. Çünkü bağımsız değişken olmadan clearMeasures() yöntemini çağırırsınız.
Zamanlama verilerini çıkarma
İşaretler belirlemek ve aralıkları ölçmekte her şey sakınca yoktur, ancak bir noktada bazı analizler yapmak için bu zamanlama verilerini kullanmak istersiniz. Bu çok basit bir işlemdir. Tek yapmanız gereken PerformanceTimeline arayüzünü kullanmaktır.
Örneğin, getEntriesByType() yöntemi tüm işaretleme zamanlarımızı almamızı sağlar veya tüm ölçüm zaman aşımına uğrar. Böylece yinelemeyi gerçekleştirip verileri özetleyebiliriz. Bunun güzel tarafı, listenin kronolojik sırada döndürülmesidir, böylece web uygulamanızda işaretleri isabetli sırayla görebilirsiniz.
Aşağıdaki kod:
var items = window.performance.getEntriesByType('mark');
web uygulamamızda isabet alan tüm işaretlerin listesini döndürür, bununla birlikte kod:
var items = window.performance.getEntriesByType('measure');
aldığımız tüm önlemlerin bir listesini döndürür.
Ayrıca, girişlere verdiğiniz spesifik adı kullanarak girişlerin listesini geri alabilirsiniz. Dolayısıyla, örneğin kod:
var items = window.performance.getEntriesByName('mark_fully_loaded');
sorgusu, startTime özelliğinde "mark_full_loaded" zaman damgasını içeren bir öğenin bulunduğu bir liste döndürür.
XHR isteği zamanlama (örnek)
Artık Kullanıcı Zamanlaması API'sinin iyi bir resmine sahip olduğumuza göre, tüm XMLHttpRequests API'mizin web uygulamamızda ne kadar sürdüğünü analiz etmek için bunu kullanabiliriz.
Öncelikle, işaretleri ayarlayan bir işlev çağrısı yayınlamak için tüm send() isteklerimizi değiştirir, aynı zamanda başka bir işaret oluşturan bir işlev çağrısıyla başarı geri çağırmalarımızı değiştirir, ardından isteğin ne kadar sürdüğünü ölçer.
Normalde XMLHttpRequest şu şekilde görünür:
var myReq = new XMLHttpRequest();
myReq.open('GET', url, true);
myReq.onload = function(e) {
do_something(e.responseText);
}
myReq.send();
Örneğimizde, istek sayısını izlemek ve yapılan her istekle ilgili ölçümü kaydetmek için genel bir sayaç ekleyeceğiz. Bu işlemi gerçekleştirmek için gereken kod aşağıdaki gibi görünür:
var reqCnt = 0;
var myReq = new XMLHttpRequest();
myReq.open('GET', url, true);
myReq.onload = function(e) {
window.performance.mark('mark_end_xhr');
reqCnt++;
window.performance.measure('measure_xhr_' + reqCnt, 'mark_start_xhr', 'mark_end_xhr');
do_something(e.responseText);
}
window.performance.mark('mark_start_xhr');
myReq.send();
Yukarıdaki kod, gönderdiğimiz her XMLHttpRequest için benzersiz ad değerine sahip bir ölçüm oluşturur. İsteklerin sırayla çalıştığını varsayıyoruz. Paralel isteklere ait kodun, sıra dışı gönderilen istekleri işlemek için biraz daha karmaşık olması gerekir. Bunu okuyucu için bir alıştırma olarak bırakacağız.
Web uygulaması çok sayıda istek yaptıktan sonra, aşağıdaki kodu kullanarak bu isteklerin tümünü konsola aktarabiliriz:
var items = window.performance.getEntriesByType('measure');
for (var i = 0; i < items.length; ++i) {
var req = items[i];
console.log('XHR ' + req.name + ' took ' + req.duration + 'ms');
}
Sonuç
User Timing API, web uygulamanızın herhangi bir yönüne uygulayabileceğiniz birçok harika araç sunar. Web uygulamanızın geneline API çağrıları serpiştirerek ve zamanın nerede harcandığını net bir şekilde görmek için oluşturulan zamanlama verilerini işleyerek uygulamanızdaki etkin noktaları kolayca daraltabilirsiniz. Peki ya tarayıcınız bu API'yi desteklemiyorsa? Sorun değil. API'yi gerçekten iyi emüle eden ve webpagetest.org ile de güzel çalışan harika bir çoklu dolguyu burada bulabilirsiniz. Daha ne bekliyorsunuz? Kullanıcı Zamanlaması API'sını uygulamalarınızda hemen deneyin. Uygulamaları nasıl hızlandıracağınızı öğrenecek ve kullanıcılarınız, deneyimlerini çok daha iyi hale getirdiğiniz için size teşekkür edecektir.