JavaScript || DSA

🔋 Lazy loading

Lazy loading - bu veb-sahifaning ma’lum qismlarini foydalanuvchi yoki brauzerga kerak bo'lmaguncha yuklamasdan kutib turish (render qilish jarayonini to'xtatib turish)

Hammasini birdaniga yuklash (eager loading) o‘rniga, brauzer ba’zi resurslarni faqat foydalanuvchiga kerak sahifa bilan o‘zaro aloqaga kirishgandan keyin so‘raydi. Agar Lazy loading to‘g‘ri amalga oshirilsa, sahifaning yuklanish tezligini oshirishga yordam beradi. Bu turdagi yuklash 'dangasa' (lazy) deb ataladi, chunki u brauzerni ishini kechiktirishga undaydi. Masalan, blog postda sahifaning yuqori qismida rasm, pastki qismida diagramma bor deb faraz qilaylik. Blog postini o‘qiyotgan foydalanuvchi bir necha daqiqa davomida matnning pastki qismiga yetib bormasligi mumkin, shuning uchun brauzer foydalanuvchi o‘sha bo‘limga o‘tmaguncha diagrammani yuklashni kutadi. Shunday qilib, sahifa dastlab tezroq yuklanadi, chunki brauzer ikkita rasm o‘rniga bitta rasm yuklamoqda. Veb-sahifa yuklanganda, foydalanuvchi ko‘rayotgan qismi 'yuqori qism' (above the fold) deb ataladi, foydalanuvchi hali ko‘rmayotgan qismi esa 'quyi qism' (below the fold) deb ataladi.

"above the fold" va "below the fold" gazeta maketlaridan kelib chiqqan. Gazetalar, odatda, gorizontal bo‘yicha ikkiga buklangan, oldingi yarmi esa buklangan joydan yuqorida joylashgan bo‘ladi.

* Rasmlar uchun lazy loading amalga oshirish Lazy loading-ni amalga oshirishning bir usuli — bu img tegida loading atributidan foydalanish. Quyidagi misolda ko‘rsatilganidek, loading="lazy" qo‘shish brauzerga foydalanuvchi rasmga yaqinlashguncha uni yuklamaslikni buyuradi

<img src="example.com/image" loading="lazy">

* Eager loading nima ? Eager loading — bu barcha veb-sahifa resurslarini bir vaqtning o‘zida yuklash jarayoni. Murakkab va kodi ko‘p bo‘lgan veb-ilovalar, masalan, onlayn o‘yinlar, ko‘pincha eager loading'dan foydalanishni afzal ko‘radi.

<img src="example.com/image" loading="eager">

loading="eager" atributidan foydalanildi, bu esa rasmni darhol yuklashni ta'minlaydigan standart hisoblanadi. Bu, darhol ko'rilishi kerak bo'lgan muhim rasmlar uchun ishlatilinadi. image tag'da default holatda loading attribute qiymati eager bo'ladi 🔗 cloudflare.com/learning/performance/what-is-lazy-loading ⚙️ React Lazy Loading React'da component dinamik tarzda yuklanish uchun, React.lazy funksiyasi ishlatilinadi Odatda, Lazy loading React ilovalarida ko'p ishlatilmaydi, chunki React ko'pincha bitta sahifali ilovalar (SPA) yaratish uchun ishlatiladi. React odatda butun ilovani bitta faylga birlashtiradi (bundle qiladi). Misol: Lazy Loading Component

import React, { Suspense } from "react";

const LazyComponent = React.lazy(() => import("./LazyComponent"));

