Хурдтай вебийн 3 шинж

#javascript #performance #webperf #webdev

1️⃣ Source Order буюу Эх кодын дараалал

HTML-ийн дараалал хэрэглэгчийн харж буй хурдыг шууд тодорхойлдог.

Жишээ:

html

<!-- Удаан хувилбар -->
<script src="heavy-library.js"></script>
<h1>Мэдээлэл</h1>
<p>Эндээс уншиж эхэлнэ.</p>

<!-- Оновчтой хувилбар -->
<h1>Мэдээлэл</h1>
<p>Эндээс уншиж эхэлнэ.</p>
<script src="heavy-library.js" defer></script>

👉 defer ашигласнаар хэрэглэгч эхний контентыг шууд харна.

2️⃣ Critical Rendering Path

Браузер DOM + CSSOM → Render Tree → Layout → Paint дарааллаар ажилладаг.

React дээр жишээ:

jsx

// Удаан хувилбар
import BigChart from './BigChart';

function App() {
  return (
    <div>
      <BigChart /> {/* Том график шууд ачаалдаг */}
    </div>
  );
}

// Оновчтой хувилбар (Lazy Loading)
const BigChart = React.lazy(() => import('./BigChart'));

function App() {
  return (
    <div>
      <React.Suspense fallback={<p>Ачаалж байна...</p>}>
        <BigChart />
      </React.Suspense>
    </div>
  );
}

👉 Lazy loading ашигласнаар чухал контент түрүүлж гарч, том компонент дараа нь ачаалагдана.

3️⃣ Latency буюу Сүлжээний саатал

Сүлжээний хүсэлт удаан байвал хэрэглэгчийн туршлага муудна.

Node.js дээр жишээ:

// Удаан хувилбар
app.get('/data', async (req, res) => {
  const result = await fetch('http://slow-server.com/api');
  res.json(await result.json());
});

// Оновчтой хувилбар (Cache ашиглах)
const cache = new Map();

app.get('/data', async (req, res) => {
  if (cache.has('data')) {
    return res.json(cache.get('data'));
  }
  const result = await fetch('http://slow-server.com/api');
  const data = await result.json();
  cache.set('data', data);
  res.json(data);
});

👉 Cache ашигласнаар давтагдсан хүсэлтүүдийг хурдан хариулна.