Taray\u0131c\u0131da b\u00fcy\u00fck PDF’lerden g\u00f6r\u00fcnt\u00fc \u00e7\u0131karmak uygulamalar\u0131n\u0131z\u0131 yava\u015flatabilir. Bu makalede, performans\u0131 optimize etme, gecikmeyi azaltma ve daha ak\u0131c\u0131 bir kullan\u0131c\u0131 deneyimi sunma y\u00f6ntemlerini ke\u015ffedin.<\/p>\n
G\u00fcn\u00fcm\u00fcz web uygulamalar\u0131nda, kullan\u0131c\u0131lar\u0131n taray\u0131c\u0131 \u00fczerinden PDF dosyalar\u0131n\u0131 g\u00f6r\u00fcnt\u00fclemesi, d\u00fczenlemesi veya i\u00e7indeki verileri \u00e7\u0131karmas\u0131 yayg\u0131n bir gereksinim haline geldi. \u00d6zellikle a\u011f\u0131r, \u00e7ok sayfal\u0131 ve y\u00fcksek \u00e7\u00f6z\u00fcn\u00fcrl\u00fckl\u00fc g\u00f6rseller i\u00e7eren PDF’lerle \u00e7al\u0131\u015f\u0131rken, taray\u0131c\u0131 performans\u0131 ciddi anlamda d\u00fc\u015febilir. Bu durum, uygulaman\u0131n donmas\u0131na, yan\u0131t vermemesine ve kullan\u0131c\u0131 deneyiminin olumsuz etkilenmesine yol a\u00e7abilir. Bir e-ticaret sitesinde \u00fcr\u00fcn kataloglar\u0131n\u0131, bir e\u011fitim platformunda ders materyallerini veya bir dok\u00fcman y\u00f6netim sisteminde ar\u015fivlenmi\u015f belgeleri d\u00fc\u015f\u00fcnd\u00fc\u011f\u00fcm\u00fczde, PDF’lerden h\u0131zl\u0131 ve verimli bir \u015fekilde g\u00f6r\u00fcnt\u00fc \u00e7\u0131karma yetene\u011fi kritik bir \u00f6neme sahiptir. Bu makalede, taray\u0131c\u0131 tabanl\u0131 uygulamalar\u0131n\u0131zda PDF’lerden g\u00f6r\u00fcnt\u00fc \u00e7\u0131karma s\u00fcre\u00e7lerini nas\u0131l optimize edece\u011finizi, olas\u0131 gecikmeleri nas\u0131l \u00f6nleyece\u011finizi ve genel performans\u0131 nas\u0131l art\u0131raca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m inceleyece\u011fiz. Konuya s\u0131f\u0131rdan ba\u015flayan bir geli\u015ftiricinin bile kolayca anlayabilece\u011fi bir dille, temel kavramlardan ileri d\u00fczey tekniklere kadar her \u015feyi ele alaca\u011f\u0131z.<\/p>\n
Taray\u0131c\u0131da PDF dosyalar\u0131n\u0131 i\u015flemek ve \u00f6zellikle i\u00e7indeki g\u00f6r\u00fcnt\u00fcleri \u00e7\u0131karmak, g\u00f6r\u00fcnd\u00fc\u011f\u00fcnden \u00e7ok daha karma\u015f\u0131k bir s\u00fcre\u00e7tir ve beraberinde bir\u00e7ok zorlu\u011fu getirir. Bu zorluklar\u0131 anlamak, optimizasyon stratejileri geli\u015ftirmemizin ilk ad\u0131m\u0131d\u0131r. \u00d6ncelikle, PDF (Portable Document Format) yap\u0131s\u0131n\u0131n kendisi ba\u015fl\u0131 ba\u015f\u0131na bir meydan okumad\u0131r. PDF dosyalar\u0131, metin, vekt\u00f6r grafikleri, raster g\u00f6r\u00fcnt\u00fcler ve \u00e7e\u015fitli meta verileri hiyerar\u015fik bir yap\u0131da bir araya getirir. Bir taray\u0131c\u0131n\u0131n bu yap\u0131y\u0131 ayr\u0131\u015ft\u0131rmas\u0131 (parsing) ve yorumlamas\u0131 (rendering) \u00f6nemli miktarda i\u015flem g\u00fcc\u00fc ve bellek gerektirir.<\/p>\n
\u0130kinci olarak, taray\u0131c\u0131lar\u0131n do\u011fas\u0131 gere\u011fi getirdi\u011fi k\u0131s\u0131tlamalar vard\u0131r. Taray\u0131c\u0131lar, g\u00fcvenlik ve stabilite nedenleriyle belirli kaynaklara eri\u015fimi s\u0131n\u0131rlar ve JavaScript’in ana i\u015f par\u00e7ac\u0131\u011f\u0131nda (main thread) uzun s\u00fcreli, yo\u011fun i\u015flem yapmas\u0131n\u0131 engeller. E\u011fer bir PDF’den g\u00f6r\u00fcnt\u00fc \u00e7\u0131karma i\u015flemi ana i\u015f par\u00e7ac\u0131\u011f\u0131nda \u00e7ok uzun s\u00fcrerse, taray\u0131c\u0131 yan\u0131t vermeyi durdurur, kullan\u0131c\u0131 aray\u00fcz\u00fc donar ve bu da k\u00f6t\u00fc bir kullan\u0131c\u0131 deneyimine yol a\u00e7ar. Bu durum “UI blokaj\u0131” olarak bilinir. Ayr\u0131ca, taray\u0131c\u0131lar\u0131n bellek y\u00f6netimi de bir di\u011fer \u00f6nemli fakt\u00f6rd\u00fcr. B\u00fcy\u00fck PDF dosyalar\u0131 ve i\u00e7erdikleri y\u00fcksek \u00e7\u00f6z\u00fcn\u00fcrl\u00fckl\u00fc g\u00f6r\u00fcnt\u00fcler, taray\u0131c\u0131n\u0131n belle\u011fini h\u0131zla t\u00fcketebilir. Yetersiz bellek y\u00f6netimi, uygulaman\u0131n \u00e7\u00f6kmesine veya genel sistem performans\u0131n\u0131n d\u00fc\u015fmesine neden olabilir. Modern web uygulamalar\u0131, sadece PDF i\u015flemekle kalmay\u0131p, ayn\u0131 anda bir\u00e7ok farkl\u0131 g\u00f6revi de yerine getirdi\u011fi i\u00e7in bu bellek bask\u0131s\u0131 daha da artar.<\/p>\n
\u00dc\u00e7\u00fcnc\u00fc olarak, PDF i\u00e7erisindeki g\u00f6r\u00fcnt\u00fclerin farkl\u0131 formatlarda (JPEG, PNG, TIFF vb.) ve farkl\u0131 s\u0131k\u0131\u015ft\u0131rma algoritmalar\u0131yla saklanabilmesi, \u00e7\u0131karma s\u00fcrecini daha da karma\u015f\u0131k hale getirir. Taray\u0131c\u0131n\u0131n bu farkl\u0131 formatlar\u0131 ve s\u0131k\u0131\u015ft\u0131rmalar\u0131 do\u011fru bir \u015fekilde \u00e7\u00f6zmesi (decompress) ve i\u015flenmeye haz\u0131r hale getirmesi gerekir. Bu \u00e7\u00f6zme i\u015flemleri de CPU \u00fczerinde yo\u011fun bir y\u00fck olu\u015fturur. Ayr\u0131ca, baz\u0131 PDF’ler \u015fifreli olabilir veya \u00f6zel fontlar i\u00e7erebilir; bu da ek i\u015flem ad\u0131mlar\u0131 gerektirir. T\u00fcm bu fakt\u00f6rler bir araya geldi\u011finde, taray\u0131c\u0131 tabanl\u0131 bir ortamda PDF’lerden g\u00f6r\u00fcnt\u00fc \u00e7\u0131karmak, dikkatli bir planlama ve optimizasyon gerektiren teknik bir problem haline gelir. Bu zorluklar\u0131 a\u015fmak i\u00e7in, hem do\u011fru ara\u00e7lar\u0131 se\u00e7mek hem de verimli kodlama pratiklerini benimsemek kritik \u00f6neme sahiptir.<\/p>\n
Taray\u0131c\u0131da PDF i\u015fleme ve \u00f6zellikle g\u00f6r\u00fcnt\u00fc \u00e7\u0131karma s\u00fcre\u00e7lerini kolayla\u015ft\u0131rmak ve optimize etmek i\u00e7in geli\u015ftirilmi\u015f bir\u00e7ok JavaScript k\u00fct\u00fcphanesi bulunmaktad\u0131r. Bu k\u00fct\u00fcphaneler, PDF yap\u0131s\u0131n\u0131 ayr\u0131\u015ft\u0131rma, sayfalar\u0131 i\u015fleme ve i\u00e7eri\u011fi g\u00f6rselle\u015ftirme gibi karma\u015f\u0131k g\u00f6revleri \u00fcstlenerek geli\u015ftiricilere b\u00fcy\u00fck kolayl\u0131k sa\u011flar. Do\u011fru k\u00fct\u00fcphaneyi se\u00e7mek, projenizin performans\u0131n\u0131 ve geli\u015ftirme s\u00fcrecini do\u011frudan etkileyecektir. Bu alandaki en pop\u00fcler ve g\u00fc\u00e7l\u00fc k\u00fct\u00fcphanelerden biri \u015f\u00fcphesiz PDF.js: Mozilla’n\u0131n A\u00e7\u0131k Kaynak G\u00fcc\u00fc<\/strong><\/p>\n Mozilla taraf\u0131ndan geli\u015ftirilen Bir ba\u015fka alternatif ise Neden PDF.js Tercih Edilmeli?<\/strong><\/p>\n \u00d6zellikle a\u011f\u0131r PDF’lerden g\u00f6r\u00fcnt\u00fc \u00e7\u0131karma senaryolar\u0131nda \u00d6zetle, taray\u0131c\u0131 tabanl\u0131 PDF g\u00f6r\u00fcnt\u00fc \u00e7\u0131karma projelerinizde A\u011f\u0131r PDF’lerden g\u00f6r\u00fcnt\u00fc \u00e7\u0131karma s\u00fcrecini optimize etmek, kullan\u0131c\u0131 deneyimini do\u011frudan etkileyen kritik bir ad\u0131md\u0131r. Bu s\u00fcre\u00e7te performans\u0131 art\u0131rmak i\u00e7in birden fazla teknik ve strateji bir arada kullan\u0131lmal\u0131d\u0131r. \u0130\u015fte bu optimizasyonu sa\u011flayacak temel y\u00f6ntemler:<\/p>\n B\u00fcy\u00fck PDF dosyalar\u0131n\u0131 tek seferde i\u015flemek, taray\u0131c\u0131n\u0131n ana i\u015f par\u00e7ac\u0131\u011f\u0131n\u0131 (main thread) bloke ederek uygulaman\u0131n donmas\u0131na neden olabilir. Bu durumu \u00f6nlemek i\u00e7in, PDF’yi par\u00e7alara ay\u0131rarak veya sayfa baz\u0131nda i\u015flem yaparak y\u00fck\u00fc da\u011f\u0131tmak etkili bir y\u00f6ntemdir. Par\u00e7al\u0131 i\u015fleme (chunking), \u00f6zellikle \u00e7ok sayfal\u0131 PDF’lerde, t\u00fcm sayfalar\u0131 ayn\u0131 anda y\u00fcklemek yerine, sadece kullan\u0131c\u0131n\u0131n o an g\u00f6r\u00fcnt\u00fcledi\u011fi veya yak\u0131n zamanda g\u00f6r\u00fcnt\u00fcleyebilece\u011fi sayfalar\u0131 i\u015flemeyi i\u00e7erir. \u00d6rne\u011fin, bir PDF’de 100 sayfa varsa ve kullan\u0131c\u0131 ilk sayfay\u0131 g\u00f6r\u00fcnt\u00fcl\u00fcyorsa, sadece ilk sayfay\u0131 i\u015fleyip g\u00f6r\u00fcnt\u00fclerini \u00e7\u0131karmak, geri kalan 99 sayfan\u0131n i\u015flenmesini ertelemek performans\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131r.<\/p>\n Bu yakla\u015f\u0131m, “lazy loading” (tembel y\u00fckleme) prensibine dayan\u0131r. Kullan\u0131c\u0131 a\u015fa\u011f\u0131 kayd\u0131rd\u0131k\u00e7a veya belirli bir sayfaya atlad\u0131k\u00e7a, ilgili sayfalar dinamik olarak y\u00fcklenir ve i\u015flenir. Bu, ba\u015flang\u0131\u00e7 y\u00fckleme s\u00fcresini k\u0131salt\u0131r ve taray\u0131c\u0131n\u0131n bellek kullan\u0131m\u0131n\u0131 azalt\u0131r. Bu y\u00f6ntemle, sadece istenilen sayfalar\u0131n g\u00f6r\u00fcnt\u00fcleri \u00e7\u0131kar\u0131l\u0131r ve bellekte gereksiz yer kaplamaz. Kullan\u0131c\u0131 etkile\u015fimine ba\u011fl\u0131 olarak di\u011fer sayfalar i\u00e7in de benzer i\u015flemler tekrarlan\u0131r.<\/p>\n JavaScript’in tek i\u015f par\u00e7ac\u0131kl\u0131 (single-threaded) yap\u0131s\u0131, taray\u0131c\u0131da uzun s\u00fcreli ve yo\u011fun i\u015flemlerin performans sorunlar\u0131na yol a\u00e7mas\u0131n\u0131n ana nedenidir. Bu t\u00fcr i\u015flemleri ana i\u015f par\u00e7ac\u0131\u011f\u0131ndan ay\u0131rarak, kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fcn ak\u0131c\u0131 kalmas\u0131n\u0131 sa\u011flamak i\u00e7in Web Workers kullan\u0131l\u0131r. Web Workers, JavaScript kodunu ana i\u015f par\u00e7ac\u0131\u011f\u0131ndan ba\u011f\u0131ms\u0131z bir arka plan i\u015f par\u00e7ac\u0131\u011f\u0131nda \u00e7al\u0131\u015ft\u0131rman\u0131za olanak tan\u0131r. Bu, PDF ayr\u0131\u015ft\u0131rma, g\u00f6r\u00fcnt\u00fc \u00e7\u00f6zme ve Canvas’a \u00e7izim gibi zaman al\u0131c\u0131 g\u00f6revleri Web Worker’a devrederek, ana i\u015f par\u00e7ac\u0131\u011f\u0131n\u0131n kullan\u0131c\u0131 etkile\u015fimlerine ve UI g\u00fcncellemelerine yan\u0131t vermeye devam etmesini sa\u011flar.<\/p>\n Bu yap\u0131, \u00f6zellikle b\u00fcy\u00fck g\u00f6r\u00fcnt\u00fc dosyalar\u0131n\u0131n i\u015flenmesi veya karma\u015f\u0131k grafik manip\u00fclasyonlar\u0131 yap\u0131lmas\u0131 gerekti\u011finde hayati \u00f6neme sahiptir. Kullan\u0131c\u0131lar, PDF i\u015flenirken bile sayfay\u0131 kayd\u0131rmaya, d\u00fc\u011fmelere t\u0131klamaya veya di\u011fer aray\u00fcz elemanlar\u0131yla etkile\u015fime ge\u00e7meye devam edebilirler.<\/p>\n PDF sayfalar\u0131n\u0131 Canvas elementine \u00e7izmek ve ard\u0131ndan bu Canvas’tan g\u00f6r\u00fcnt\u00fc \u00e7\u0131karmak yayg\u0131n bir y\u00f6ntemdir. Ancak bu s\u00fcre\u00e7te de performans optimizasyonlar\u0131 yapmak m\u00fcmk\u00fcnd\u00fcr. \u0130lk olarak, Canvas boyutunu do\u011fru ayarlamak \u00f6nemlidir. E\u011fer g\u00f6r\u00fcnt\u00fcy\u00fc k\u00fc\u00e7\u00fck bir \u00f6nizleme olarak kullanacaksan\u0131z, Canvas’\u0131 gereksiz yere y\u00fcksek \u00e7\u00f6z\u00fcn\u00fcrl\u00fckte olu\u015fturmak bellek ve i\u015flemci y\u00fck\u00fcn\u00fc art\u0131r\u0131r. \u0130htiya\u00e7 duyulan maksimum boyutu ve \u00e7\u00f6z\u00fcn\u00fcrl\u00fc\u011f\u00fc belirleyerek Canvas’\u0131 buna g\u00f6re \u00f6l\u00e7eklendirin. \u0130kinci olarak, Canvas’tan g\u00f6r\u00fcnt\u00fc \u00e7\u0131kar\u0131rken do\u011fru format\u0131 se\u00e7mek \u00f6nemlidir. E\u011fer \u00e7\u0131kar\u0131lan g\u00f6r\u00fcnt\u00fcler daha sonra sunucuya y\u00fcklenecekse veya yo\u011fun bir \u015fekilde kullan\u0131lacaksa, dosya boyutunu minimumda tutmak i\u00e7in JPEG veya WebP tercih edilebilir. \u015eeffafl\u0131k gerektiren durumlarda PNG ka\u00e7\u0131n\u0131lmazd\u0131r. Ayr\u0131ca, \u00e7\u0131kar\u0131lan g\u00f6r\u00fcnt\u00fclerin bellekte uzun s\u00fcre kalmamas\u0131 i\u00e7in, i\u015finiz bittikten sonra Bu optimizasyon teknikleri, PDF’lerden g\u00f6r\u00fcnt\u00fc \u00e7\u0131karma s\u00fcrecini daha verimli hale getirerek uygulaman\u0131z\u0131n genel performans\u0131n\u0131 ve kullan\u0131c\u0131 deneyimini \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirecektir.<\/p>\n Performans optimizasyonunda CPU y\u00fck\u00fcn\u00fc azaltmak kadar, bellek kullan\u0131m\u0131n\u0131 etkin bir \u015fekilde y\u00f6netmek de hayati \u00f6neme sahiptir. \u00d6zellikle b\u00fcy\u00fck PDF dosyalar\u0131 ve y\u00fcksek \u00e7\u00f6z\u00fcn\u00fcrl\u00fckl\u00fc g\u00f6r\u00fcnt\u00fclerin i\u015flenmesi, taray\u0131c\u0131 belle\u011fini h\u0131zla t\u00fcketebilir ve uygulaman\u0131n yava\u015flamas\u0131na veya \u00e7\u00f6kmesine neden olabilir. \u0130\u015fte bellek kullan\u0131m\u0131n\u0131 azaltmak i\u00e7in kullanabilece\u011finiz ileri d\u00fczey teknikler:<\/p>\n JavaScript, otomatik \u00e7\u00f6p toplama (garbage collection) mekanizmas\u0131na sahiptir; yani, art\u0131k hi\u00e7bir referans\u0131 olmayan nesneleri otomatik olarak bellekten temizler. Ancak, web uygulamalar\u0131nda, \u00f6zellikle DOM manip\u00fclasyonlar\u0131 ve b\u00fcy\u00fck veri yap\u0131lar\u0131yla \u00e7al\u0131\u015f\u0131rken, yanl\u0131\u015fl\u0131kla nesnelere referans tutmaya devam etmek bellek s\u0131z\u0131nt\u0131lar\u0131na (memory leaks) yol a\u00e7abilir. PDF i\u015fleme senaryosunda, \u00e7\u0131kar\u0131lan g\u00f6r\u00fcnt\u00fcler, ge\u00e7ici Canvas elementleri veya PDF nesnelerinin kendisi, i\u015fleri bittikten sonra do\u011fru \u015fekilde serbest b\u0131rak\u0131lmazsa bellek s\u0131z\u0131nt\u0131lar\u0131na neden olabilir.<\/p>\n Bu durumu y\u00f6netmek i\u00e7in \u015funlara dikkat edin:<\/p>\n Taray\u0131c\u0131da bir Bu pratik, \u00f6zellikle \u00e7ok say\u0131da g\u00f6r\u00fcnt\u00fc \u00e7\u0131kar\u0131p dinamik olarak g\u00f6sterdi\u011finiz veya indirdi\u011finiz senaryolarda kritik \u00f6neme sahiptir.<\/p>\n A\u011f\u0131r PDF’lerden g\u00f6r\u00fcnt\u00fc \u00e7\u0131kar\u0131rken, ayn\u0131 PDF’ye veya ayn\u0131 sayfalara tekrar tekrar eri\u015fim ihtimali vard\u0131r. Bu durumda, taray\u0131c\u0131 \u00f6nbellekleme stratejilerini kullanarak performans\u0131 art\u0131rabilir ve bellek y\u00fck\u00fcn\u00fc y\u00f6netebilirsiniz. \u00c7\u0131kar\u0131lan g\u00f6r\u00fcnt\u00fcleri veya PDF sayfalar\u0131n\u0131n i\u015flenmi\u015f hallerini istemci taraf\u0131nda \u00f6nbelle\u011fe almak, ayn\u0131 verinin tekrar i\u015flenmesini veya a\u011f \u00fczerinden indirilmesini engeller.<\/p>\n \u00d6nbellekleme stratejilerini uygularken, \u00f6nbelle\u011fin boyutunu ve temizleme politikalar\u0131n\u0131 (ne zaman eski verilerin silinece\u011fi) dikkatlice planlamak \u00f6nemlidir. Yanl\u0131\u015f y\u00f6netilen \u00f6nbellekler, disk alan\u0131 t\u00fcketimi veya g\u00fcncel olmayan verilerin sunulmas\u0131 gibi sorunlara yol a\u00e7abilir.<\/p>\n Bu ileri d\u00fczey teknikler, bellek kullan\u0131m\u0131n\u0131 optimize ederek uygulaman\u0131z\u0131n daha kararl\u0131 ve performansl\u0131 \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flar, b\u00f6ylece kullan\u0131c\u0131lar\u0131n\u0131za kesintisiz bir deneyim sunabilirsiniz.<\/p>\n Teorik bilgileri ve teknik optimizasyonlar\u0131 bir araya getirmek, ger\u00e7ek d\u00fcnya uygulamalar\u0131nda nas\u0131l bir fark yaratt\u0131\u011f\u0131n\u0131 anlamak i\u00e7in bir vaka analizi inceleyelim. Senaryomuz, b\u00fcy\u00fck bir in\u015faat firmas\u0131n\u0131n proje y\u00f6netim platformu olsun. Bu platformda, m\u00fchendisler ve mimarlar, y\u00fczlerce sayfadan olu\u015fan, y\u00fcksek \u00e7\u00f6z\u00fcn\u00fcrl\u00fckl\u00fc \u00e7izimler ve \u015femalar i\u00e7eren devasa PDF dosyalar\u0131n\u0131 taray\u0131c\u0131 \u00fczerinden g\u00f6r\u00fcnt\u00fcl\u00fcyor, belirli b\u00f6lgelerine notlar ekliyor ve gerekti\u011finde bu \u00e7izimlerin belirli b\u00f6l\u00fcmlerinin g\u00f6r\u00fcnt\u00fclerini \u00e7\u0131kararak raporlara ekliyorlar. Ba\u015flang\u0131\u00e7ta, platformun PDF i\u015fleme yetenekleri olduk\u00e7a yava\u015ft\u0131 ve m\u00fchendisler s\u00fcrekli olarak “uygulama donuyor” veya “g\u00f6r\u00fcnt\u00fcler \u00e7ok ge\u00e7 y\u00fckleniyor” \u015fikayetleriyle kar\u015f\u0131la\u015f\u0131yordu. \u00d6zellikle 50 MB \u00fczeri PDF’lerde bu sorunlar daha da belirginle\u015fiyordu.<\/p>\n Ekip, kullan\u0131c\u0131 \u015fikayetlerini inceledi\u011finde, ana i\u015f par\u00e7ac\u0131\u011f\u0131n\u0131n uzun s\u00fcreler boyunca bloke oldu\u011funu ve bellek kullan\u0131m\u0131n\u0131n h\u0131zla 1 GB’\u0131n \u00fczerine \u00e7\u0131kt\u0131\u011f\u0131n\u0131 g\u00f6zlemledi. Her sayfa y\u00fcklendi\u011finde, t\u00fcm PDF’nin yeniden ayr\u0131\u015ft\u0131r\u0131lmaya \u00e7al\u0131\u015f\u0131ld\u0131\u011f\u0131 ve t\u00fcm sayfalar\u0131n ayn\u0131 anda Canvas’a \u00e7izilerek bellek s\u0131z\u0131nt\u0131lar\u0131na neden oldu\u011fu anla\u015f\u0131ld\u0131. \u0130lk yakla\u015f\u0131m, \u0130lk ve en \u00f6nemli ad\u0131m, PDF ayr\u0131\u015ft\u0131rma ve sayfa \u00e7izim i\u015flemlerini ana i\u015f par\u00e7ac\u0131\u011f\u0131ndan Web Workers’a ta\u015f\u0131mak oldu. Bu yakla\u015f\u0131m, \u00f6zellikle OffscreenCanvas API’si ile birle\u015fti\u011finde, taray\u0131c\u0131 penceresinden ba\u011f\u0131ms\u0131z olarak Canvas i\u015flemlerinin arka planda yap\u0131lmas\u0131n\u0131 sa\u011flayarak performans\u0131 daha da art\u0131rd\u0131.<\/p>\n<\/li>\n T\u00fcm PDF’yi ayn\u0131 anda y\u00fcklemek yerine, sadece kullan\u0131c\u0131n\u0131n g\u00f6r\u00fcnt\u00fcledi\u011fi sayfa ve bir sonraki sayfa y\u00fcklendi. Di\u011fer sayfalar ise kullan\u0131c\u0131 kayd\u0131rd\u0131k\u00e7a dinamik olarak y\u00fcklendi. Y\u00fcklenen sayfalar\u0131n i\u015flenmi\u015f Canvas g\u00f6r\u00fcnt\u00fcleri, IndexedDB’de veya basit bir haf\u0131za \u00f6nbelle\u011finde (kullan\u0131c\u0131 oturumu boyunca) sakland\u0131. Bu, ayn\u0131 sayfaya tekrar eri\u015fildi\u011finde yeniden i\u015fleme ihtiyac\u0131n\u0131 ortadan kald\u0131rd\u0131.<\/p>\n \u00c7\u0131kar\u0131lan \u00e7izimler genellikle \u00e7ok fazla detay i\u00e7erdi\u011fi i\u00e7in JPEG format\u0131 tercih edildi, ancak kalite ayar\u0131 0.9’dan 0.8’e d\u00fc\u015f\u00fcr\u00fclerek dosya boyutlar\u0131nda %15-20’lik bir azalma sa\u011fland\u0131. Ayr\u0131ca, \u00f6nizleme g\u00f6r\u00fcnt\u00fcleri i\u00e7in daha d\u00fc\u015f\u00fck bir Olu\u015fturulan her Bu optimizasyon ad\u0131mlar\u0131 sayesinde, proje y\u00f6netim platformundaki PDF g\u00f6r\u00fcnt\u00fcleme ve g\u00f6r\u00fcnt\u00fc \u00e7\u0131karma performans\u0131 dramatik bir \u015fekilde iyile\u015fti. 50 MB’l\u0131k PDF’lerin ilk sayfa y\u00fckleme s\u00fcresi 8-10 saniyeden 2-3 saniyeye d\u00fc\u015ft\u00fc. Uygulaman\u0131n donma \u015fikayetleri ortadan kalkt\u0131 ve bellek kullan\u0131m\u0131, yo\u011fun PDF i\u015fleme anlar\u0131nda bile 500 MB’\u0131n alt\u0131nda tutulabildi. Kullan\u0131c\u0131lar art\u0131k \u00e7izimler \u00fczerinde ak\u0131c\u0131 bir \u015fekilde gezinebiliyor, notlar ekleyebiliyor ve ihtiya\u00e7 duyduklar\u0131 g\u00f6r\u00fcnt\u00fcleri an\u0131nda \u00e7\u0131karabiliyorlard\u0131. Bu vaka analizi, do\u011fru stratejiler ve tekniklerle, taray\u0131c\u0131 tabanl\u0131 a\u011f\u0131r PDF i\u015fleme zorluklar\u0131n\u0131n \u00fcstesinden gelmenin m\u00fcmk\u00fcn oldu\u011funu a\u00e7\u0131k\u00e7a g\u00f6stermektedir.<\/p>\n Web teknolojileri s\u00fcrekli geli\u015fiyor ve taray\u0131c\u0131 tabanl\u0131 uygulamalar\u0131n performans s\u0131n\u0131rlar\u0131 her ge\u00e7en g\u00fcn daha da zorlan\u0131yor. A\u011f\u0131r PDF’lerden g\u00f6r\u00fcnt\u00fc \u00e7\u0131karma gibi hesaplama yo\u011fun g\u00f6revler i\u00e7in mevcut JavaScript tabanl\u0131 \u00e7\u00f6z\u00fcmler olduk\u00e7a etkili olsa da, daha da y\u00fcksek performans ve verimlilik aray\u0131\u015f\u0131 devam etmektedir. Bu ba\u011flamda, WebAssembly (Wasm) ve GPU h\u0131zland\u0131rma teknolojileri, gelecekteki optimizasyonlar i\u00e7in b\u00fcy\u00fck potansiyel sunmaktad\u0131r.<\/p>\n WebAssembly, modern web taray\u0131c\u0131lar\u0131nda \u00e7al\u0131\u015ft\u0131r\u0131labilen d\u00fc\u015f\u00fck seviyeli bir ikili kod format\u0131d\u0131r. C, C++, Rust gibi dillerde yaz\u0131lm\u0131\u015f kodlar\u0131n web ortam\u0131nda neredeyse yerel (native) performansta \u00e7al\u0131\u015ft\u0131r\u0131lmas\u0131na olanak tan\u0131r. Bu, \u00f6zellikle CPU yo\u011fun algoritmalar ve karma\u015f\u0131k veri i\u015fleme g\u00f6revleri i\u00e7in JavaScript’e g\u00f6re \u00f6nemli performans avantajlar\u0131 sa\u011flayabilir. PDF i\u015fleme ve g\u00f6r\u00fcnt\u00fc \u00e7\u0131karma ba\u011flam\u0131nda WebAssembly’nin potansiyeli olduk\u00e7a b\u00fcy\u00fckt\u00fcr:<\/p>\n Mevcut Grafik \u0130\u015flem Birimleri (GPU’lar), paralel i\u015flem g\u00fcc\u00fc sayesinde \u00f6zellikle grafik ve g\u00f6r\u00fcnt\u00fc i\u015fleme g\u00f6revlerinde CPU’lara g\u00f6re \u00e7ok daha \u00fcst\u00fcn performans sunar. Web ortam\u0131nda GPU h\u0131zland\u0131rmadan yararlanmak i\u00e7in WebGL ve gelecekte WebGPU gibi API’ler bulunmaktad\u0131r. PDF’lerden g\u00f6r\u00fcnt\u00fc \u00e7\u0131karma ve i\u015fleme s\u00fcre\u00e7lerinde GPU h\u0131zland\u0131rman\u0131n potansiyeli \u015funlard\u0131r:<\/p>\n \u015eu anda, Sonu\u00e7 olarak, WebAssembly ve GPU h\u0131zland\u0131rma, taray\u0131c\u0131 tabanl\u0131 a\u011f\u0131r PDF’lerden g\u00f6r\u00fcnt\u00fc \u00e7\u0131karma ve i\u015fleme s\u00fcre\u00e7lerinde mevcut optimizasyonlar\u0131n \u00f6tesine ge\u00e7erek, gelecekte daha da h\u0131zl\u0131 ve verimli \u00e7\u00f6z\u00fcmler sunma potansiyeli ta\u015f\u0131maktad\u0131r. Bu teknolojilerin yak\u0131ndan takip edilmesi ve projelere entegre edilmesi, web uygulamalar\u0131n\u0131n performans \u00e7\u0131tas\u0131n\u0131 y\u00fckseltecektir.<\/p>\n Bu makale boyunca, taray\u0131c\u0131 tabanl\u0131 uygulamalarda a\u011f\u0131r PDF dosyalar\u0131ndan g\u00f6r\u00fcnt\u00fc \u00e7\u0131karma s\u00fcrecinde kar\u015f\u0131la\u015f\u0131lan gecikme ve performans sorunlar\u0131n\u0131 ele ald\u0131k. PDF’lerin karma\u015f\u0131k yap\u0131s\u0131ndan taray\u0131c\u0131 k\u0131s\u0131tlamalar\u0131na, bellek y\u00f6netiminden CPU y\u00fck\u00fcne kadar bir\u00e7ok temel zorlu\u011fu inceledik. Ard\u0131ndan, bu zorluklar\u0131n \u00fcstesinden gelmek i\u00e7in pratik ve ileri d\u00fczey optimizasyon tekniklerini detayland\u0131rd\u0131k. Unutmayal\u0131m ki, web uygulamalar\u0131nda performans optimizasyonu s\u00fcrekli bir s\u00fcre\u00e7tir. Kullan\u0131c\u0131 beklentileri artt\u0131k\u00e7a ve PDF dosyalar\u0131 daha da karma\u015f\u0131kla\u015ft\u0131k\u00e7a, geli\u015ftiricilerin bu yeni teknolojileri ve en iyi pratikleri uygulamaya devam etmesi gerekecektir. Bu makalede sunulan bilgiler ve teknikler, taray\u0131c\u0131 tabanl\u0131 PDF i\u015fleme yeteneklerinizi bir sonraki seviyeye ta\u015f\u0131man\u0131z i\u00e7in sa\u011flam bir temel olu\u015fturacakt\u0131r. Art\u0131k “lag” sorunlar\u0131na veda etme ve kullan\u0131c\u0131lar\u0131n\u0131za ak\u0131c\u0131, h\u0131zl\u0131 ve kesintisiz bir deneyim sunma zaman\u0131!<\/p>\n En b\u00fcy\u00fck sorun genellikle taray\u0131c\u0131n\u0131n ana i\u015f par\u00e7ac\u0131\u011f\u0131n\u0131n (main thread) uzun s\u00fcreli ve yo\u011fun i\u015flemlerle bloke olmas\u0131d\u0131r. Bu durum, PDF’nin ayr\u0131\u015ft\u0131r\u0131lmas\u0131, sayfalar\u0131n Canvas’a \u00e7izilmesi ve b\u00fcy\u00fck g\u00f6r\u00fcnt\u00fclerin \u00e7\u00f6z\u00fclmesi (decompress) gibi ad\u0131mlarda meydana gelir. Sonu\u00e7 olarak, kullan\u0131c\u0131 aray\u00fcz\u00fc donar ve uygulama yan\u0131t vermez.<\/p>\n<\/li>\n Web Workers, JavaScript kodunu ana i\u015f par\u00e7ac\u0131\u011f\u0131ndan ba\u011f\u0131ms\u0131z bir arka plan i\u015f par\u00e7ac\u0131\u011f\u0131nda \u00e7al\u0131\u015ft\u0131rman\u0131za olanak tan\u0131r. Bu sayede, PDF i\u015fleme gibi zaman al\u0131c\u0131 g\u00f6revler ana i\u015f par\u00e7ac\u0131\u011f\u0131n\u0131 bloke etmeden arka planda y\u00fcr\u00fct\u00fcl\u00fcr, b\u00f6ylece kullan\u0131c\u0131 aray\u00fcz\u00fc ak\u0131c\u0131 kal\u0131r ve kullan\u0131c\u0131 etkile\u015fimlerine an\u0131nda yan\u0131t verebilir.<\/p>\n<\/li>\n Dosya boyutunu k\u00fc\u00e7\u00fcltmek ve iyi kaliteyi korumak i\u00e7in genellikle JPEG veya WebP formatlar\u0131 tercih edilir. JPEG, foto\u011fraf tabanl\u0131 g\u00f6r\u00fcnt\u00fcler i\u00e7in kay\u0131pl\u0131 s\u0131k\u0131\u015ft\u0131rma sunar ve kalite ayar\u0131yla dosya boyutunu kontrol edebilirsiniz. WebP ise hem kay\u0131pl\u0131 hem de kay\u0131ps\u0131z s\u0131k\u0131\u015ft\u0131rma se\u00e7enekleriyle JPEG ve PNG’ye g\u00f6re daha k\u00fc\u00e7\u00fck dosya boyutlar\u0131nda daha iyi kalite sunabilir ve modern taray\u0131c\u0131larda geni\u015f deste\u011fe sahiptir. \u015eeffafl\u0131k gerektiren durumlarda ise PNG format\u0131 ka\u00e7\u0131n\u0131lmazd\u0131r.<\/p>\n<\/li>\n Bellek s\u0131z\u0131nt\u0131lar\u0131n\u0131 \u00f6nlemek i\u00e7in, i\u015finiz bittikten sonra nesnelere olan referanslar\u0131 WebAssembly (Wasm), C\/C++\/Rust gibi dillerde yaz\u0131lm\u0131\u015f kodlar\u0131n web ortam\u0131nda neredeyse yerel h\u0131zda \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flayarak PDF ayr\u0131\u015ft\u0131rma, g\u00f6r\u00fcnt\u00fc \u00e7\u00f6zme ve manip\u00fclasyon gibi CPU yo\u011fun g\u00f6revlerde \u00f6nemli performans art\u0131\u015flar\u0131 sunabilir. GPU h\u0131zland\u0131rma ise WebGL veya WebGPU arac\u0131l\u0131\u011f\u0131yla, Canvas \u00fczerindeki \u00e7izim ve piksel tabanl\u0131 g\u00f6r\u00fcnt\u00fc i\u015fleme g\u00f6revlerini do\u011frudan grafik i\u015flem birimine devrederek, \u00f6zellikle y\u00fcksek \u00e7\u00f6z\u00fcn\u00fcrl\u00fckl\u00fc g\u00f6rsel i\u015flemlerin \u00e7ok daha h\u0131zl\u0131 yap\u0131lmas\u0131n\u0131 sa\u011flayabilir. Bu teknolojiler, gelecekteki performans optimizasyonlar\u0131 i\u00e7in b\u00fcy\u00fck potansiyel ta\u015f\u0131maktad\u0131r.<\/p>\n<\/li>\n<\/ol>\n #Teknoloji #WebGeli\u015ftirme #PDFOptimizasyonu #Taray\u0131c\u0131Performans\u0131 #JavaScript<\/p>\n","protected":false},"excerpt":{"rendered":"Taray\u0131c\u0131da b\u00fcy\u00fck PDF’lerden g\u00f6r\u00fcnt\u00fc \u00e7\u0131karmak uygulamalar\u0131n\u0131z\u0131 yava\u015flatabilir.","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-42158","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\npdf.js<\/code>‘dir.<\/p>\npdf.js<\/code>, bir HTML5 tabanl\u0131 PDF g\u00f6r\u00fcnt\u00fcleyici k\u00fct\u00fcphanesidir. PDF dosyalar\u0131n\u0131 do\u011frudan taray\u0131c\u0131da, herhangi bir eklentiye ihtiya\u00e7 duymadan i\u015fleyebilir ve HTML Canvas elementi \u00fczerine \u00e7izebilir. Bu k\u00fct\u00fcphane, Firefox taray\u0131c\u0131s\u0131n\u0131n varsay\u0131lan PDF g\u00f6r\u00fcnt\u00fcleyicisidir ve bu durum, onun ne kadar g\u00fcvenilir ve performansl\u0131 oldu\u011funun bir g\u00f6stergesidir. pdf.js<\/code>‘nin temel avantajlar\u0131 \u015funlard\u0131r:<\/p>\n\n
pdf.js<\/code> ile bir PDF dosyas\u0131ndan g\u00f6r\u00fcnt\u00fc \u00e7\u0131karmak genellikle \u015fu ad\u0131mlar\u0131 i\u00e7erir:<\/p>\n\n
toDataURL()<\/code> veya toBlob()<\/code> metodlar\u0131 ile).<\/li>\n<\/ol>\nPDF-LIB<\/code> gibi k\u00fct\u00fcphanelerdir. PDF-LIB<\/code> daha \u00e7ok PDF olu\u015fturma ve de\u011fi\u015ftirme odakl\u0131 olsa da, belirli durumlarda PDF i\u00e7eri\u011fine eri\u015fim i\u00e7in de kullan\u0131labilir. Ancak g\u00f6r\u00fcnt\u00fc \u00e7\u0131karma konusunda pdf.js<\/code> genellikle daha uygun bir se\u00e7enektir.<\/p>\npdf.js<\/code>‘nin tercih edilmesinin birka\u00e7 \u00f6nemli nedeni vard\u0131r. K\u00fct\u00fcphane, PDF’leri ayr\u0131\u015ft\u0131rma ve i\u015fleme s\u00fcre\u00e7lerini ana i\u015f par\u00e7ac\u0131\u011f\u0131ndan ay\u0131rmak i\u00e7in Web Workers’\u0131 yo\u011fun bir \u015fekilde kullan\u0131r. Bu sayede, PDF i\u015flenirken kullan\u0131c\u0131 aray\u00fcz\u00fc donmaz ve ak\u0131c\u0131 kal\u0131r. Ayr\u0131ca, pdf.js<\/code>, PDF’deki g\u00f6r\u00fcnt\u00fcleri do\u011frudan Canvas’a \u00e7izerken, \u00e7\u00f6z\u00fcn\u00fcrl\u00fck ve boyutland\u0131rma gibi konularda esneklik sunar. Bu, gereksiz y\u00fcksek \u00e7\u00f6z\u00fcn\u00fcrl\u00fckl\u00fc g\u00f6r\u00fcnt\u00fclerin i\u015flenmesini \u00f6nleyerek bellek kullan\u0131m\u0131n\u0131 optimize etmeye yard\u0131mc\u0131 olur. K\u00fct\u00fcphane, ayn\u0131 zamanda, PDF’nin i\u00e7 yap\u0131s\u0131n\u0131 derinlemesine anlama yetene\u011fi sayesinde, belirli g\u00f6r\u00fcnt\u00fc nesnelerini hedefleyerek do\u011frudan \u00e7\u0131karma potansiyeli de sunar, ancak bu genellikle Canvas \u00fczerine \u00e7izim ve ard\u0131ndan d\u0131\u015fa aktarma y\u00f6nteminden daha karma\u015f\u0131k olabilir.<\/p>\npdf.js<\/code>, sa\u011flam mimarisi, geni\u015f topluluk deste\u011fi ve performans odakl\u0131 tasar\u0131m\u0131yla ilk tercihiniz olmal\u0131d\u0131r. Di\u011fer k\u00fct\u00fcphaneler belirli ni\u015f ihtiya\u00e7lar\u0131 kar\u015f\u0131layabilirken, genel PDF i\u015fleme ve g\u00f6r\u00fcnt\u00fc \u00e7\u0131karma i\u00e7in pdf.js<\/code> en kapsaml\u0131 ve g\u00fcvenilir \u00e7\u00f6z\u00fcm\u00fc sunar.<\/p>\nPerformans \u0130\u00e7in G\u00f6r\u00fcnt\u00fc \u00c7\u0131karma S\u00fcrecini Nas\u0131l Optimize Edebiliriz?<\/h3>\n
Par\u00e7al\u0131 \u0130\u015fleme (Chunking) ve Sayfa Baz\u0131nda Y\u00fckleme Nas\u0131l Uygulan\u0131r?<\/h4>\n
pdf.js<\/code> k\u00fct\u00fcphanesi ile sayfa baz\u0131nda y\u00fckleme ve i\u015fleme yapmak olduk\u00e7a kolayd\u0131r. Bir PDF belgesini y\u00fckledikten sonra, getDocument<\/code> metodundan d\u00f6nen PDFDocumentProxy<\/code> nesnesi \u00fczerinden belirli bir sayfaya eri\u015febilir ve onu Canvas’a \u00e7izebilirsiniz. \u00d6rne\u011fin:<\/p>\n\n\/\/ PDF dosyas\u0131n\u0131 y\u00fckle\npdfjsLib.getDocument(pdfUrl).promise.then(function(pdfDoc) {\n \/\/ \u0130lk sayfay\u0131 y\u00fckle\n pdfDoc.getPage(1).then(function(page) {\n var scale = 1.5;\n var viewport = page.getViewport({ scale: scale });\n\n \/\/ Canvas elementini olu\u015ftur\n var canvas = document.createElement('canvas');\n var context = canvas.getContext('2d');\n canvas.height = viewport.height;\n canvas.width = viewport.width;\n\n \/\/ Sayfay\u0131 Canvas'a \u00e7iz\n var renderContext = {\n canvasContext: context,\n viewport: viewport\n };\n page.render(renderContext).promise.then(function() {\n \/\/ G\u00f6r\u00fcnt\u00fcy\u00fc d\u0131\u015fa aktar\n var imageDataUrl = canvas.toDataURL('image\/png');\n console.log('Sayfa 1 g\u00f6r\u00fcnt\u00fcs\u00fc haz\u0131r:', imageDataUrl.length, 'byte');\n \/\/ G\u00f6r\u00fcnt\u00fcy\u00fc DOM'a ekle veya ba\u015fka bir i\u015flem yap\n });\n });\n});\n <\/code><\/pre>\n<\/p><\/div>\nWeb Workers Kullan\u0131m\u0131yla Ana \u0130\u015f Par\u00e7ac\u0131\u011f\u0131n\u0131 Nas\u0131l Serbest B\u0131rak\u0131r\u0131z?<\/h4>\n
pdf.js<\/code> k\u00fct\u00fcphanesi, zaten dahili olarak Web Workers’\u0131 yo\u011fun bir \u015fekilde kullan\u0131r. Ancak, e\u011fer kendi g\u00f6r\u00fcnt\u00fc i\u015fleme veya s\u0131k\u0131\u015ft\u0131rma mant\u0131\u011f\u0131n\u0131z varsa, bunlar\u0131 da ayr\u0131 bir Web Worker i\u00e7inde \u00e7al\u0131\u015ft\u0131rmak performans a\u00e7\u0131s\u0131ndan b\u00fcy\u00fck fayda sa\u011flayabilir. Bir Web Worker olu\u015fturma ve kullanma \u00f6rne\u011fi \u015f\u00f6yledir:<\/p>\n\n\/\/ worker.js dosyas\u0131\nself.onmessage = function(e) {\n const { pdfPageData, scale } = e.data;\n \/\/ Burada pdfPageData'y\u0131 i\u015fleyip Canvas'a \u00e7izim yapma\n \/\/ ve sonucu geri g\u00f6nderme mant\u0131\u011f\u0131 yer al\u0131r.\n \/\/ \u00d6rnek olarak, bir sayfan\u0131n g\u00f6r\u00fcnt\u00fcs\u00fcn\u00fc olu\u015fturup geri g\u00f6nderme\n \n \/\/ Basit bir \u00f6rnek: Gelen veriyi i\u015fleyip geri g\u00f6nderelim\n \/\/ Ger\u00e7ek uygulamada, pdf.js ile sayfa render etme i\u015flemi burada yap\u0131l\u0131r\n const result = {\n message: '\u0130\u015flem tamamland\u0131!',\n processedData: pdfPageData.length + ' boyutunda veri i\u015flendi.'\n };\n self.postMessage(result);\n};\n\n\/\/ Ana i\u015f par\u00e7ac\u0131\u011f\u0131 (main.js)\nif (window.Worker) {\n const myWorker = new Worker('worker.js');\n\n myWorker.onmessage = function(e) {\n console.log('Worker\\'dan gelen mesaj:', e.data);\n };\n\n \/\/ Worker'a veri g\u00f6nder\n myWorker.postMessage({ pdfPageData: 'B\u00fcy\u00fck PDF verisi...', scale: 2 });\n} else {\n console.log('Taray\u0131c\u0131n\u0131z Web Workers desteklemiyor.');\n}\n <\/code><\/pre>\n<\/p><\/div>\nCanvas Optimizasyonlar\u0131 ve G\u00f6r\u00fcnt\u00fc Format\u0131 Se\u00e7imi Nas\u0131l Yap\u0131l\u0131r?<\/h4>\n
pdf.js<\/code>‘nin getViewport<\/code> metodundaki scale<\/code> parametresi bu konuda size yard\u0131mc\u0131 olacakt\u0131r.<\/p>\ncanvas.toDataURL()<\/code> veya canvas.toBlob()<\/code> metodlar\u0131 ile g\u00f6r\u00fcnt\u00fcleri farkl\u0131 formatlarda (JPEG, PNG, WebP) d\u0131\u015fa aktarabilirsiniz. Her format\u0131n kendine g\u00f6re avantajlar\u0131 ve dezavantajlar\u0131 vard\u0131r:<\/p>\n\n
canvas.toDataURL('image\/jpeg', quality)<\/code>).<\/li>\nURL.revokeObjectURL()<\/code> gibi metodlarla olu\u015fturulan URL’leri iptal etmek bellek s\u0131z\u0131nt\u0131lar\u0131n\u0131 \u00f6nler.<\/p>\nBellek Kullan\u0131m\u0131n\u0131 Azaltmak \u0130\u00e7in \u0130leri D\u00fczey Teknikler Nelerdir?<\/h3>\n
Gereksiz Verileri Temizleme (Garbage Collection) Nas\u0131l Y\u00f6netilir?<\/h4>\n
\n
null<\/code> olarak ayarlay\u0131n. \u00d6rne\u011fin, bir PDF sayfas\u0131n\u0131 i\u015fledikten sonra, o sayfa nesnesini veya onunla ili\u015fkili b\u00fcy\u00fck veri yap\u0131lar\u0131n\u0131 null<\/code>‘a atayarak \u00e7\u00f6p toplay\u0131c\u0131n\u0131n bunlar\u0131 serbest b\u0131rakmas\u0131na yard\u0131mc\u0131 olun.<\/li>\n<img><\/code> etiketleri gibi DOM elementlerini, i\u015finiz bitti\u011finde element.remove()<\/code> veya parentElement.removeChild(element)<\/code> ile DOM’dan kald\u0131r\u0131n. Bu, hem DOM a\u011fac\u0131n\u0131 hafifletir hem de bu elementlere ba\u011fl\u0131 bellek kullan\u0131m\u0131n\u0131 azalt\u0131r.<\/li>\nremoveEventListener<\/code> ile kald\u0131rmay\u0131 unutmay\u0131n. Aksi takdirde, bu dinleyiciler referans tuttuklar\u0131 nesnelerin bellekten at\u0131lmas\u0131n\u0131 engelleyebilir.<\/li>\n<\/ul>\nURL.createObjectURL<\/code> ve URL.revokeObjectURL<\/code> Kullan\u0131m\u0131 Ne \u0130\u015fe Yarar?<\/h4>\nFile<\/code>, Blob<\/code> veya MediaSource<\/code> nesnesinden ge\u00e7ici bir URL olu\u015fturmak i\u00e7in URL.createObjectURL()<\/code> metodunu kullan\u0131r\u0131z. Bu URL’ler, genellikle <img><\/code> etiketlerinin src<\/code> \u00f6zelli\u011finde veya <a><\/code> etiketlerinin href<\/code> \u00f6zelli\u011finde dosya indirme ba\u011flant\u0131lar\u0131 olarak kullan\u0131l\u0131r. Ancak, bu URL’ler taray\u0131c\u0131n\u0131n belle\u011finde yer kaplar ve otomatik olarak serbest b\u0131rak\u0131lmazlar. Bu nedenle, i\u015finiz bittikten sonra bu URL’leri a\u00e7\u0131k\u00e7a iptal etmek (revoke) \u00e7ok \u00f6nemlidir.<\/p>\nURL.revokeObjectURL()<\/code> metodu, daha \u00f6nce createObjectURL()<\/code> ile olu\u015fturulmu\u015f bir URL’yi serbest b\u0131rak\u0131r. Bu, taray\u0131c\u0131n\u0131n belle\u011finde tutulan ilgili verinin bo\u015falt\u0131lmas\u0131n\u0131 sa\u011flar ve bellek s\u0131z\u0131nt\u0131lar\u0131n\u0131 \u00f6nler. \u00d6rne\u011fin, bir Canvas’tan \u00e7\u0131kard\u0131\u011f\u0131n\u0131z Blob g\u00f6r\u00fcnt\u00fcs\u00fcn\u00fc bir <img><\/code> etiketine atad\u0131ktan sonra:<\/p>\n\ncanvas.toBlob(function(blob) {\n var imageUrl = URL.createObjectURL(blob);\n var img = document.createElement('img');\n img.src = imageUrl;\n document.body.appendChild(img);\n\n \/\/ G\u00f6r\u00fcnt\u00fc y\u00fcklendikten sonra veya belirli bir s\u00fcre sonra URL'yi serbest b\u0131rak\n img.onload = function() {\n URL.revokeObjectURL(imageUrl); \/\/ Belle\u011fi serbest b\u0131rak\n console.log('URL serbest b\u0131rak\u0131ld\u0131.');\n };\n}, 'image\/jpeg', 0.8);\n <\/code><\/pre>\n<\/p><\/div>\nTaray\u0131c\u0131 \u00d6nbellekleme Stratejileri Nas\u0131l Uygulan\u0131r?<\/h4>\n
\n
Map<\/code> veya basit bir JavaScript nesnesi kullanarak sayfa numaras\u0131na g\u00f6re g\u00f6r\u00fcnt\u00fcleri saklayabilirsiniz. Ancak bu, taray\u0131c\u0131 sekmesi kapat\u0131ld\u0131\u011f\u0131nda veya yenilendi\u011finde kaybolacakt\u0131r ve bellek kullan\u0131m\u0131n\u0131 art\u0131rabilir, bu y\u00fczden dikkatli kullan\u0131lmal\u0131d\u0131r.<\/li>\nGer\u00e7ek D\u00fcnya Senaryolar\u0131nda Optimizasyon: Bir Vaka Analizi<\/h3>\n
Sorun Tespiti ve \u0130lk Yakla\u015f\u0131m<\/h4>\n
pdf.js<\/code> k\u00fct\u00fcphanesini kullanmak ve temel bir sayfa g\u00f6r\u00fcnt\u00fcleyici olu\u015fturmakt\u0131.<\/p>\nOptimizasyon Ad\u0131mlar\u0131 ve Uygulama<\/h4>\n
\n
pdf.js<\/code> zaten dahili olarak Web Workers kullanmas\u0131na ra\u011fmen, ek olarak, kullan\u0131c\u0131lar\u0131n belirli bir b\u00f6lgeyi se\u00e7ip o b\u00f6lgenin g\u00f6r\u00fcnt\u00fcs\u00fcn\u00fc \u00e7\u0131karma i\u015flemi de ayr\u0131 bir Web Worker’a devredildi. Bu sayede, kullan\u0131c\u0131lar PDF’yi kayd\u0131r\u0131rken veya not al\u0131rken, arka planda g\u00f6r\u00fcnt\u00fc \u00e7\u0131karma i\u015flemi devam edebildi.<\/p>\n\n\/\/ main.js (ana i\u015f par\u00e7ac\u0131\u011f\u0131)\nconst worker = new Worker('pdf-image-extractor-worker.js');\n\nworker.onmessage = function(e) {\n const { type, payload } = e.data;\n if (type === 'imageExtracted') {\n const imgElement = document.createElement('img');\n imgElement.src = payload.imageDataUrl;\n document.getElementById('extracted-images').appendChild(imgElement);\n URL.revokeObjectURL(payload.imageDataUrl); \/\/ Belle\u011fi temizle\n console.log('G\u00f6r\u00fcnt\u00fc ba\u015far\u0131yla \u00e7\u0131kar\u0131ld\u0131 ve g\u00f6sterildi.');\n }\n};\n\nfunction extractImageFromPage(pdfPage, rect, scale) {\n \/\/ pdfPage objesi worker'a do\u011frudan g\u00f6nderilemez,\n \/\/ bu y\u00fczden gerekli verileri (\u00f6rne\u011fin sayfa numaras\u0131 ve PDF URL'si) g\u00f6ndeririz\n worker.postMessage({\n type: 'extractImage',\n pdfUrl: currentPdfUrl,\n pageNumber: pdfPage.pageIndex + 1,\n rect: rect, \/\/ \u00c7\u0131kar\u0131lacak alan\u0131n koordinatlar\u0131\n scale: scale\n });\n}\n <\/code><\/pre>\n<\/p><\/div>\n\n\/\/ pdf-image-extractor-worker.js (Web Worker)\nimportScripts('https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/pdf.js\/2.10.377\/pdf.worker.min.js', 'https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/pdf.js\/2.10.377\/pdf.min.js');\n\nself.onmessage = async function(e) {\n if (e.data.type === 'extractImage') {\n const { pdfUrl, pageNumber, rect, scale } = e.data;\n const pdfDoc = await pdfjsLib.getDocument(pdfUrl).promise;\n const page = await pdfDoc.getPage(pageNumber);\n\n const viewport = page.getViewport({ scale: scale });\n const canvas = new OffscreenCanvas(viewport.width, viewport.height); \/\/ OffscreenCanvas kullan\u0131ld\u0131\n const context = canvas.getContext('2d');\n\n const renderContext = {\n canvasContext: context,\n viewport: viewport\n };\n await page.render(renderContext).promise;\n\n \/\/ Belirli bir alan\u0131 kesmek i\u00e7in ek i\u015flem\n const croppedCanvas = new OffscreenCanvas(rect.width * scale, rect.height * scale);\n const croppedContext = croppedCanvas.getContext('2d');\n croppedContext.drawImage(\n canvas,\n rect.x * scale,\n rect.y * scale,\n rect.width * scale,\n rect.height * scale,\n 0, 0,\n rect.width * scale,\n rect.height * scale\n );\n\n const blob = await croppedCanvas.convertToBlob({ type: 'image\/jpeg', quality: 0.9 });\n const imageDataUrl = URL.createObjectURL(blob); \/\/ Worker i\u00e7inde olu\u015fturulan URL\n\n self.postMessage({ type: 'imageExtracted', payload: { imageDataUrl: imageDataUrl } });\n }\n};\n <\/code><\/pre>\n<\/p><\/div>\n\nconst pageCache = new Map(); \/\/ Sayfa g\u00f6r\u00fcnt\u00fclerini \u00f6nbelle\u011fe almak i\u00e7in\n\nasync function getPageImage(pdfDoc, pageNum, scale = 1.5) {\n if (pageCache.has(pageNum)) {\n return pageCache.get(pageNum);\n }\n\n const page = await pdfDoc.getPage(pageNum);\n const viewport = page.getViewport({ scale: scale });\n const canvas = document.createElement('canvas');\n const context = canvas.getContext('2d');\n canvas.height = viewport.height;\n canvas.width = viewport.width;\n\n const renderContext = {\n canvasContext: context,\n viewport: viewport\n };\n await page.render(renderContext).promise;\n const imageDataUrl = canvas.toDataURL('image\/jpeg', 0.8); \/\/ WebP de tercih edilebilir\n pageCache.set(pageNum, imageDataUrl); \/\/ \u00d6nbelle\u011fe al\n return imageDataUrl;\n}\n <\/code><\/pre>\n<\/p><\/div>\n<\/li>\nscale<\/code> de\u011feri (\u00f6rne\u011fin 0.8) kullan\u0131larak Canvas boyutu k\u00fc\u00e7\u00fclt\u00fcld\u00fc ve bu da bellek kullan\u0131m\u0131n\u0131 azaltt\u0131.<\/p>\n<\/li>\nURL.createObjectURL()<\/code> \u00e7a\u011fr\u0131s\u0131 i\u00e7in, ilgili g\u00f6r\u00fcnt\u00fc DOM’a eklendikten veya kullan\u0131ld\u0131ktan hemen sonra URL.revokeObjectURL()<\/code> \u00e7a\u011fr\u0131s\u0131 yap\u0131larak bellek s\u0131z\u0131nt\u0131lar\u0131 engellendi. Bu, \u00f6zellikle \u00e7ok say\u0131da ge\u00e7ici g\u00f6r\u00fcnt\u00fc olu\u015fturuldu\u011funda kritik bir ad\u0131md\u0131.<\/p>\n<\/li>\n<\/ol>\nSonu\u00e7lar<\/h4>\n
Gelece\u011fe Bak\u0131\u015f: WebAssembly ve GPU H\u0131zland\u0131rma<\/h3>\n
WebAssembly (Wasm) ile Performans\u0131 Daha da Art\u0131rmak M\u00fcmk\u00fcn m\u00fcd\u00fcr?<\/h4>\n
\n
pdf.js<\/code> k\u00fct\u00fcphanesi, PDF’leri ayr\u0131\u015ft\u0131rmak i\u00e7in zaten C++’dan WebAssembly’ye derlenmi\u015f baz\u0131 mod\u00fcller kullanmaktad\u0131r. Ancak, daha fazla PDF i\u015fleme mant\u0131\u011f\u0131n\u0131 veya \u00f6zel g\u00f6r\u00fcnt\u00fc i\u015fleme algoritmalar\u0131n\u0131 WebAssembly’ye ta\u015f\u0131yarak genel performans\u0131 daha da art\u0131rmak m\u00fcmk\u00fcnd\u00fcr. Bu, \u00f6zellikle \u00e7ok b\u00fcy\u00fck dosyalarla veya ger\u00e7ek zamanl\u0131 i\u015fleme gerektiren uygulamalarla u\u011fra\u015fan geli\u015ftiriciler i\u00e7in \u00f6nemli bir ad\u0131md\u0131r.<\/p>\nGPU H\u0131zland\u0131rma ile G\u00f6r\u00fcnt\u00fc \u0130\u015fleme Nas\u0131l Yap\u0131l\u0131r?<\/h4>\n
\n
pdf.js<\/code> gibi k\u00fct\u00fcphaneler do\u011frudan GPU h\u0131zland\u0131rmas\u0131n\u0131 yo\u011fun olarak kullanmamaktad\u0131r, ancak WebGL ve WebGPU API’lerinin geli\u015fimiyle birlikte, gelecekte daha fazla PDF i\u015fleme g\u00f6revinin GPU’ya devredilmesi beklenmektedir. Bu, taray\u0131c\u0131 tabanl\u0131 PDF uygulamalar\u0131n\u0131n performans\u0131n\u0131 ve yeteneklerini yeni bir seviyeye ta\u015f\u0131yacakt\u0131r. Ancak, GPU h\u0131zland\u0131rma kullanmak, geli\u015ftirme karma\u015f\u0131kl\u0131\u011f\u0131n\u0131 art\u0131rabilir ve t\u00fcm taray\u0131c\u0131larda tutarl\u0131 bir deneyim sa\u011flamak i\u00e7in dikkatli bir yakla\u015f\u0131m gerektirebilir.<\/p>\nSonu\u00e7 ve S\u0131k\u00e7a Sorulan Sorular<\/h3>\n
pdf.js<\/code> gibi g\u00fc\u00e7l\u00fc k\u00fct\u00fcphanelerin kullan\u0131m\u0131, par\u00e7al\u0131 i\u015fleme ve Web Workers ile ana i\u015f par\u00e7ac\u0131\u011f\u0131n\u0131 serbest b\u0131rakma, Canvas optimizasyonlar\u0131 ve do\u011fru g\u00f6r\u00fcnt\u00fc format\u0131 se\u00e7imi gibi y\u00f6ntemlerin, performans\u0131 nas\u0131l \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131rd\u0131\u011f\u0131n\u0131 g\u00f6rd\u00fck. Bellek s\u0131z\u0131nt\u0131lar\u0131n\u0131 \u00f6nlemek i\u00e7in URL.revokeObjectURL()<\/code> kullan\u0131m\u0131 ve ak\u0131ll\u0131 \u00f6nbellekleme stratejileri gibi ileri d\u00fczey teknikler de bellek y\u00f6netiminin ne kadar kritik oldu\u011funu g\u00f6sterdi. Ger\u00e7ek d\u00fcnya senaryosunda bir vaka analizi ile bu tekniklerin somut faydalar\u0131n\u0131 ortaya koyduk. Son olarak, WebAssembly ve GPU h\u0131zland\u0131rma gibi gelece\u011fin teknolojilerinin, bu alandaki performans\u0131 daha da ileriye ta\u015f\u0131ma potansiyelini de\u011ferlendirdik.<\/p>\nS\u0131k\u00e7a Sorulan Sorular<\/h4>\n
\n
null<\/code> olarak ayarlay\u0131n, ge\u00e7ici DOM elementlerini kald\u0131r\u0131n ve URL.createObjectURL()<\/code> ile olu\u015fturdu\u011funuz URL’leri mutlaka URL.revokeObjectURL()<\/code> ile serbest b\u0131rak\u0131n. Ayr\u0131ca, b\u00fcy\u00fck verileri s\u00fcrekli bellekte tutmak yerine, IndexedDB veya Service Workers ile \u00f6nbellekleme stratejileri kullanmay\u0131 d\u00fc\u015f\u00fcnebilirsiniz.<\/p>\n<\/li>\n