JavaScript yürütmesini optimize edin

JavaScript genellikle görsel değişiklikleri tetikler. Bu bazen doğrudan stil manipülasyonları yoluyla bazen de arama veya veri sıralama gibi görsel değişikliklere yol açan hesaplamalar olabilir. Hatalı zamanlanmış veya uzun çalışan JavaScript, performans sorunlarının yaygın bir nedenidir. Mümkün olduğu durumlarda etkisini en aza indirmeye çalışmalısınız.

JavaScript genellikle görsel değişiklikleri tetikler. Bazen bu doğrudan bültenler bazen de karmaşık bir dünyadaki arama veya verileri sıralama gibi görsel değişikliklere yol açabilir. Hatalı zamanlanmış performans sorunlarının yaygın bir nedeni olabilir. Mümkün olduğu durumlarda etkisini en aza indirmeye çalışmalısınız.

JavaScript performans profili oluşturmak sanat eseri olabilir, çünkü yazdığınız JavaScript aslında yürütülen koddan başka bir şey yoktur. Modern tarayıcılar, JIT derleyicilerini ve sağlamaya yönelik optimizasyon ve püf noktalarından oluşan bir derleme kodun dinamiklerini önemli ölçüde değiştirir.

Bununla birlikte, uygulamalarınızın düzgün çalışmasına yardımcı olmak için kesinlikle yapabileceğiniz bazı şeyler iyi olacaktır.

Özet

• Görsel güncellemeler için setZaman aşımı ya da setInterval'dan kaçının; bunun yerine her zaman requestAnimationFrame işlevini kullanın.
• Uzun süre çalışan JavaScript'i ana iş parçacığından web çalışanlarına taşıyın.
• Birkaç çerçeve üzerinde DOM değişiklikleri yapmak için mikro görevleri kullanın.
• JavaScript'in etkisini değerlendirmek için Chrome Geliştirici Araçları'nın Zaman Çizelgesi'ni ve JavaScript Profiler'ı kullanın.

Görsel değişiklikler için requestAnimationFrame kullanın

Ekranda görsel değişiklikler gerçekleşirken yer alır. JavaScript'inizin hazır olmasını garanti etmenin tek yolu, çalıştırılması requestAnimationFrame kullanılmasıdır.

/**
    * If run as a requestAnimationFrame callback, this
    * will be run at the start of the frame.
    */
function updateScreen(time) {
    // Make visual updates here.
}

requestAnimationFrame(updateScreen);

Çerçeveler veya örnekler, animasyonlar gibi görsel değişiklikler yapmak için setTimeout ya da setInterval kullanabilir. Ancak bu konudaki sorun, geri çağırmanın karenin bir noktasında (muhtemelen doğru) çalışacak olmasıdır. oluştururlar ve bu durum çoğu zaman bir kareyi atlamamıza neden olarak olumsuzluklara yol açabilir.

Aslında, jQuery, animate davranışı için setTimeout kullanıyordu. Bu, Sürüm 3'te requestAnimationFrame. jQuery'nin eski sürümünü kullanıyorsanız requestAnimationFrame için yama uygulayın, bunu yapmanız kesinlikle önerilir.

Karmaşıklığı azaltın veya web çalışanlarını kullanın

JavaScript, tarayıcının ana iş parçacığı üzerinde çalışır; stil hesaplamaları, düzen ve boya. JavaScript'iniz uzun süre çalışırsa aşağıdaki diğer görevleri engeller: karelerin kaçırılmasına neden olabilir.

JavaScript'in ne zaman ve ne kadar süre çalışacağı konusunda taktiksel davranmanız gerekir. Örneğin, bir grup insanın bir animasyon için ideal olarak JavaScript'inizi 3-4 ms arasındaki bir değerdir. Bundan daha uzun sürerse çok fazla zaman alma riskini alırsınız. Boştaysanız geçen süre konusunda daha rahat hareket edebilirsiniz.

Çoğu durumda yalnızca bilişimsel işleri Web Çalışanları, DOM erişimi gerekmiyorsa bunu yapabilirsiniz. Veri manipülasyonu veya geçişi, gibi araçları da kullanabilirsiniz.

var dataSortWorker = new Worker("sort-worker.js");
dataSortWorker.postMesssage(dataToSort);

// The main thread is now free to continue working on other things...

dataSortWorker.addEventListener('message', function(evt) {
    var sortedData = evt.data;
    // Update data on screen...
});

Tüm işler bu modele uygun olmayabilir: Web çalışanlarının DOM erişimi yoktur. Çalışmanızın ana iş parçacığında olması gereken durumlarda, büyük görevi, her biri birkaç milisaniyeden uzun sürmeyecek ve her karede requestAnimationFrame işleyicilerin içinde çalıştırılacak mikro görevler halinde segmentlere ayırdığınız bir toplu oluşturma yaklaşımı benimseyin.

Bu yaklaşımın kullanıcı deneyimi ve kullanıcı arayüzü ile ilgili sonuçları vardır ve kullanıcının bunu bildiğinden emin olmanız gerekir. ilerleme veya etkinlik göstergesi kullanarak bir görevin işlenmekte olduğunu belirtin. Bu yaklaşım, her halükarda uygulamanızın ana iş parçacığını boş bırakır ve uygulamanızın kullanıcı etkileşimleri.

JavaScript'inizin "çerçeve vergisi"ni öğrenin

Bir çerçeveyi, kitaplığı veya kendi kodunuzu değerlendirirken, tek tek kare bazında çalıştırmanın maliyetini. Bu özellikle de performans açısından kritik animasyon işlerinde çok önemlidir. olabilir.

Chrome Geliştirici Araçları'nın Performans paneli, JavaScript'in maliyeti. Genellikle aşağıdaki gibi alt düzey kayıtlar alırsınız:

Ana bölümde JavaScript çağrılarının sabit bir grafiği sunulur. , tam olarak hangi işlevlerin çağrıldığını ve her birinin ne kadar sürdüğünü analiz edebilir.

Bu bilgiler elinizde olduğunda, bir anahtar kelimenin performans üzerindeki etkisini ve varsa, sorun yaşadığınız hotspot'ları bulup düzeltmeye işlevlerinin yürütülmesi çok uzun sürüyordur. Daha önce dediğimiz gibi uzun çalışan JavaScript'i kaldırmayı veya bu mümkün değilse, JavaScript'i ana iş parçacığının diğer görevlere devam etmesi için serbest bırakılmasına neden olur.

Nasıl kullanacağınızı öğrenmek için Çalışma Zamanı Performansını Analiz Etmeye Başlama bölümüne bakın. tıklayın.

JavaScript'inizi mikro düzeyde optimize etmekten kaçının

Tarayıcının bir şeyin bir sürümünü 100 kat daha hızlı çalıştırabileceğini Başka bir şey daha var: Bir öğenin offsetTop özelliğini istemek, bilgi işlemden daha hızlıdır getBoundingClientRect() fakat yalnızca şu gibi işlevleri çağıracağınız doğrudur: bunu kare başına az sayıda gösterir. Bu nedenle, normalde bu tür içeriklerin bu yönüne odaklanmak için JavaScript'in performansı. Normalde yalnızca milisaniyeler içinde tasarruf edersiniz.

Oyun geliştiriyorsanız veya işlem açısından pahalı bir uygulama geliştiriyorsanız büyük olasılıkla istisnasınızdır büyük miktarda hesaplama işlemi genellikle tek bir kareye sığdırılacağından ve bu, Bu durumda her şey yardımcı olur.

Kısacası, mikro optimizasyonlar genellikle tür bir uygulamadır.