{"id":8962,"date":"2025-01-08T08:15:13","date_gmt":"2025-01-08T05:15:13","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/javascriptte-yaygin-bellek-sizintilari\/"},"modified":"2025-01-08T08:15:13","modified_gmt":"2025-01-08T05:15:13","slug":"javascriptte-yaygin-bellek-sizintilari","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/javascriptte-yaygin-bellek-sizintilari\/","title":{"rendered":"JavaScript’te Yayg\u0131n Bellek S\u0131z\u0131nt\u0131lar\u0131"},"content":{"rendered":"

<\/p>\n

JavaScript’te Yayg\u0131n Bellek S\u0131z\u0131nt\u0131lar\u0131<\/p>\n

Merhaba! Fatih Soysal olarak, bu yaz\u0131da JavaScript uygulamalar\u0131nda s\u0131kl\u0131kla kar\u015f\u0131la\u015f\u0131lan bellek s\u0131z\u0131nt\u0131lar\u0131n\u0131 ve bunlar\u0131n nas\u0131l \u00f6nlenebilece\u011fini detayl\u0131 bir \u015fekilde ele alaca\u011f\u0131z. Bellek s\u0131z\u0131nt\u0131lar\u0131, uygulaman\u0131z\u0131n performans\u0131n\u0131 d\u00fc\u015f\u00fcren ve hatta \u00e7\u00f6kmesine neden olabilen ciddi sorunlard\u0131r. Bu y\u00fczden, \u00f6zellikle b\u00fcy\u00fck ve karma\u015f\u0131k uygulamalar geli\u015ftiriyorsan\u0131z, bu konuya hakim olmak olduk\u00e7a \u00f6nemlidir.<\/p>\n

Global De\u011fi\u015fkenler ve Bellek S\u0131z\u0131nt\u0131lar\u0131<\/h2>\n

JavaScript’te global de\u011fi\u015fkenler, uygulaman\u0131z\u0131n ya\u015fam s\u00fcresi boyunca bellekte kal\u0131rlar. Bu, global de\u011fi\u015fkenlere gere\u011finden fazla b\u00fcy\u00fck veriler atanmas\u0131 durumunda bellekte b\u00fcy\u00fck alanlar\u0131n i\u015fgal edilmesine ve s\u0131z\u0131nt\u0131lara yol a\u00e7abilir. \u00d6rne\u011fin, s\u00fcrekli b\u00fcy\u00fcyen bir diziyi global bir de\u011fi\u015fkende tutmak, zamanla bellek t\u00fcketimini art\u0131racakt\u0131r. Bu sorunu \u00f6nlemek i\u00e7in, global de\u011fi\u015fken kullan\u0131m\u0131n\u0131 m\u00fcmk\u00fcn oldu\u011funca azaltmal\u0131 ve gerekirse yerel kapsamda de\u011fi\u015fkenleri kullanmal\u0131y\u0131z. Ayn\u0131 zamanda, kullan\u0131lmayan global de\u011fi\u015fkenleri de silmeliyiz. Bu sayede, gereksiz bellek t\u00fcketimi \u00f6nlenmi\u015f olur.<\/p>\n

\n\/\/ K\u00f6t\u00fc \u00f6rnek: Global de\u011fi\u015fkende s\u00fcrekli b\u00fcy\u00fcyen bir dizi\nlet globalArray = [];\nfunction addData(data) {\n  globalArray.push(data);\n}\n<\/code><\/pre>\n
Closure’lar ve Bellek S\u0131z\u0131nt\u0131lar\u0131<\/h2>\n
Closure’lar, i\u00e7 fonksiyonlar\u0131n d\u0131\u015f fonksiyonun kapsam\u0131na eri\u015febilmesini sa\u011flar.  Bu, olduk\u00e7a kullan\u0131\u015fl\u0131 bir \u00f6zellik olsa da, yanl\u0131\u015f kullan\u0131ld\u0131\u011f\u0131nda bellek s\u0131z\u0131nt\u0131lar\u0131na neden olabilir.  E\u011fer bir i\u00e7 fonksiyon, d\u0131\u015f fonksiyonun kapsam\u0131ndaki b\u00fcy\u00fck bir nesneye referans tutuyorsa ve d\u0131\u015f fonksiyon \u00e7al\u0131\u015fmas\u0131n\u0131 bitirdikten sonra bu i\u00e7 fonksiyon hala bellekte kal\u0131yorsa, o nesne de bellekten temizlenemez.  Bu durum, bellek s\u0131z\u0131nt\u0131lar\u0131na yol a\u00e7ar.  Bu sorunun \u00fcstesinden gelmek i\u00e7in, closure’larda tutulan referanslar\u0131n y\u00f6netimi dikkatlice yap\u0131lmal\u0131d\u0131r.  Kullan\u0131lmayan referanslar\u0131 serbest b\u0131rakmak, bellekteki s\u0131z\u0131nt\u0131lar\u0131 \u00f6nlemek i\u00e7in hayati \u00f6nem ta\u015f\u0131r.<\/p>\n
\n\/\/ K\u00f6t\u00fc \u00f6rnek: Closure nedeniyle bellek s\u0131z\u0131nt\u0131s\u0131\nfunction createClosure() {\n  let largeObject = { \/* b\u00fcy\u00fck bir nesne *\/ };\n  return function() {\n    console.log(largeObject); \/\/ largeObject'e referans tutuluyor\n  };\n}\nlet myClosure = createClosure(); \n\/\/ myClosure fonksiyonu bellekte kal\u0131yor ve largeObject'i de bellekte tutuyor.\n<\/code><\/pre>\n
Event Listener’lar ve Bellek S\u0131z\u0131nt\u0131lar\u0131<\/h2>\n
Event listener’lar, DOM elementlerine olaylar eklemek i\u00e7in kullan\u0131l\u0131r.  Ancak, event listener’lar temizlenmedi\u011fi takdirde, ilgili elementler bellekten temizlense bile, event listener’lar bellekte kalmaya devam eder. Bu durum da bellek s\u0131z\u0131nt\u0131lar\u0131na yol a\u00e7abilir.  Bu durumu \u00f6nlemek i\u00e7in, event listener’lar\u0131 ilgili elementlerden kald\u0131rmak veya onlar\u0131 ‘null’ yaparak referanslar\u0131n\u0131 k\u0131rmak gerekir.  \u00d6zellikle, dinamik olarak eklenen event listener’lar i\u00e7in bu i\u015flem olduk\u00e7a \u00f6nemlidir.  \u00d6rne\u011fin, bir nesneye dinamik olarak event listener ekledikten sonra, bu nesne silindi\u011finde, listener’\u0131n da temizlenmesi gerekir. Aksi halde,  bir bellek s\u0131z\u0131nt\u0131s\u0131 olu\u015fur.<\/p>\n
DOM Referanslar\u0131 ve Bellek S\u0131z\u0131nt\u0131lar\u0131<\/h2>\n
JavaScript’te DOM elementlerine referans tutmak da bellek s\u0131z\u0131nt\u0131lar\u0131na neden olabilir.  E\u011fer bir DOM elementi kullan\u0131lm\u0131yor ancak hala JavaScript kodu taraf\u0131ndan referans ediliyorsa, bu element bellekten temizlenemez.  Bu problemi \u00e7\u00f6zmek i\u00e7in, kullan\u0131lmayan DOM elementlerine olan referanslar\u0131 kald\u0131rmak gerekmektedir.  Bu, \u00f6zellikle uzun s\u00fcre \u00e7al\u0131\u015fan uygulamalar i\u00e7in \u00f6nemli bir konudur.  \u00d6rne\u011fin, bir elementin kald\u0131r\u0131lmas\u0131ndan sonra, bu elemente olan t\u00fcm referanslar\u0131n temizlenmesi, bellek s\u0131z\u0131nt\u0131lar\u0131n\u0131 \u00f6nlemeye yard\u0131mc\u0131 olacakt\u0131r.  Bu konuda dikkatli olmak, uygulama performans\u0131n\u0131 art\u0131rmak a\u00e7\u0131s\u0131ndan olduk\u00e7a \u00f6nemlidir.<\/p>\n
\u00c7\u00f6z\u00fcm Yollar\u0131 ve \u0130pu\u00e7lar\u0131<\/h2>\n
Bellek s\u0131z\u0131nt\u0131lar\u0131n\u0131 \u00f6nlemek i\u00e7in izleyebilece\u011finiz baz\u0131 ipu\u00e7lar\u0131 \u015funlard\u0131r:<\/p>\n