JavaScript மூலம் render செய்யப்படும் உள்ளடக்கம்

நவீன web பயன்பாடுகள் முழுமையான HTML-ஐ அரிதாகவே நேரடியாக வழங்குகின்றன — அதன் பதிலாக, உள்ளடக்கம் JavaScript மூலம் இயக்கநிலையாக ஏற்றப்பட்டு render செய்யப்படுகிறது. இது web scraping-க்கு தனித்துவமான சவால்களை உருவாக்குகிறது; அவற்றை இந்த இரண்டு அத்தியாயங்களில் நாம் சமாளிக்கப் போகிறோம்.

அத்தியாயம் 4: இயக்கநிலைச் செய்தி ஓடை

எங்களின் முதல் சவால், JavaScript மூலம் இயக்கநிலையாக ஏற்றப்படும் கட்டுரைகள் கொண்ட ஒரு செய்தி ஓடையிலிருந்து scraping செய்வதைக் குறிக்கிறது. இது சில முக்கியமான கருத்துகளை அறிமுகப்படுத்துகிறது:

• Playwright மூலம் browser automation
• இயக்கநிலையாக ஏற்றப்படும் உள்ளடக்கம் render ஆகும் வரை காத்திருத்தல்
• JavaScript மூலம் render செய்யப்பட்ட DOM கூறுகளை கையாளுதல்

பக்கத்தின் அமைப்பு இதுபோல இருக்கும்:

<div class="news-feed">
  <article class="news-item">
    <h2>Breaking News Title</h2>
    <p>Article content...</p>
    <div class="meta">
      <span>By Author Name</span>
      <time datetime="2024-03-08T12:00:00Z">March 8, 2024</time>
    </div>
  </article>
  <!-- More articles load dynamically -->
</div>

நிலையான HTML scraping-இலிருந்து உள்ள முக்கிய வேறுபாடுகள்:

// Instead of cheerio.load(), we use Playwright
const browser = await chromium.launch();
const page = await browser.newPage();

// Wait for content to render
await page.waitForSelector('.news-item');

// Extract data from the live DOM using page.$$eval()
// This runs the callback function in the browser context
// to evaluate all elements matching the selector at once
const items = await page.$$eval('.news-item', elements => {
  // Works like Array.map() on matching elements
  // Returns serializable JavaScript objects
  // Perfect for extracting data from multiple elements
});

அத்தியாயம் 5: முடிவில்லா scroll படத் தொகுப்பு

இயக்கநிலை உள்ளடக்கம் பற்றிய எங்கள் அறிவை அடிப்படையாகக் கொண்டு, இன்னும் சிக்கலான ஒரு நிலையை நாம் சமாளிக்கிறோம் — infinite scroll கொண்ட ஒரு படத் தொகுப்பு. இது பின்வருவனவற்றை அறிமுகப்படுத்துகிறது:

• lazy-loaded உள்ளடக்கத்தை கையாளுதல்
• scroll நிகழ்வுகளை கண்டறிந்து தூண்டுதல்
• async loading நிலைகளை நிர்வகித்தல்
• சிக்கலான UI முறைகளிலிருந்து தரவைப் பிரித்தெடுத்தல்

இங்கு உள்ள சவால் என்னவென்றால், பயனர் scroll செய்யும் போது உள்ளடக்கம் படிப்படியாக ஏற்றப்படுகிறது:

<div class="photo-gallery">
  <div class="photo-card">
    <img src="..." alt="Photo title" />
    <h2>Photo Title</h2>
    <p>By Photographer Name</p>
    <div class="flex">
      <span>❤️ 42</span>
    </div>
  </div>
  <!-- More photos load on scroll -->
</div>

infinite scroll-ஐ கையாளுவதற்கான முக்கிய கருத்துகள்:

// Scroll to bottom until no new content loads
let previousHeight;
while (true) {
  previousHeight = await page.evaluate('document.body.scrollHeight');
  await page.evaluate('window.scrollTo(0, document.body.scrollHeight)');
  await page.waitForTimeout(1500); // Wait for content

  const newHeight = await page.evaluate('document.body.scrollHeight');
  if (newHeight === previousHeight) {
    break; // No more content to load
  }
}

முக்கிய கவனிக்க வேண்டியவை

JavaScript மூலம் render செய்யப்படும் உள்ளடக்கத்துடன் பணிபுரியும் போது:

1. செயல்திறன்: இயக்கநிலை உள்ளடக்க scraping, நிலையான HTML-ஐ விட மெதுவாக இருக்கும்
2. வள மேலாண்மை: Browser automation அதிகமான system வளங்களை பயன்படுத்தும்
3. நிலைத்தன்மை: loading நிலைகளையும் network சூழ்நிலைகளையும் கையாள வேண்டியது அவசியம்
4. Rate Limiting: செயல்களுக்கு இடையில் தாமதங்களை அமல்படுத்துவதைக் கருத்தில் கொள்ளுங்கள்

சிறந்த நடைமுறைகள்

1. பொருத்தமான wait உத்திகளைப் பயன்படுத்துங்கள்:

// Wait for specific elements
await page.waitForSelector('.selector');

// Wait for network idle
await page.waitForLoadState('networkidle');

// Custom wait conditions
await page.waitForFunction(() => {
  // Custom JavaScript condition
});

2. வலுவான error handling-ஐ செயல்படுத்துங்கள்:

try {
  await page.goto(url);
  // ... scraping logic
} catch (error) {
  console.error('Scraping failed:', error);
} finally {
  await browser.close(); // Always clean up
}

3. நம்பகத்தன்மைக்காக retry முறைகளை செயல்படுத்துவதையும் கருத்தில் கொள்ளுங்கள்
4. பெரிய தரவுத்தொகுப்புகளுடன் பணிபுரியும் போது memory பயன்பாட்டைக் கண்காணிக்கவும்
5. பிரித்தெடுக்கப்பட்ட தரவு சீர்தன்மையுடன் உள்ளதா என்பதைச் சரிபார்க்கவும்

உங்கள் தீர்வைச் சோதித்தல்

சோதனைச் சூழல், நிஜ உலக நிலைகளை ஒத்திருக்கும் mock API-களை வழங்குகிறது:

• மாறுபடும் loading நேரங்கள்
• Network latency
• Pagination செயல்முறை
• Error நிலைகள்

இந்த மாற்றங்களையும் முயற்சிக்கவும்:

1. Scroll timing-ஐ மாற்றிப் பாருங்கள்
2. வேறுபட்ட திரை அளவுகளை கையாளுங்கள்
3. மெதுவான network சூழ்நிலைகளில் சோதியுங்கள்
4. தரவின் முழுமைத்தன்மையைச் சரிபார்க்கவும்

இயக்கநிலை உள்ளடக்கத்தை கையாள தயாரா? சவால் code-மும் சோதனைச் சூழல்களும் repository-யில் உள்ளன.

செயல்படும் அமலாக்கங்களுக்காக exercises/chapter-04/solution/src/ மற்றும் exercises/chapter-05/solution/src/ உள்ள reference தீர்வுகளைப் பாருங்கள். நினைவில் கொள்ளுங்கள் — நவீன web scraping என்பது HTML அமைப்பையும் பயன்பாட்டு நடத்தையையும் இரண்டையும் புரிந்துகொள்வதையே குறிக்கிறது.

மகிழ்ச்சியான scraping!