String işlemleri, javascript programcılarının en sık yaptığı işlemlerdendir. En çokta bir nesneyi ya da sorgudan gelen veriyi serileştirmek gerektiğinde çeşitli string operatörlerine ve metodlarına başvurulur.
+= operatörü
Oldukça kullanışlı ve pratik bir operatördür. İki veya daha çok string veriyi birleştirmede kullanılabilir. Ama bir gerçekte vardır ki bu operatörü kullanan bir çok programcı performansın nasıl etkileneceğini bilmemektedir. ( IE’deki performans, göz ardı edilemeyecek kadar kötü! )
Javascript’teki string işlemlerini, motorun (javascript-engine) içinde bulunan global String nesnesi yürütür. Yaratılmış her metin aslında arka planda geçici bir String nesnesi haline getirilir. Ve işi bitince çöp toplayıcısı (garbage collector – gc) bu nesneyi bellekten siler.
var metinTutucu1 = "abcdefg";
var metinTutucu2 = new String("abcdefg");
Genelde birinci yolu tercih etmemizin nedeni pratik ve kolay anlaşılır olması. Ama isteyen gönül rahatlığıyla ikinciyi de kullanabilir.
Her metin aslında arka planda geçici bir String nesnesi haline getirilir demiştik. Bu sayede; String nesnesine ait metodların hepsini herhangi bir metnin üstüne direkt uygulayabiliriz.
Yukarıdaki satır bize 7 sonucu verecektir.
var metinTutucu = "bir";
metinTutucu += "iki";
metinTutucu += "üç";
metinTutucu += "dört";
alert(metinTutucu); // ekranda birikiüçdört uyarısını verir
+= operatörü kullanımı kolay olmakla beraber belleği en kötü kullanan, masraflı operatörlerden de biridir. Yukarıdaki 4 satırlık kod için bellekte 4 farklı yer kaplanır. Her bir += işleminden sonra bellekte yeni bir alan yaratılır ve yeni metin bu alanda tutulur. Bir önceki bellek alanı ise çöp toplayıcı tarafından silinmek üzere işaretlenir. Ama çöp toplayıcı biz isteyince gelip temizlik yapan bir hizmetçi olmadığı için bellekte bıraktığımız çöpleri ne zaman toplayacağını önceden kestiremeyiz.
Durum böyle olunca da, += operatörü nedeniyle bellekte bir çok yeni alan yaratmak ve bunların en sonuncusu hariç geride kalan bütün alanları çöp olarak bellekte bırakmamız gerekiyor. İşte bu nedenle += operatörü, büyük döngüler içinde kullanılmaya uygun olmayan, hep daha fazlasını isteyen şımarığın tekidir. Yolda gördüğü her şeyi elllediği ve istediği için de onunla seyahat etmek bazen çook ama çook sıkıcı ve yavaştır.
Ama sakın yanlış anlaşılmasın. Az sayıda string birleştirme işi yapılacaksa hiç çekinmeden += operatörünü kullanabilirsiniz. Basitlik her zaman düsturumuz olmalı. (Keep it simple stupid – Kiss)
Çözüm : Array.join() metodu
Özellikle büyük döngüler için çalışacaksanız ve string birleştirme işlemi yapacaksanız oldukça idealdir. Bütün browserlerde hızlı çalışır.
var tmpArray = [];
tmpArray.push("bir")
tmpArray.push("iki");
tmpArray.push("üç");
tmpArray.push("dört");
tmpArray.join("");
Birazdan göreceğiniz, tarayıcılara göre hız kıyaslaması sizi çok şaşırtacak. IE geliştirme takımı yine çuvallamış durumda!
Test Kodlarımız
5000 çevrimlik bir döngü oluşturdum ve her iki yöntemin ne kadar süre aldığını ölçtüm. Döngülerin her birini 50 kere çalıştırarak, her bir tarayıcı için en uzun, en kısa ve ortalama süreyi tespit ettim.
Kıyaslama sonuçları
| += |
IE 7.0 |
FF 3.0.1 |
Opera 9.51 |
Safari 3.1.2 |
| Toplam süre |
3.967sn |
0.122sn |
0.109sn |
0.203sn |
| En uzun süre |
0.094sn |
0.005sn |
0.016sn |
0.016sn |
| En kısa süre |
0.062sn |
0.002sn |
0sn |
0sn |
| Ortalama süre |
0.079 |
0.002sn |
0.002sn |
0.004sn |
| Array.join() |
IE 7.0 |
FF 3.0.1 |
Opera 9.51 |
Safari 3.1.2 |
| Toplam süre |
0.719sn |
0.160sn |
0.453sn |
0.141sn |
| En uzun süre |
0.031sn |
0.005sn |
0.016sn |
0.016sn |
| En kısa süre |
0sn |
0.002sn |
0sn |
0sn |
| Ortalama süre |
0.014sn |
0.003sn |
0.009sn |
0.003sn |
Sonuç olarak:
Safari ve Firefox neredeyse iki yöntemde de çok hızlı. Aradaki hız farkları göz ardı edilebilir. Dolayısıyla canımız hangi yöntemi isterse onu kullanabiliriz.
Opera ise ilginç bir şekilde += operatörünü kullandığımız birinci yöntemde daha başarılı. Array.join() yöntemindeki hızı, ilkine göre %300 yavaş.
IE’nin durumu tabloda çok açık ve net olarak görülüyor. İlk yöntemde neredeyse 4 saniyeye varan bir yavaşlık söz konusu. İkinci yöntemde kendini toparlıyor ama yine de diğerlerinin yanına bile yaklaşamıyor.
Javascript programcılarının hepsi IE’de karşılaştığımız bu problemi bilmeli ve önceden önlem alabilmeli. Ayrıca IE geliştirme takımı da artık bu tarz can sıkıcı problemleri gidermeli diye düşünüyorum. Kendinize iyi bakın ve kodlarken eğlenmeyi unutmayın.
Ayrıca inceleyin:
