[]

vue - performans sorunu

elimde bir web sitesi var.
temel bir crud arayüzü aslında. çok detaylı bir şey değil. listeleleyip, listedeki elemana tıklayınca detayını gördüğün bir yer. detayda upload vs gibi bir kaç işlem var.

proje vue ile yazılmış.

ancak farkettik ki, bazı kullanıcılar siteye girdiğinde tarayıcı yanıt vermiyor. cpu kullanımı çok yüksek oluyor.

güçlü cihazlarda sorun olmuyor ama cpu kullanımı radikal şekilde yüksek. hatta fan sürekli çalışıyor. bilgisayar aşırı ısınıyor falan.

velhasıl dünden beri buna neyin sebep olduğunu anlamaya çalışıyorum.

vue hiç bilmiyorum. vue dev extension falan kurdum ama pek işime yaramadı.

chrome dev tools'taki profile bölümü de fazla işime yaramadı ya da kullanamadım.

velhasıl, neden bu site bu kadar kaynak tüketiyor bunu bulup fixlemem lazım, öneri var mı?

componentleri teker teker kapatarak scope'u daraltmaya çalışıyorum ama o da pek fayda etmedi.

 
Frontend yazmadığım için be tarafından yorumlayayım. Benzer sorunla karşılaşmıştık.

Sorunlu sayfa açılırken network tabi chromeda açık olsun. Orada siteden giden tüm istekleri görebilirsin. Bu isteklerden biri arka tarafta uzun bir sorgu başlatıyor olabilir. Eğer bıu sorgu Pageable değilse, yani bir anda tüm veri çekilmeye çalışıyorsa bu ön yüzü kitleyebilir.

Dolayısıyla ön yüzden atılan her isteğin bir timeoutu olması ve backend tarafının buna göre düzenlenmesi lazım. İlk olarak sayfada yollanan her isteğin ne yaptığına nasıl bir veri getirmeye çalıştığına bakın network tabında.

Bu dediğim işlemin vue ile bir alakası yok, sadece request takip edeceksiniz.
  • sarahkerrigan  (02.06.22 21:19:49) 
chrome developer tool kullanarak profiling analizi yapabilirsiniz developer.chrome.com


  • emrahday  (02.06.22 23:27:49) 
Bu "unresponsiveness" olayının, yani ekranın donmasının sebebi loop'lar abi.

Kodun içinde Vue.config.performance = true yaparsan, "Vue Performance" diye bi tab gelir konsola. Oradan tek tek hangi component kaç saniye cpu yiyor görebiliyorsun. En azından sorun nerede onu bulmaya yarar. Ondan sonrası için kodun içinde console.time falan kullanabilirsin belki.
  • plutongezegendegilmi  (03.06.22 09:42:12) 
profiling, memory snapshot falan bildiğim bilmediğim bütün toolları kullandım neredeyse. performance monitor adlı yerde işime yarayan bir kaç veri yakaladım.

1 - stlyes recalcs in sec kısmı ortalama 60. yani sayfada en ufak bir kıpırdama yokken bile sürekli style hesaplaması yapıyor.
2 - dom node sayısı devasa. ortalama 14bin gösteriyor. sayfada bir yerlere click edince bu daha da artıyor, sonra düşüyor. ama ortalama bu civarda hep.
3 - js event listener sayısı ortalama 2500. single page application. tıklanıp interaction'a girecek event sayısı en fazla 200 olsun. onlarca kat daha fazla.

document.querySelectorAll('*') yaptığım zaman 4bin küsür node elde ediyorum ama performance monitorde neredeyse 10bin fazlasını görüyorum. aradaki fark nedir? virtual dom, shadow dom gibi terimler terimler var. tam detayını bilmiyorum. bunlarla ilgili olabilir mi?

benim anladığım, vue dom node'ları oluşturuyor ancak oluşanlar node'lar destroy edilmiyor. ayrıca sürekli css'ler yeniden hesaplanıyor (sayfa sabitken bile). dom'daki style'ları silince cpu kullanımı düşüyor.

vue 2, 3'e migrate edersem sorunlar çözülür mü?
  • biseysorcaktim  (03.06.22 11:51:24) 
1
buraya yazılanların hakları Sir Anthony Hopkins'e aittir.
yazan eden compumaster, ilgilenen eden fader
modere edenler angelus, Artibir, aychovsky, baba jo, basond, compumaster, deckard, duyulmasi gerektigi kadar, fader, fraise, groove salad, kahvegibi, kaymaktutmayansicaksut, kibritsuyu, monstro, pandispanya, robin, ron dennis
bu sitede yazılanların hiçbiri doğru değildir. site içeriği küçükler için sakıncalı olabilir. yazılardan yazarları sorumludur. kaynak göstermeden alıntılanamaz. devlet tarafından atanmış bir kurumun internet üzerinde kimin hangi bilgiye ulaşıp ulaşamayacağına karar vermesi insan haklarına aykırıdır. web siteleri kullanıcıların istekleri doğrultusunda bağlandıkları yerlerdir. kullanıcılar isterlerse bir web sitesine bağlanmayabilirler. bu güçleri ve imkanları mevcuttur. bir kullanıcı bir siteye bağlanmak istiyorsa bu onun tercihi ve hakkıdır. bağlanmak istemiyorsa bu yine onun tercihi ve hakkıdır. halkın kendisine hizmet etmesi için görevlendirdiği kurumlar hadlerini aşıp halka neye ulaşıp ulaşmayacağını bilmeyen cahil cühela muamelesi edemezler. ebeveynlerin çocuklarını sakıncalı içeriklerden koruması için çok sayıda bedava ve ücretli yazılım mevcuttur. bu yazılımlar bir web tarayıcısını kullanmaktan daha karmaşık teknik bilgi gerektirmemektedir. devletin milletini küçük düşürmesi ve ebleh yerine koyması yasaktır. Skimlinks ile linkler üzerinden yönlendirme payı alınmaktadır.