[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"me":3,"catalog:tr:frontend\u002Fperformance":4,"config":235},null,{"field_key":5,"field_name":6,"seniority":7,"topic_key":8,"topic_name":9,"spec_key":7,"spec_name":7,"locale":10,"cell_total":11,"field_total":12,"seniorities":13,"topics":17,"specs":133,"samples":150},"frontend","Frontend","","performance","Performance","tr",75,2925,[14,15,16],"junior","mid","senior",[18,21,24,27,30,33,36,39,42,45,48,51,54,57,60,63,66,67,70,73,76,79,82,85,88,91,94,97,100,103,106,109,112,115,118,121,124,127,130],{"key":19,"name":20,"count":11},"accessibility","Accessibility",{"key":22,"name":23,"count":11},"angular-change-detection","Angular Change Detection",{"key":25,"name":26,"count":11},"angular-components-lifecycle","Angular Components Lifecycle",{"key":28,"name":29,"count":11},"angular-dependency-injection","Angular Dependency Injection",{"key":31,"name":32,"count":11},"angular-directives-pipes","Angular Directives Pipes",{"key":34,"name":35,"count":11},"angular-router-forms","Angular Router Forms",{"key":37,"name":38,"count":11},"angular-testing-performance","Angular Testing Performance",{"key":40,"name":41,"count":11},"css-layout","Css Layout",{"key":43,"name":44,"count":11},"dom-browser-apis","Dom Browser Apis",{"key":46,"name":47,"count":11},"javascript-async-concurrency","Javascript Async Concurrency",{"key":49,"name":50,"count":11},"javascript-language","Javascript Language",{"key":52,"name":53,"count":11},"javascript-memory-performance","Javascript Memory Performance",{"key":55,"name":56,"count":11},"javascript-modules-bundling","Javascript Modules Bundling",{"key":58,"name":59,"count":11},"javascript-prototypes-oop","Javascript Prototypes Oop",{"key":61,"name":62,"count":11},"javascript-runtime-apis","Javascript Runtime Apis",{"key":64,"name":65,"count":11},"javascript-testing-tooling","Javascript Testing Tooling",{"key":8,"name":9,"count":11},{"key":68,"name":69,"count":11},"react-components-jsx","React Components Jsx",{"key":71,"name":72,"count":11},"react-context-state","React Context State",{"key":74,"name":75,"count":11},"react-effects-lifecycle","React Effects Lifecycle",{"key":77,"name":78,"count":11},"react-forms-suspense","React Forms Suspense",{"key":80,"name":81,"count":11},"react-hooks-state","React Hooks State",{"key":83,"name":84,"count":11},"react-rendering-performance","React Rendering Performance",{"key":86,"name":87,"count":11},"rendering-reactivity","Rendering Reactivity",{"key":89,"name":90,"count":11},"state-management","State Management",{"key":92,"name":93,"count":11},"testing","Testing",{"key":95,"name":96,"count":11},"typescript-advanced-types","Typescript Advanced Types",{"key":98,"name":99,"count":11},"typescript-generics","Typescript Generics",{"key":101,"name":102,"count":11},"typescript-modules-declarations","Typescript Modules Declarations",{"key":104,"name":105,"count":11},"typescript-narrowing-control-flow","Typescript Narrowing Control Flow",{"key":107,"name":108,"count":11},"typescript-tooling-config","Typescript Tooling Config",{"key":110,"name":111,"count":11},"typescript-type-fundamentals","Typescript Type Fundamentals",{"key":113,"name":114,"count":11},"vue-components-props","Vue Components Props",{"key":116,"name":117,"count":11},"vue-composition-api","Vue Composition Api",{"key":119,"name":120,"count":11},"vue-directives-templates","Vue Directives Templates",{"key":122,"name":123,"count":11},"vue-performance-testing","Vue Performance Testing",{"key":125,"name":126,"count":11},"vue-reactivity-system","Vue Reactivity System",{"key":128,"name":129,"count":11},"vue-router-state-management","Vue Router State Management",{"key":131,"name":132,"count":11},"web-security","Web Security",[134,138,141,144,147],{"key":135,"name":136,"count":137},"angular","Angular",450,{"key":139,"name":140,"count":137},"javascript","JavaScript",{"key":142,"name":143,"count":137},"react","React",{"key":145,"name":146,"count":137},"typescript","TypeScript",{"key":148,"name":149,"count":137},"vue","Vue",[151,169,183,196,209,222],{"id":152,"topic":9,"difficulty":153,"body":154,"options":155,"correct_key":160,"explanation":168},"019f56bb-ba80-73fe-a815-d20d76ab9fe1",1,"Bir ürün fotoğrafı 2 MB'lık bir PNG olarak sunuluyor ve yavaş yükleniyor. İndirilen boyutu gözle görülür kalite kaybı olmadan en güvenilir şekilde hangisi küçültür?",[156,159,162,165],{"key":157,"text":158},"a","Dosyanın uzantısını `.png`'den `.jpg`'ye değiştirmek, böylece format değişir",{"key":160,"text":161},"b","Fotoğrafı JPEG veya WebP gibi lossy bir formata yeniden encode etmek",{"key":163,"text":164},"c","`\u003Cimg>` elementine açık `width` ve `height` attribute'ları eklemek",{"key":166,"text":167},"d","Görselin opacity değerini CSS ile düşürüp daha hafif render etmek","Fotoğraflar, keskin kenarlı grafikler için tasarlanmış lossless PNG yerine JPEG veya WebP gibi lossy formatlarda çok daha iyi sıkışır. Uzantıyı değiştirmek (a) byte'ları yeniden encode etmez — dosya 2 MB'lık PNG olarak kalır. width\u002Fheight attribute'ları (c) layout alanını rezerve edip kaymayı önler ama indirilen byte sayısını değiştirmez.",{"id":170,"topic":9,"difficulty":171,"body":172,"options":173,"correct_key":163,"explanation":182},"019f56bb-ba80-7b04-b854-2b937bb5ad66",2,"```html\n\u003Cimg src=\"gallery-12.jpg\" loading=\"lazy\" alt=\"...\">\n```\nBuradaki `loading=\"lazy\"` attribute'u ne yapar?",[174,176,178,180],{"key":157,"text":175},"Görseli tarayıcıya göndermeden önce anlık olarak sıkıştırır",{"key":160,"text":177},"Görselin önceliğini düşürür; böylece hep sayfanın script'lerinden sonra iner",{"key":163,"text":179},"Görselin yüklenmesini, görsel ekrana girmek üzere olana dek erteler",{"key":166,"text":181},"Önce küçük bir placeholder yükler, hover'da tam görseli yerine koyar","`loading=\"lazy\"`, tarayıcıya ekran dışındaki bir görseli, kullanıcı yakınına kaydırana kadar getirmemesini söyler; böylece hiç görülmeyebilecek görseller için bandwidth harcanmaz. Sıkıştırma yapmaz (a) ve script sırasıyla ilgisizdir (b); placeholder değiştirme deseni (d) attribute'un yaptığı değil, senin kurduğun bir şeydir.",{"id":184,"topic":9,"difficulty":153,"body":185,"options":186,"correct_key":157,"explanation":195},"019f56bb-ba81-716e-a484-e4a76cf53571","Tek ve çok büyük bir JavaScript bundle göndermek sayfa performansı için neden genelde kötüdür?",[187,189,191,193],{"key":157,"text":188},"Tarayıcı, sayfa etkileşime hazır olmadan önce tümünü indirip parse edip çalıştırmak zorundadır",{"key":160,"text":190},"Büyük dosyalar tarayıcıda asla cache'lenemez, bu yüzden her ziyarette yeniden inerler",{"key":163,"text":192},"Bir megabyte'tan büyük JavaScript dosyaları çoğu tarayıcı tarafından reddedilir",{"key":166,"text":194},"Tek büyük bir dosya, kaçınılmaz olarak birkaç küçük dosyadan daha fazla bug içerir","Büyük bundle etkileşimi geciktirir: kullanıcı, tarayıcı henüz gerekmeyebilecek kodu indirip parse edip çalıştırırken bekler. Büyük dosyalar da küçükler gibi cache'lenebilir (b), onları reddeden bir boyut sınırı yoktur (c) ve bug sayısı bundling ile ilgisizdir (d).",{"id":197,"topic":9,"difficulty":171,"body":198,"options":199,"correct_key":166,"explanation":208},"019f56bb-ba81-76f0-901c-3f3768e94920","Bir single-page app, nadiren kullanılan admin dashboard dahil her ekranı içeren tek bir bundle yüklüyor. Login sayfasındaki kullanıcılar bunun tamamını bekliyor. Bunu en iyi hangi teknik çözer?",[200,202,204,206],{"key":157,"text":201},"Bundle'ın tamamını bir CDN'e taşımak; böylece kullanıcıya daha yakın bir sunucudan iner",{"key":160,"text":203},"Bundle'ı minify etmek; böylece kullanılmayan admin kodu daha az byte tutar",{"key":163,"text":205},"Bundle'ı yükleyen script tag'ine `loading=\"lazy\"` attribute'u eklemek",{"key":166,"text":207},"Bundle'ı bölmek; her ekranın kodu ancak o ekran açıldığında getirilir","Code splitting, login sayfasının yalnızca ihtiyaç duyduğunu indirmesini sağlar; admin dashboard'ın kodu sonradan, gerektiğinde yüklenir. CDN (a) ve minification (b) biraz yardımcı olsa da admin kodunu yine her ziyaretçiye baştan gönderir; `loading=\"lazy\"` ise bir görsel\u002Fiframe attribute'udur, uygulama modüllerini ertelemenin yolu değildir (c).",{"id":210,"topic":9,"difficulty":153,"body":211,"options":212,"correct_key":160,"explanation":221},"019f56bb-ba81-7d77-882d-0600c698e1c0","Bir CSS veya JavaScript dosyasını minify etmek ne yapar?",[213,215,217,219],{"key":157,"text":214},"Kaynak kodu şifreler, böylece rakipler onu okuyamaz",{"key":160,"text":216},"Boşlukları ve yorumları siler, isimleri kısaltır; böylece dosya boyutunu düşürür",{"key":163,"text":218},"Dosyayı paralel yüklenen daha küçük parçalara böler",{"key":166,"text":220},"Kodu, CPU'nun doğrudan çalıştırdığı daha hızlı, makine seviyesinde bir binary'ye derler","Minification, makinenin ihtiyaç duymadığı karakterleri — boşluk, yorum, uzun değişken adları — atarak daha küçük ama işlevsel olarak birebir aynı bir dosya üretir. Şifreleme değildir (a); kod yeniden formatlandıktan sonra hâlâ okunabilir. Dosyayı bölmez (c), binary'ye derlemez (d).",{"id":223,"topic":9,"difficulty":171,"body":224,"options":225,"correct_key":163,"explanation":234},"019f56bb-ba82-7496-976e-ac88ca94e018","Bir sayfa, `\u003Chead>` içinde `\u003Clink rel=\"stylesheet\" href=\"app.css\">` ile büyük bir stylesheet içeriyor. Kullanıcılar bu inene kadar boş ekran görüyor. Tarayıcı neden bekler?",[226,228,230,232],{"key":157,"text":227},"`\u003Cbody>` içindeki HTML parse edilmeden önce `\u003Chead>` bölümünün tamamı inmelidir",{"key":160,"text":229},"Stylesheet'ler her zaman HTML dokümanının kendisinden önce indirilir",{"key":163,"text":231},"CSS render-blocking'tir: tarayıcı, stilleri elde edene dek boyamayı geciktirir",{"key":166,"text":233},"Tarayıcı, sayfayı göstermeden önce her stylesheet'i bir script gibi çalıştırır","Varsayılan olarak CSS render'ı bloklar — tarayıcı stilsiz içeriği boyamaktan kaçınır; bu yüzden head'deki büyük bir stylesheet, gelene kadar first paint'i geciktirir. Head, body parse'ını topluca bloklamaz (a); HTML parse'ı sürer ama boyama bekler. CSS bir script değildir (d) ve HTML parse'ı başladıktan sonra istenir, önce değil (b).",{"fields":236,"seniorities":410,"interview_shapes":411,"locales":416,"oauth":418,"question_count":421,"coach_enabled":422,"jd_match_enabled":422},[237,262,270,287,311,324,343,362,384,391,397,404],{"key":238,"name_tr":239,"name_en":239,"sort":153,"specializations":240},"backend","Backend",[241,244,247,250,253,256,259],{"key":242,"name":243,"field":238},"general","Genel",{"key":245,"name":246,"field":238},"go","Go",{"key":248,"name":249,"field":238},"python","Python",{"key":251,"name":252,"field":238},"java","Java",{"key":254,"name":255,"field":238},"csharp","C#\u002F.NET",{"key":257,"name":258,"field":238},"nodejs","Node.js",{"key":260,"name":261,"field":238},"php","PHP",{"key":5,"name_tr":6,"name_en":6,"sort":171,"specializations":263},[264,265,266,267,268,269],{"key":242,"name":243,"field":5},{"key":139,"name":140,"field":5},{"key":145,"name":146,"field":5},{"key":142,"name":143,"field":5},{"key":148,"name":149,"field":5},{"key":135,"name":136,"field":5},{"key":271,"name_tr":272,"name_en":272,"sort":273,"specializations":274},"fullstack","Fullstack",3,[275,276,277,278,279,280,281,282,283,284,285,286],{"key":242,"name":243,"field":271},{"key":245,"name":246,"field":238},{"key":248,"name":249,"field":238},{"key":251,"name":252,"field":238},{"key":254,"name":255,"field":238},{"key":257,"name":258,"field":238},{"key":260,"name":261,"field":238},{"key":139,"name":140,"field":5},{"key":145,"name":146,"field":5},{"key":142,"name":143,"field":5},{"key":148,"name":149,"field":5},{"key":135,"name":136,"field":5},{"key":288,"name_tr":289,"name_en":289,"sort":290,"specializations":291},"devops-cloud","DevOps \u002F Cloud",4,[292,293,296,299,302,305,308],{"key":242,"name":243,"field":288},{"key":294,"name":295,"field":288},"aws","AWS",{"key":297,"name":298,"field":288},"gcp","GCP",{"key":300,"name":301,"field":288},"azure","Azure",{"key":303,"name":304,"field":288},"kubernetes","Kubernetes",{"key":306,"name":307,"field":288},"terraform","Terraform",{"key":309,"name":310,"field":288},"linux","Linux",{"key":312,"name_tr":313,"name_en":313,"sort":314,"specializations":315},"ai-engineer","AI Engineer",5,[316,317,318,321],{"key":242,"name":243,"field":312},{"key":248,"name":249,"field":312},{"key":319,"name":320,"field":312},"llm-rag","LLM\u002FRAG",{"key":322,"name":323,"field":312},"mlops","MLOps",{"key":325,"name_tr":326,"name_en":327,"sort":328,"specializations":329},"database","Veritabanı","Database",6,[330,331,334,337,340],{"key":242,"name":243,"field":325},{"key":332,"name":333,"field":325},"postgresql","PostgreSQL",{"key":335,"name":336,"field":325},"mysql","MySQL",{"key":338,"name":339,"field":325},"mongodb","MongoDB",{"key":341,"name":342,"field":325},"redis","Redis",{"key":344,"name_tr":345,"name_en":346,"sort":347,"specializations":348},"mobile","Mobil","Mobile",7,[349,350,353,356,359],{"key":242,"name":243,"field":344},{"key":351,"name":352,"field":344},"ios-swift","iOS (Swift)",{"key":354,"name":355,"field":344},"android-kotlin","Android (Kotlin)",{"key":357,"name":358,"field":344},"flutter","Flutter",{"key":360,"name":361,"field":344},"react-native","React Native",{"key":363,"name_tr":364,"name_en":365,"sort":366,"specializations":367},"security","Güvenlik","Security",8,[368,369,372,375,378,381],{"key":242,"name":243,"field":363},{"key":370,"name":371,"field":363},"appsec","AppSec",{"key":373,"name":374,"field":363},"offensive-pentest","Offensive \u002F Pentest",{"key":376,"name":377,"field":363},"cloud-security","Cloud Security",{"key":379,"name":380,"field":363},"devsecops","DevSecOps",{"key":382,"name":383,"field":363},"blue-team-incident","Blue Team \u002F Incident",{"key":385,"name_tr":386,"name_en":387,"sort":388,"specializations":389},"qa-test-automation","QA \u002F Test Otomasyonu","QA \u002F Test Automation",9,[390],{"key":242,"name":243,"field":385},{"key":392,"name_tr":393,"name_en":393,"sort":394,"specializations":395},"data-engineer","Data Engineer",10,[396],{"key":242,"name":243,"field":392},{"key":398,"name_tr":399,"name_en":400,"sort":401,"specializations":402},"game-dev","Oyun Geliştirme","Game Development",11,[403],{"key":242,"name":243,"field":398},{"key":405,"name_tr":406,"name_en":406,"sort":407,"specializations":408},"ml-engineer","ML Engineer",12,[409],{"key":242,"name":243,"field":405},[14,15,16],{"junior":412,"mid":414,"senior":415},{"questions":413,"median_sec":3},20,{"questions":413,"median_sec":3},{"questions":413,"median_sec":3},[10,417],"en",[419,420],"google","github",21750,true]