function App() {
  return (
    <div>
      <h1>Welcome to My App</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

export default App;

React.lazy faqat LazyComponent render qilinganda dinamik ravishda import qiladi. Suspense fallback komponent yuklanayotgan paytda zaxira UI taqdim etadi (loader). 📹 youtu.be/KcbPpVeDqKA?si=2_eFmDXsVeC3--AR ⚙️ Angular Lazy Loading Default holatda, NgModul'lar tezda yuklanadi. Bu shuni anglatadiki, ilova yuklanganda, barcha NgModul'lar darhol yuklanadi, ular hozirgi vaqtda zarur yoki yo'qligiga qaramay. Lazy loading dastlabki paket (bundle) o'lchamlarini kichikroq saqlashga yordam beradi, bu esa yuklash vaqtlarini qisqartirishga yordam beradi. Angular modullarini lazy loading qilish uchun AppRoutingModule routing konfiguratsiyasida component o'rniga loadChildren'dan foydalaniladi

const routes: Routes = [
  {
    path: 'items',
    loadChildren: () => import('./items.module').then(m => m.ItemsModule)
  }
];

🔗 v17.angular.io/guide/lazy-loading-ngmodules 📹 youtu.be/NFJbXP6Ci98?si=tutzScmyavxQbYim #lazyLoading #react #angular ✅ @JasXDev

Matritsani nollashtiring: Matritsa berilgan, agar har qanday elementi 0 ga teng bo'lsa, siz shu elementning ustun va qatorini barcha elementlarini 0 ga o'zgartiring va shu matritsani qaytaring.

Input: matrix=[[1,1,1],[1,0,1],[1,1,1]] output: [[1,0,1],[0,0,0],[1,0,1]] Tarif: Matritsa[2][2]=0 boʻlgani uchun. Shuning uchun 2-ustun va 2-qator 0 ga oʻrnatiladi. Input: matrix=[[0,1,2,0],[3,4,5,2],[1,3,1,5]] Output: [[0,0,0,0],[0,4,5,0],[0,3,1,0]] Tarif: Matritsa[0][0]=0 va matritsa[0][3]=0. Shuning uchun 1-qator, 1-ustun va 4-ustun 0 ga o'rnatiladi.

Agar savol qiyinlik qilsa, internetdan izlab ko'rib javobini ko'rib, algorithmni qanday ishlashini tushunishga harakat qiling va shuni o'zingiz takroran ishlab ko'ring!!! Leetcode dagi shu misol uchun shunga o'xshash link : click me Commentariyada boshqalar bilan muhokama qiling, juda muhim @JavaScriptQuiiz

age++

Tavsiya! Click'da senior dasturchi, Husniddin aka, advanced nodejs kursi tashkil qilibdilar. Kimga qiziq bo'lsa marhamat: click BEGZOD2025NODE ushbu promokod bilan aloqaga chiqsanggiz, 15% chegirma ham qilib beradilar. @JavaScriptQuiiz

Ichimizda jizzaxlik dasturchilar bormi ? @izzaxlik_Dasturchilar guruhimzga o'tib qo'ying)

const obj = {
  a: 10,
  b: function () {
    console.log(this.a);
    const inner = () => {
      console.log(this.a);
    };
    inner();
  },
};

const b = obj.b;
b(); // Output?
obj.b(); // Output?

Javob qanday chiqadi va sababini ham tushunturing! @JavaScriptQuiiz

NuxtJSga community: @nuxt_js_uz reklama emas, dasturchilarga yordam bu)

React ni o'zida cache api borligini bilarmidiz ? Cache function bu sizga Server componentlarda data ni cache qilish uchun, snapshot share va data preload uchun juda foyda berishi mumkun. To'liqroq use case ⬇️ https://react.dev/reference/react/cache #foydali

