JavaScript yürütmesini optimize edin

JavaScript genellikle görsel değişiklikleri tetikler. Bu, bazen doğrudan stil değişiklikleri, bazen de verileri arama veya sıralama gibi görsel değişikliklerle sonuçlanan hesaplamalar yoluyla yapılır. Yanlış zamanlanmış veya uzun süre çalışan JavaScript, performans sorunlarının yaygın bir nedenidir. Mümkün olduğunda bu değişikliğin etkisini en aza indirmeye çalışmalısınız.

Paul Lewis
X Ana sayfa

JavaScript genellikle görsel değişiklikleri tetikler. Bu, bazen doğrudan stil değişiklikleri, bazen de verileri arama veya sıralama gibi görsel değişikliklerle sonuçlanan hesaplamalar yoluyla yapılır. Kötü zamanlanmış veya uzun süre çalışan JavaScript, performans sorunlarının yaygın bir nedenidir. Mümkün olduğunda bu değişikliğin etkisini en aza indirmeye çalışmalısınız.

Yazdığınız JavaScript, aslında yürütülen koda hiç benzemediğinden JavaScript performansı profillemesi bir sanat dalı olabilir. Modern tarayıcılar, size mümkün olan en hızlı yürütmeyi sunmak için JIT derleyicileri ve her türlü optimizasyonu ve hileyi kullanır. Bu da kodun dinamiklerini önemli ölçüde değiştirir.

Bununla birlikte, uygulamalarınızın JavaScript'i iyi şekilde yürütmesine yardımcı olmak için kesinlikle yapabileceğiniz bazı şeyler vardır.

Özet

  • Görsel güncellemeler için setTimeout veya setInterval işlevlerini kullanmaktan 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ç karede DOM değişiklikleri yapmak için mikro görevler kullanın.
  • JavaScript'in etkisini değerlendirmek için Chrome Geliştirici Araçları'nın Zaman Çizelgesi ve JavaScript Profilleyici'yi kullanın.

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

Ekranda görsel değişiklikler gerçekleşirken çalışmanızı tarayıcı için doğru zamanda, yani çerçevenin tam başında yapmak istersiniz. JavaScript'inizin bir karenin başında çalışacağını garanti etmenin tek yolu requestAnimationFrame kullanmaktı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, animasyon gibi görsel değişiklikler yapmak için setTimeout veya setInterval kullanabilir. Ancak bu durumda geri çağırma işlevi, karenin bir noktasında (muhtemelen en sonunda) çalışır. Bu da genellikle bir kareyi kaçırmamıza neden olarak takılmalara yol açabilir.