{"id":34841,"date":"2025-11-22T18:01:00","date_gmt":"2025-11-22T15:01:00","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/javascript-dizilerindeki-sinsi-performans-katili-desenler\/"},"modified":"2025-11-22T18:01:00","modified_gmt":"2025-11-22T15:01:00","slug":"javascript-dizilerindeki-sinsi-performans-katili-desenler","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/javascript-dizilerindeki-sinsi-performans-katili-desenler\/","title":{"rendered":"JavaScript Dizilerindeki Sinsi Performans Katili Desenler"},"content":{"rendered":"

<\/p>\n

JavaScript dizilerinde fark\u0131nda olmadan kulland\u0131\u011f\u0131n\u0131z bir paternin uygulaman\u0131z\u0131n performans\u0131n\u0131 nas\u0131l ciddi \u015fekilde etkileyebilece\u011fini ke\u015ffedin. Bu teknik rehberle performans sorunlar\u0131n\u0131 tan\u0131mlay\u0131n ve optimize edin, uygulaman\u0131z\u0131n daha h\u0131zl\u0131 \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flay\u0131n. Haz\u0131rl\u0131kl\u0131 olun, \u00e7\u00fcnk\u00fc bu masum g\u00f6r\u00fcnen desenler beklenmedik derecede y\u00fcksek i\u015flem g\u00fcc\u00fc gerektirebilir ve kullan\u0131c\u0131 deneyimini olumsuz etkileyebilir.<\/p>\n

Geli\u015ftiriciler olarak JavaScript ile \u00e7al\u0131\u015f\u0131rken diziler, g\u00fcnl\u00fck rutinlerimizin ayr\u0131lmaz bir par\u00e7as\u0131d\u0131r. Veri listelerini y\u00f6netmek, \u00f6\u011feleri eklemek, \u00e7\u0131karmak veya d\u00f6n\u00fc\u015ft\u00fcrmek i\u00e7in s\u00fcrekli dizilerle etkile\u015fim halindeyiz. Ancak bu s\u0131radan g\u00f6r\u00fcnen i\u015flemler aras\u0131nda, performans\u0131n\u0131z\u0131 sessizce \u00f6ld\u00fcren bir “anti-pattern” gizleniyor olabilir: Dizinin ba\u015f\u0131na s\u0131k s\u0131k eleman ekleme veya dizinin ba\u015f\u0131ndan eleman \u00e7\u0131karma i\u015flemleri.<\/p>\n

Peki, bu kadar masum g\u00f6r\u00fcnen bir i\u015flem, yani bir dizinin ba\u015f\u0131na yeni bir \u00f6\u011fe eklemek (unshift()<\/code> metodu) veya ba\u015ftan bir \u00f6\u011fe silmek (splice(0, 1)<\/code> gibi), neden bu kadar b\u00fcy\u00fck bir performans y\u00fck\u00fcne yol a\u00e7ar? Cevap, JavaScript motorlar\u0131n\u0131n (\u00f6zellikle Google’\u0131n V8 motorunun) dizileri bellek \u00fczerinde nas\u0131l temsil etti\u011fi ve bu t\u00fcr i\u015flemlerin alt\u0131nda yatan mekanizmalarda yat\u0131yor. Bir dizinin ba\u015f\u0131na \u00f6\u011fe ekledi\u011finizde, JavaScript motoru temelde dizideki t\u00fcm mevcut \u00f6\u011feleri bir konum ileri kayd\u0131rmak zorundad\u0131r. \u00d6rne\u011fin, 100.000 elemanl\u0131 bir diziniz varsa ve ba\u015f\u0131na yeni bir eleman eklerseniz, motorun bu 100.000 eleman\u0131n her birini bellek i\u00e7inde ta\u015f\u0131mas\u0131 gerekir. Bu i\u015flem, dizinin boyutuyla do\u011fru orant\u0131l\u0131 olarak artan (O(n) karma\u015f\u0131kl\u0131k) bir maliyete sahiptir.<\/p>\n

Bir an d\u00fc\u015f\u00fcn\u00fcn: Uygulaman\u0131zda bir olay ak\u0131\u015f\u0131n\u0131, bildirim listesini veya bir sohbet ge\u00e7mi\u015fini g\u00f6steriyorsunuz ve en yeni \u00f6\u011feleri her zaman listenin en \u00fcst\u00fcnde tutmak istiyorsunuz. Sezgisel olarak, yeni \u00f6\u011feleri dizinin ba\u015f\u0131na eklemek (“unshift”) mant\u0131kl\u0131 g\u00f6r\u00fcnebilir. Ancak b\u00fcy\u00fck veri k\u00fcmeleriyle \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131zda veya bu i\u015flemi s\u0131k s\u0131k tekrarlad\u0131\u011f\u0131n\u0131zda, uygulaman\u0131z\u0131n tepki s\u00fcresinde dramatik d\u00fc\u015f\u00fc\u015fler g\u00f6zlemlemeye ba\u015flayabilirsiniz. K\u00fc\u00e7\u00fck dizilerde bu maliyet ihmal edilebilir olsa da, dizinin boyutu artt\u0131k\u00e7a, bu “masum” i\u015flem bir performans canavar\u0131na d\u00f6n\u00fc\u015febilir. \u0130\u015fte bu y\u00fczden, bu t\u00fcr desenleri tan\u0131mak ve uygun alternatifleri kullanmak, \u00f6zellikle modern web uygulamalar\u0131nda ak\u0131c\u0131 bir kullan\u0131c\u0131 deneyimi sa\u011flamak i\u00e7in hayati \u00f6nem ta\u015f\u0131r. Bu durum, sadece unshift()<\/code> i\u00e7in de\u011fil, ayn\u0131 zamanda dizinin ba\u015f\u0131ndan eleman ekleyen veya \u00e7\u0131karan splice()<\/code> gibi di\u011fer metotlar i\u00e7in de ge\u00e7erlidir.<\/p>\n

Performans\u0131 Neden D\u00fc\u015f\u00fcr\u00fcr: Detayl\u0131 \u0130nceleme ve Bellek Etkileri<\/h3>\n

unshift()<\/code> ve splice(0, ...)<\/code> gibi metotlar\u0131n performans d\u00fc\u015f\u00fc\u015f\u00fcne neden olmas\u0131n\u0131n temelinde, bellek y\u00f6netimi ve veri yap\u0131lar\u0131n\u0131n do\u011fas\u0131 yatar. JavaScript dizileri, \u00e7o\u011fu dildeki gibi biti\u015fik bellek bloklar\u0131nda saklanan \u00f6\u011feler koleksiyonu olarak d\u00fc\u015f\u00fcn\u00fclebilir. Bir dizinin sonuna bir \u00f6\u011fe eklemek (push()<\/code> metodu), genellikle sadece dizinin kapasitesini geni\u015fletmeyi ve yeni \u00f6\u011feyi mevcut \u00f6\u011felerin sonuna yerle\u015ftirmeyi gerektirir; bu i\u015flem genellikle sabit zaman karma\u015f\u0131kl\u0131\u011f\u0131na (amortize edilmi\u015f O(1)) sahiptir.<\/p>\n

Ancak, dizinin ba\u015f\u0131na bir \u00f6\u011fe ekledi\u011finizde veya oradan bir \u00f6\u011fe sildi\u011finizde, durum tamamen de\u011fi\u015fir. Dizideki her bir \u00f6\u011fenin fiziksel bellek konumunun de\u011fi\u015fmesi gerekir. \u00d6rne\u011fin, [A, B, C]<\/code> \u015feklinde bir diziniz varsa ve ba\u015f\u0131na X<\/code> eklemek isterseniz, motor \u00f6nce C<\/code>‘yi sa\u011fa, sonra B<\/code>‘yi sa\u011fa, sonra A<\/code>‘y\u0131 sa\u011fa kayd\u0131rarak [_, A, B, C]<\/code> yapar ve sonra bo\u015f kalan yere X<\/code>‘i yerle\u015ftirir: [X, A, B, C]<\/code>. Bu kayd\u0131rma i\u015flemi, dizinin i\u00e7erdi\u011fi eleman say\u0131s\u0131 (n) ile do\u011fru orant\u0131l\u0131d\u0131r, yani O(n) zaman karma\u015f\u0131kl\u0131\u011f\u0131na sahiptir. B\u00fcy\u00fck dizilerde bu, on binlerce veya y\u00fcz binlerce bellek ta\u015f\u0131ma operasyonu anlam\u0131na gelebilir.<\/p>\n

Bu s\u00fcrekli bellek ta\u015f\u0131malar\u0131 sadece CPU d\u00f6ng\u00fclerini t\u00fcketmekle kalmaz, ayn\u0131 zamanda JavaScript motorunun \u00e7\u00f6p toplay\u0131c\u0131s\u0131n\u0131 (Garbage Collector – GC) da daha fazla yorar. Eski dizi referanslar\u0131 at\u0131ld\u0131\u011f\u0131nda, bellekteki “bo\u015fluklar\u0131” temizlemek ve yeniden kullan\u0131labilir hale getirmek i\u00e7in GC devreye girer. S\u0131k s\u0131k O(n) operasyonlar\u0131 yaparak yeni dizi kopyalar\u0131 olu\u015fturmak veya mevcut diziyi s\u00fcrekli de\u011fi\u015ftirmek, GC’nin daha s\u0131k \u00e7al\u0131\u015fmas\u0131na neden olur. GC \u00e7al\u0131\u015ft\u0131\u011f\u0131nda, uygulama genellikle k\u0131sa bir s\u00fcreli\u011fine duraklar (pause), bu da kullan\u0131c\u0131 aray\u00fcz\u00fcnde tak\u0131lmalara, gecikmelere ve genel olarak k\u00f6t\u00fc bir kullan\u0131c\u0131 deneyimine yol a\u00e7ar.<\/p>\n

A\u015fa\u011f\u0131daki basit kar\u015f\u0131la\u015ft\u0131rma, push()<\/code> ve unshift()<\/code> metotlar\u0131 aras\u0131ndaki performans fark\u0131n\u0131 net bir \u015fekilde ortaya koyacakt\u0131r:<\/p>\n

\n  function benchmarkArrayOperations(operation, count) {\n    const arr = [];\n    console.time(operation);\n    for (let i = 0; i < count; i++) {\n      if (operation === 'push') {\n        arr.push(i);\n      } else if (operation === 'unshift') {\n        arr.unshift(i);\n      }\n    }\n    console.timeEnd(operation);\n  }\n\n  const arraySize = 100000; \/\/ 100 bin eleman\n  console.log(Array boyutu: ${arraySize}<\/code>);\n\n  \/\/ Push i\u015flemi\n  benchmarkArrayOperations('push', arraySize); \/\/ Genellikle milisaniyeler s\u00fcrer\n\n  \/\/ Unshift i\u015flemi\n  benchmarkArrayOperations('unshift', arraySize); \/\/ Saniyeler s\u00fcrebilir\n  <\/pre>\n
<\/code><\/p>\n
Yukar\u0131daki kodu \u00e7al\u0131\u015ft\u0131rd\u0131\u011f\u0131n\u0131zda, unshift<\/code> i\u015fleminin push<\/code> i\u015flemine k\u0131yasla kat kat daha yava\u015f oldu\u011funu g\u00f6receksiniz. Bu durum, \u00f6zellikle b\u00fcy\u00fck veri k\u00fcmeleri ve y\u00fcksek frekansl\u0131 i\u015flemler s\u00f6z konusu oldu\u011funda, ciddi bir performans darbo\u011faz\u0131 yaratma potansiyeli ta\u015f\u0131r.<\/p>\n
\n  function benchmarkSpliceVsFilter(count) {\n    let arr = Array.from({ length: count }, (_, i) => i);\n    let tempArr = [...arr]; \/\/ Kopyalama\n\n    console.time('splice_from_beginning');\n    for (let i = 0; i < count \/ 10; i++) { \/\/ Dizinin %10'unu siliyoruz\n      tempArr.splice(0, 1);\n    }\n    console.timeEnd('splice_from_beginning');\n\n    tempArr = [...arr]; \/\/ Yeniden kopyalama\n    console.time('filter_from_beginning');\n    \/\/ Filter ile bir eleman\u0131 silme biraz farkl\u0131 d\u00fc\u015f\u00fcn\u00fclmeli\n    \/\/ \u00d6rne\u011fin, ilk eleman\u0131 silmek yerine, ilk eleman hari\u00e7 t\u00fcm elemanlar\u0131 almak\n    \/\/ Bu, s\u00fcrekli ba\u015ftan silme senaryosuna direct kar\u015f\u0131l\u0131k gelmese de immutable bir yakla\u015f\u0131m sunar\n    let newArr = [];\n    for (let i = 0; i < count \/ 10; i++) {\n      newArr = tempArr.filter((_, idx) => idx !== 0); \/\/ Her seferinde yeni dizi olu\u015fturur\n      tempArr = newArr;\n    }\n    console.timeEnd('filter_from_beginning');\n  }\n\n  const arraySizeForSpliceFilter = 10000; \/\/ Daha k\u00fc\u00e7\u00fck bir boyut kullan\u0131ld\u0131\n  console.log(Array boyutu (splice\/filter): ${arraySizeForSpliceFilter}<\/code>);\n  benchmarkSpliceVsFilter(arraySizeForSpliceFilter);\n  <\/pre>\n
<\/code><\/p>\n
splice<\/code> ve filter<\/code> aras\u0131ndaki kar\u015f\u0131la\u015ft\u0131rma, filter<\/code>'\u0131n her zaman yeni bir dizi olu\u015fturarak immutable bir yakla\u015f\u0131m sundu\u011funu g\u00f6sterir. Her iki durumda da ba\u015ftan eleman silme\/filtreleme maliyetli olabilir, ancak filter<\/code>'\u0131n avantaj\u0131, yan etki yaratmamas\u0131 ve orijinal diziyi de\u011fi\u015ftirmemesidir.<\/p>\n
Performans\u0131 Art\u0131ran Ak\u0131ll\u0131 Dizi Manip\u00fclasyon Teknikleri Nelerdir?<\/h2>\n
Performans sorunlar\u0131n\u0131 anlad\u0131\u011f\u0131m\u0131za g\u00f6re, \u015fimdi bu tuzaklardan ka\u00e7\u0131narak dizilerle daha verimli \u00e7al\u0131\u015fman\u0131n yollar\u0131na odaklanabiliriz. Ak\u0131ll\u0131 dizi manip\u00fclasyon teknikleri, \u00f6zellikle b\u00fcy\u00fck veri k\u00fcmelerinde uygulaman\u0131z\u0131n h\u0131z\u0131n\u0131 ve duyarl\u0131l\u0131\u011f\u0131n\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131rabilir.<\/p>\n
Alternatif Ekleme ve \u00c7\u0131karma Y\u00f6ntemleri<\/h3>\n
Dizinin ba\u015f\u0131na \u00f6\u011fe eklemek yerine, \u00e7o\u011fu senaryoda dizinin sonuna \u00f6\u011fe eklemek (push()<\/code>) \u00e7ok daha verimlidir. E\u011fer g\u00f6rsel olarak en yeni \u00f6\u011felerin en \u00fcstte g\u00f6r\u00fcnmesi gerekiyorsa, veriyi dizinin sonuna ekleyip, sonra diziyi tersine \u00e7evirerek veya g\u00f6r\u00fcnt\u00fcleme katman\u0131nda tersine d\u00f6n\u00fc\u015ft\u00fcrerek bu etkiyi yaratabilirsiniz. Bu yakla\u015f\u0131m, unshift()<\/code>'in her seferinde t\u00fcm \u00f6\u011feleri kayd\u0131rma maliyetinden kurtar\u0131r.<\/p>\n
\n  \/\/ Yava\u015f yol (unshift)\n  let messagesUnshift = [];\n  function addMessageUnshift(msg) {\n    messagesUnshift.unshift(msg);\n  }\n\n  \/\/ H\u0131zl\u0131 yol (push + reverse)\n  let messagesPush = [];\n  function addMessagePush(msg) {\n    messagesPush.push(msg);\n    \/\/ E\u011fer g\u00f6r\u00fcnt\u00fcde en yeni en \u00fcstteyse:\n    \/\/ displayMessages(messagesPush.slice().reverse());\n  }\n\n  \/\/ \u00d6rnek kullan\u0131m:\n  console.time('add_100k_messages_unshift');\n  for (let i = 0; i < 100000; i++) {\n    addMessageUnshift(Message ${i}<\/code>);\n  }\n  console.timeEnd('add_100k_messages_unshift');\n\n  console.time('add_100k_messages_push');\n  for (let i = 0; i < 100000; i++) {\n    addMessagePush(Message ${i}<\/code>);\n  }\n  console.timeEnd('add_100k_messages_push');\n  <\/pre>\n
<\/code><\/p>\n
Birden fazla diziyi birle\u015ftirmek i\u00e7in concat()<\/code> yerine spread operat\u00f6r\u00fc (...<\/code>) kullanmak da hem okunabilirlik hem de performans\u0131 art\u0131rabilir. Spread operat\u00f6r\u00fc, yeni bir dizi olu\u015ftururken var olan \u00f6\u011feleri kopyalar ve bu, immutabiliteyi korurken dizileri birle\u015ftirmek i\u00e7in modern ve etkili bir yoldur.<\/p>\n
\n  const arr1 = [1, 2];\n  const arr2 = [3, 4];\n  const arr3 = [5, 6];\n\n  \/\/ Eski y\u00f6ntem:\n  \/\/ const combinedOld = arr1.concat(arr2, arr3);\n\n  \/\/ Yeni ve daha performansl\u0131 y\u00f6ntem (\u00f6zellikle d\u00f6ng\u00fc d\u0131\u015f\u0131nda)\n  const combinedNew = [...arr1, ...arr2, ...arr3];\n  console.log(combinedNew); \/\/ [1, 2, 3, 4, 5, 6]\n\n  \/\/ Dizinin ba\u015f\u0131na eleman ekleme (immutable)\n  const newElement = 0;\n  const newArrayImmutable = [newElement, ...combinedNew];\n  console.log(newArrayImmutable); \/\/ [0, 1, 2, 3, 4, 5, 6]\n  <\/pre>\n
<\/code><\/p>\n
Eleman \u00e7\u0131karmak i\u00e7in, e\u011fer sondan \u00e7\u0131karacaksan\u0131z pop()<\/code> metodunu kullan\u0131n. Ortadan veya ba\u015ftan \u00e7\u0131karmak gerekti\u011finde, orijinal diziyi de\u011fi\u015ftirmek yerine yeni bir dizi d\u00f6nd\u00fcren filter()<\/code> metodu genellikle daha iyi bir se\u00e7enektir, \u00f6zellikle immutabilite \u00f6nemliyse. slice()<\/code> de dizinin bir b\u00f6l\u00fcm\u00fcn\u00fc kopyalamak i\u00e7in kullan\u0131labilir.<\/p>\n
Immutable Yakla\u015f\u0131mlar ve Yan Etkileri<\/h3>\n
Modern JavaScript geli\u015ftirmesinde, \u00f6zellikle React ve Redux gibi k\u00fct\u00fcphanelerle \u00e7al\u0131\u015f\u0131rken, immutabilite (de\u011fi\u015fmezlik) kavram\u0131 merkezi bir rol oynar. Immutable veri yap\u0131lar\u0131, bir kez olu\u015fturulduktan sonra de\u011fi\u015ftirilemezler. Bir diziyi de\u011fi\u015ftirmek istedi\u011finizde, asl\u0131nda orijinal diziyi de\u011fi\u015ftirmek yerine, de\u011fi\u015fiklikleri i\u00e7eren yeni bir dizi olu\u015fturursunuz. map()<\/code>, filter()<\/code>, ve reduce()<\/code> gibi Array metotlar\u0131, orijinal diziyi de\u011fi\u015ftirmeden yeni bir dizi d\u00f6nd\u00fcrd\u00fckleri i\u00e7in bu paradigma ile uyumludur.<\/p>\n
\n  const products = [\n    { id: 1, name: 'Laptop', price: 1200 },\n    { id: 2, name: 'Mouse', price: 25 },\n    { id: 3, name: 'Keyboard', price: 75 }\n  ];\n\n  \/\/ Bir \u00fcr\u00fcn\u00fcn fiyat\u0131n\u0131 g\u00fcncelleme (immutable)\n  const updatedProducts = products.map(product =>\n    product.id === 2 ? { ...product, price: 30 } : product\n  );\n  console.log(\"Original products:\", products);\n  console.log(\"Updated products:\", updatedProducts);\n\n  \/\/ Belirli bir \u00fcr\u00fcn\u00fc silme (immutable)\n  const filteredProducts = products.filter(product => product.id !== 1);\n  console.log(\"Filtered products:\", filteredProducts);\n  <\/pre>\n
<\/code><\/p>\n
Her ne kadar immutable yakla\u015f\u0131mlar her de\u011fi\u015fiklikte yeni bir dizi olu\u015fturdu\u011fu i\u00e7in ek bellek t\u00fcketimi ve \u00e7\u00f6p toplama y\u00fck\u00fc getirse de, genellikle sunduklar\u0131 faydalar (daha \u00f6ng\u00f6r\u00fclebilir durum y\u00f6netimi, daha kolay hata ay\u0131klama, React'in sanal DOM fark alg\u0131lama mekanizmas\u0131yla uyum) bu maliyetin \u00f6n\u00fcne ge\u00e7er. Kritik performans senaryolar\u0131nda, mutasyonlar\u0131 dikkatli bir \u015fekilde kullanmak gerekebilir, ancak genel uygulama mant\u0131\u011f\u0131 i\u00e7in immutabilite g\u00fc\u00e7l\u00fc bir se\u00e7imdir.<\/p>\n
\n    Uzman \u0130pucu: \u00c7ok b\u00fcy\u00fck ve s\u0131k de\u011fi\u015fen veri k\u00fcmelerinde Immutable.js veya Immer gibi yard\u0131mc\u0131 k\u00fct\u00fcphaneler kullanarak, immutabiliteyi daha performansl\u0131 bir \u015fekilde y\u00f6netebilirsiniz. Bu k\u00fct\u00fcphaneler, yap\u0131sal payla\u015f\u0131m (structural sharing) sayesinde sadece de\u011fi\u015fen k\u0131s\u0131mlar\u0131 kopyalarak bellek ve CPU y\u00fck\u00fcn\u00fc azalt\u0131r.\n  <\/div>\n
Ger\u00e7ek D\u00fcnya Senaryolar\u0131nda Optimizasyon: Vaka Analizleri<\/h2>\n
Teorik bilgileri ve kod \u00f6rneklerini ger\u00e7ek d\u00fcnya problemlerine uygulamak, bu optimizasyon tekniklerinin de\u011ferini anlaman\u0131n en iyi yoludur. \u0130\u015fte s\u0131k\u00e7a kar\u015f\u0131la\u015f\u0131lan iki senaryo ve bunlarda \"masum\" dizi deseninden nas\u0131l ka\u00e7\u0131n\u0131laca\u011f\u0131:<\/p>\n
Vaka Analizi 1: Ger\u00e7ek Zamanl\u0131 Sohbet Uygulamas\u0131<\/h3>\n
Bir sohbet uygulamas\u0131nda, kullan\u0131c\u0131 yeni mesajlar g\u00f6nderdi\u011finde veya ald\u0131\u011f\u0131nda, bu mesajlar\u0131n sohbet penceresinde an\u0131nda g\u00f6r\u00fcnmesi gerekir. \u00c7o\u011fu zaman, en yeni mesaj en altta g\u00f6r\u00fcn\u00fcr ve kayd\u0131rma yaparak eski mesajlara ula\u015f\u0131l\u0131r. Ancak baz\u0131 tasar\u0131mlarda, en yeni mesaj\u0131n her zaman en \u00fcstte g\u00f6r\u00fcnmesi istenir (Facebook'un eski zaman t\u00fcneli veya baz\u0131 bildirim ak\u0131\u015flar\u0131 gibi). Geli\u015ftiricinin akl\u0131na ilk gelen \u00e7\u00f6z\u00fcm, yeni mesaj\u0131 mevcut mesajlar dizisinin ba\u015f\u0131na eklemek (unshift()<\/code>) olabilir.<\/p>\n
\n  \/\/ K\u00d6T\u00dc YAKLA\u015eIM: Yeni mesaj\u0131 dizinin ba\u015f\u0131na ekleme\n  let chatMessagesBad = [];\n  function addNewMessageBad(message) {\n    chatMessagesBad.unshift(message);\n    \/\/ UI'\u0131 g\u00fcncelle\n  }\n\n  \/\/ \u00d6rnek kullan\u0131m:\n  console.time('chat_unshift_perf');\n  for (let i = 0; i < 10000; i++) {\n    addNewMessageBad(Mesaj ${i}<\/code>);\n  }\n  console.timeEnd('chat_unshift_perf');\n  <\/pre>\n
<\/code><\/p>\n
Bu yakla\u015f\u0131m, \u00f6zellikle sohbet odas\u0131nda binlerce mesaj birikti\u011finde veya \u00e7ok say\u0131da kullan\u0131c\u0131n\u0131n ayn\u0131 anda mesaj g\u00f6nderdi\u011fi durumlarda ciddi performans sorunlar\u0131na yol a\u00e7ar. Her yeni mesaj geldi\u011finde, mevcut mesajlar\u0131n tamam\u0131 bellek i\u00e7inde kayd\u0131r\u0131l\u0131r, bu da kullan\u0131c\u0131 aray\u00fcz\u00fcnde tak\u0131lmalara neden olur.<\/p>\n
OPTIM\u0130ZE ED\u0130LM\u0130\u015e YAKLA\u015eIM:<\/strong> Yeni mesajlar\u0131 dizinin sonuna ekleyin ve g\u00f6r\u00fcnt\u00fcleme s\u0131ras\u0131nda tersine \u00e7evirin.<\/p>\n
\n  \/\/ \u0130Y\u0130 YAKLA\u015eIM: Yeni mesaj\u0131 dizinin sonuna ekleme ve g\u00f6r\u00fcnt\u00fcleme s\u0131ras\u0131nda tersine \u00e7evirme\n  let chatMessagesGood = [];\n  function addNewMessageGood(message) {\n    chatMessagesGood.push(message);\n    \/\/ UI'\u0131 g\u00fcncelle:\n    \/\/ \u00d6rne\u011fin React\/Vue'da component i\u00e7inde: chatMessagesGood.slice().reverse() ile render et.\n  }\n\n  \/\/ \u00d6rnek kullan\u0131m:\n  console.time('chat_push_and_reverse_perf');\n  for (let i = 0; i < 10000; i++) {\n    addNewMessageGood(Mesaj ${i}<\/code>);\n  }\n  \/\/ G\u00f6r\u00fcnt\u00fcleme an\u0131nda tersine \u00e7evirme maliyeti (bir kez):\n  \/\/ const reversedMessages = chatMessagesGood.slice().reverse();\n  console.timeEnd('chat_push_and_reverse_perf');\n  <\/pre>\n
<\/code><\/p>\n
Bu optimize edilmi\u015f yakla\u015f\u0131mda, her yeni mesaj eklendi\u011finde dizi sonuna ekleme i\u015flemi amortize edilmi\u015f O(1) maliyetine sahip olur. Diziyi tersine \u00e7evirme i\u015flemi (reverse()<\/code> veya slice().reverse()<\/code>), dizi boyutuyla orant\u0131l\u0131 (O(n)) bir maliyet ta\u015f\u0131sa da, bu i\u015flem genellikle yaln\u0131zca g\u00f6r\u00fcnt\u00fcleme s\u0131ras\u0131nda bir kez yap\u0131l\u0131r, her mesaj eklendi\u011finde de\u011fil. Bu, toplamda \u00e7ok daha verimli bir \u00e7\u00f6z\u00fcmd\u00fcr ve uygulaman\u0131n duyarl\u0131l\u0131\u011f\u0131n\u0131 art\u0131r\u0131r.<\/p>\n
Vaka Analizi 2: Dinamik Tablolar ve Filtreleme<\/h3>\n
B\u00fcy\u00fck veri setlerini i\u00e7eren dinamik bir tablo uygulamas\u0131nda, kullan\u0131c\u0131lar\u0131n verileri filtrelemesi, s\u0131ralamas\u0131 veya belirli \u00f6\u011feleri silmesi gerekebilir. Yanl\u0131\u015fl\u0131kla, filtrelenmi\u015f verileri olu\u015fturmak i\u00e7in s\u00fcrekli splice()<\/code> kullanmak veya eski verilerin \u00fczerine yazmak yerine, immutable yakla\u015f\u0131mlar\u0131 benimsemek performans a\u00e7\u0131s\u0131ndan \u00e7ok daha sa\u011fl\u0131kl\u0131d\u0131r.<\/p>\n
\n  const users = [\n    { id: 1, name: 'Alice', role: 'admin' },\n    { id: 2, name: 'Bob', role: 'user' },\n    { id: 3, name: 'Charlie', role: 'admin' },\n    { id: 4, name: 'David', role: 'user' }\n  ];\n\n  \/\/ K\u00d6T\u00dc YAKLA\u015eIM: Kullan\u0131c\u0131lar\u0131 silmek i\u00e7in do\u011frudan splice kullanmak (diziyi de\u011fi\u015ftirir)\n  \/\/ const deleteUserBad = (userId) => {\n  \/\/   const index = users.findIndex(user => user.id === userId);\n  \/\/   if (index > -1) {\n  \/\/     users.splice(index, 1);\n  \/\/   }\n  \/\/ };\n\n  \/\/ \u0130Y\u0130 YAKLA\u015eIM: Kullan\u0131c\u0131lar\u0131 immutable bir \u015fekilde filtrelemek\n  const deleteUserGood = (currentUsers, userIdToDelete) => {\n    return currentUsers.filter(user => user.id !== userIdToDelete);\n  };\n\n  let currentUsers = [...users]; \/\/ \u0130lk ba\u015fta kopyala\n  console.time('filter_users_perf');\n  currentUsers = deleteUserGood(currentUsers, 1); \/\/ Alice silindi\n  currentUsers = deleteUserGood(currentUsers, 3); \/\/ Charlie silindi\n  console.timeEnd('filter_users_perf');\n  console.log(\"Kalan kullan\u0131c\u0131lar:\", currentUsers);\n  <\/pre>\n
<\/code><\/p>\n
filter()<\/code> kullan\u0131m\u0131, her seferinde yeni bir dizi d\u00f6nd\u00fcrd\u00fc\u011f\u00fc i\u00e7in orijinal users<\/code> dizisini de\u011fi\u015ftirmez. Bu, \u00f6zellikle karma\u015f\u0131k kullan\u0131c\u0131 aray\u00fcz\u00fc \u00e7er\u00e7evelerinde, durum y\u00f6netimini basitle\u015ftirir ve beklenmedik yan etkileri \u00f6nler. Performans a\u00e7\u0131s\u0131ndan, filter()<\/code>'\u0131n maliyeti dizi boyutuyla orant\u0131l\u0131 olsa da, modern JavaScript motorlar\u0131 bu t\u00fcr immutable operasyonlar\u0131 olduk\u00e7a verimli bir \u015fekilde optimize edebilir. \u00d6nemli olan, bu operasyonlar\u0131 s\u0131k s\u0131k b\u00fcy\u00fck d\u00f6ng\u00fclerin i\u00e7inde tekrarlamaktan ka\u00e7\u0131nmakt\u0131r.<\/p>\n
Performans Testleri ve Mobil Uyumluluk \u0130pu\u00e7lar\u0131<\/h2>\n
Uygulaman\u0131zdaki performans sorunlar\u0131n\u0131 tespit etmek ve optimize etti\u011finizden emin olmak i\u00e7in d\u00fczenli testler yapmak \u00e7ok \u00f6nemlidir. JavaScript performans\u0131n\u0131 de\u011ferlendirmek i\u00e7in kullanabilece\u011finiz baz\u0131 ara\u00e7lar ve stratejiler bulunmaktad\u0131r.<\/p>\n
Performans Test Ara\u00e7lar\u0131<\/h3>\n
    \n
  • Taray\u0131c\u0131 Geli\u015ftirici Ara\u00e7lar\u0131 (DevTools):<\/strong> Modern taray\u0131c\u0131lar\u0131n (Chrome, Firefox, Edge) geli\u015ftirici ara\u00e7lar\u0131, performans profilleme i\u00e7in g\u00fc\u00e7l\u00fc yetenekler sunar.\n
      \n
    • Performance Sekmesi:<\/strong> Uygulaman\u0131z\u0131n ne kadar s\u00fcre boyunca CPU kulland\u0131\u011f\u0131n\u0131, hangi fonksiyonlar\u0131n en \u00e7ok zaman ald\u0131\u011f\u0131n\u0131, layout ve paint i\u015flemlerini g\u00f6rsel olarak g\u00f6sterir. Bu sayede tak\u0131lmalara neden olan JavaScript fonksiyonlar\u0131n\u0131 kolayca bulabilirsiniz.<\/li>\n
    • Memory Sekmesi:<\/strong> Bellek kullan\u0131m\u0131 ve \u00e7\u00f6p toplama (garbage collection) etkinliklerini izlemenizi sa\u011flar. \u00d6zellikle bellek s\u0131z\u0131nt\u0131lar\u0131n\u0131 veya gereksiz bellek tahsislerini tespit etmek i\u00e7in kullan\u0131\u015fl\u0131d\u0131r.<\/li>\n<\/ul>\n<\/li>\n
    • console.time()<\/code> ve console.timeEnd():<\/code><\/strong> JavaScript kodunuzun belirli b\u00f6l\u00fcmlerinin ne kadar s\u00fcrd\u00fc\u011f\u00fcn\u00fc \u00f6l\u00e7mek i\u00e7in basit ama etkili bir y\u00f6ntemdir.<\/li>\n<\/ul>\n
      \n  console.time('array_creation_time');\n  let largeArray = [];\n  for (let i = 0; i < 500000; i++) {\n    largeArray.push(i);\n  }\n  console.timeEnd('array_creation_time');\n  <\/pre>\n
      <\/code><\/p>\n
      Bu k\u00fc\u00e7\u00fck snippet, b\u00fcy\u00fck bir dizinin olu\u015fturulmas\u0131n\u0131n ne kadar s\u00fcrd\u00fc\u011f\u00fcn\u00fc \u00f6l\u00e7erek, potansiyel darbo\u011fazlar\u0131 belirlemenize yard\u0131mc\u0131 olabilir.<\/p>\n
      Mobil Cihazlarda Optimizasyonun \u00d6nemi<\/h3>\n
      G\u00fcn\u00fcm\u00fczde mobil cihazlar \u00fczerinden internet eri\u015fimi giderek art\u0131yor. Ancak mobil cihazlar genellikle daha s\u0131n\u0131rl\u0131 i\u015flem g\u00fcc\u00fcne, daha az belle\u011fe ve daha yava\u015f a\u011f ba\u011flant\u0131lar\u0131na sahiptir. Bu nedenle, masa\u00fcst\u00fc bilgisayarlarda kabul edilebilir g\u00f6r\u00fcnen performans sorunlar\u0131, mobil cihazlarda \u00e7ok daha belirgin hale gelebilir ve kullan\u0131c\u0131 deneyimini ciddi \u015fekilde d\u00fc\u015f\u00fcrebilir. Mobil cihazlar i\u00e7in optimizasyon yaparken \u015funlar\u0131 g\u00f6z \u00f6n\u00fcnde bulundurun:<\/p>\n
        \n
      • JavaScript Y\u00fck\u00fcn\u00fc Azalt\u0131n:<\/strong> Gereksiz k\u00fct\u00fcphanelerden ve a\u015f\u0131r\u0131 karma\u015f\u0131k DOM manip\u00fclasyonlar\u0131ndan ka\u00e7\u0131n\u0131n.<\/li>\n
      • Duyarl\u0131 Tasar\u0131m (Responsive Design):<\/strong> CSS media query'ler kullanarak farkl\u0131 ekran boyutlar\u0131na ve cihaz \u00f6zelliklerine g\u00f6re tasar\u0131mlar\u0131n\u0131z\u0131 optimize edin. Performans kritik \u00f6\u011feler i\u00e7in daha hafif versiyonlar sunabilirsiniz.<\/li>\n<\/ul>\n
        \n