🚀 Kanaldagi 1 Oylik JavaScript & React Kontent Rejasi: 💡 Ma’lumot: Har hafta murakkab va qiziqarli mavzular yoritiladi. Yakshanba kunlari quiz orqali bilimlarni mustahkamlash mumkin! ✅ 🗓 1-hafta: JavaScript Asinxronligi va API-lar 📍 Mavzular: 🔹 Asinxron JavaScript qanday ishlaydi? (Call Stack, Event Loop, Web APIs) 🔹 Promise va async/await chuqur tushuncha 🔹 Fetch API va Axios farqlari 🔹 REST API va GraphQL: Qaysi biri yaxshiroq? 🔹 Yakshanba: API va Asinxron JS Quiz ✅ Qiziqarli post g‘oyalari: 💡 “Promise.all va Promise.race farqlari” 💡 “GraphQL nima va nega uni ishlatish kerak?” 🗓 2-hafta: JavaScript Advanced Konseptsiyalar 📍 Mavzular: 🔹 Closures va Higher-Order Functions 🔹 Event Delegation va Debouncing 🔹 Prototype va Object Inheritance 🔹 Memory Management va Garbage Collection 🔹 Yakshanba: JavaScript Advanced Quiz ✅ Qiziqarli post g‘oyalari: 💡 “JavaScriptda Memory Leak qanday oldini olish mumkin?” 💡 “Nega this muammo tug‘diradi va uni qanday hal qilish kerak?” 🗓 3-hafta: React Fundamentals & Best Practices 📍 Mavzular: 🔹 React qanday ishlaydi? (Virtual DOM, Reconciliation) 🔹 Hooks va ularning ishlatilishi (useState, useEffect, useRef) 🔹 State Management: Context API vs Redux vs Zustand 🔹 Performance Optimization: React.memo, useCallback, useMemo 🔹 Yakshanba: React Fundamentals Quiz ✅ Qiziqarli post g‘oyalari: 💡 “useEffect-ni noto‘g‘ri ishlatishdan qanday qochish kerak?” 💡 “React-da 10 ta katta xato” 🗓 4-hafta: Full-Stack Development: 📍 Mavzular: 🔹 Next.js vs CRA: Qaysi biri yaxshiroq? 🔹 Server Components va API Routes 🔹 Full-stack loyihalar uchun eng yaxshi texnologiyalar 🔹 Yakshanba: Full-Stack Quiz ✅ Qiziqarli post g‘oyalari: 💡 “Eng yaxshi Next.js arxitekturasi qanday bo‘lishi kerak?” @JavaScriptQuiiz🚀

🏆 “JavaScriptPro” testidagi eng yuqori natijalar 🖊 10 ta savol ⏱ Har bir savolga 30 soniya 🤓 30 kishi testda qatnashdi 🥇 @katelare – 10 (51.6 soniya) 🥈 @nks_i – 10 (1 daqiqa 38 soniya) 🥉 @yousuf_dev – 8 (1 daqiqa 37 soniya) 4. @Sultonqulov99 – 8 (1 daqiqa 54 soniya) 5. . – 7 (29.1 soniya) 6. Me – 7 (58.6 soniya) 7. @Jamshid_qayimov – 7 (2 daqiqa 3 soniya) 8. @theuro – 7 (2 daqiqa 5 soniya) 9. @omilxanov – 7 (2 daqiqa 27 soniya) 10. @NodejsDasturchi – 7 (2 daqiqa 34 soniya) 11. @dvnphch – 6 (1 daqiqa 59 soniya) 12. @kxatib – 6 (2 daqiqa 2 soniya) 13. @saddi_abu – 6 (2 daqiqa 8 soniya) 14. @Shavkatbek_19 – 6 (2 daqiqa 50 soniya) 15. @Melord0070 – 5 (1 daqiqa 44 soniya) 16. @matyoqubov_Ibrokhim – 5 (1 daqiqa 45 soniya) 17. @navruz_web – 5 (1 daqiqa 36 soniya) 18. @AbdumalikJuraev – 5 (1 daqiqa 54 soniya) 19. @rzmuxammed – 5 (2 daqiqa 22 soniya) 20. @sotvoldiyee – 5 (2 daqiqa 38 soniya)

Kimdadur mediumda account bor bo'lsa, follow bosib, claps ham bosib qo'ying, keyingi postlarga albatta ta'sir qiladi.

📌 Ushbu post orqali siz JavaScript-da dasturchilar tomonidan eng ko‘p qiladiga 8 ta qo'pol xatolik va ularni qanday oldini olish haqida bilib olasiz. 👉 Postni to‘liq o‘qish: click @JavaScriptQuiiz » #medium

🎲 “JavaScriptPro” testi 🖊 10 ta savol · ⏱ 30 soniya

Marhamat, "bu testni ishlash" tugmasini bosing! https://t.me/QuizBot?start=7ouzfJwD

"Yengilgina" Js quizlarga nima deysizlar ? Bugun soat 22:00 da kanalga 10 ta Jsga doir quizlar tashlanadi. @JavaScriptQuiiz

O'zim haqimda qisqacha: Hech kanalga o'zim haqimda yozmagan ekanman, ismim Begzod familyam Abduhamidov, yoshim 15 da, web dasturchiman, dasturlashga 12/13 yoshlarimda kirib kelganman, dasturlashni self-study o'rganganman, asosan front-end sohasida ish olib boraman, 1~ yil freelanserlik bilan ham shug'ullanganman, hozirda asosan back-end sohasini o'rganmoqdaman.