JavaScript-ரெண்டர் செய்யப்பட்ட உள்ளடக்கம்

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

அத்தியாயம் 4: இயங்குதள செய்தி ஊட்டம்

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

• Playwright உடன் உலாவி தன்னியக்கம்
• இயங்குதள உள்ளடக்கம் ஏற்றுவதற்கு காத்திருத்தல்
• JavaScript-ரெண்டர் செய்யப்பட்ட DOM கூறுகளை கையாளுதல்

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

<div class="news-feed">
  <article class="news-item">
    <h2>உடனுக்குடன் செய்தி தலைப்பு</h2>
    <p>கட்டுரை உள்ளடக்கம்...</p>
    <div class="meta">
      <span>ஆசிரியர் பெயர்</span>
      <time datetime="2024-03-08T12:00:00Z">மார்ச் 8, 2024</time>
    </div>
  </article>
  <!-- மேலும் கட்டுரைகள் இயங்குதளமாக ஏற்றப்படுகின்றன -->
</div>

நிலையான HTML ஸ்கிராப்பிங்கிலிருந்து முக்கிய வேறுபாடுகள்:

// cheerio.load() க்கு பதிலாக, நாம் Playwright ஐப் பயன்படுத்துகிறோம்
const browser = await chromium.launch();
const page = await browser.newPage();

// உள்ளடக்கம் ரெண்டர் ஆகுவதற்கு காத்திருங்கள்
await page.waitForSelector('.news-item');

// page.$$eval() பயன்படுத்தி உயிருள்ள DOM லிருந்து தரவை பிரித்தெடுக்கவும்
// இது கால்பேக் செயல்பாட்டை உலாவி சூழலில் இயக்குகிறது
// தேர்வாளருடன் பொருந்தும் அனைத்து கூறுகளையும் ஒரே நேரத்தில் மதிப்பிடுவதற்கு
const items = await page.$$eval('.news-item', elements => {
  // பொருந்தும் கூறுகளில் Array.map() போல் வேலை செய்கிறது
  // சீரியலைசேபிள் JavaScript ஆப்ஜெக்ட்களை திருப்பி அளிக்கிறது
  // பல கூறுகளிலிருந்து தரவை பிரித்தெடுப்பதற்கு சரியானது
});

அத்தியாயம் 5: முடிவில்லா ஸ்க்ரோல் கேலரி

எங்கள் இயங்குதள உள்ளடக்க அறிவின் அடிப்படையில், நாம் இன்னும் சிக்கலான சூழ்நிலையைச் சமாளிக்கிறோம் - முடிவில்லா ஸ்க்ரோலுடன் ஒரு புகைப்பட கேலரி. இது அறிமுகப்படுத்துகிறது:

• அழுக்கு-ஏற்றப்பட்ட உள்ளடக்கத்தை கையாளுதல்
• ஸ்க்ரோல் நிகழ்வுகளைக் கண்டறிதல் மற்றும் தூண்டுதல்
• அசிங்க் ஏற்றுதல் நிலைகளை நிர்வகித்தல்
• சிக்கலான UI வடிவங்களிலிருந்து தரவை பிரித்தெடுத்தல்

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

<div class="photo-gallery">
  <div class="photo-card">
    <img src="..." alt="புகைப்பட தலைப்பு" />
    <h2>புகைப்பட தலைப்பு</h2>
    <p>புகைப்படக்காரர் பெயர்</p>
    <div class="flex">
      <span>❤️ 42</span>
    </div>
  </div>
  <!-- ஸ்க்ரோலில் மேலும் புகைப்படங்கள் ஏற்றப்படுகின்றன -->
</div>

முடிவில்லா ஸ்க்ரோலை கையாளுவதற்கான முக்கிய கருத்துக்கள்:

// புதிய உள்ளடக்கம் ஏற்றப்படும் வரை கீழே ஸ்க்ரோல் செய்யவும்
let previousHeight;
while (true) {
  previousHeight = await page.evaluate('document.body.scrollHeight');
  await page.evaluate('window.scrollTo(0, document.body.scrollHeight)');
  await page.waitForTimeout(1500); // உள்ளடக்கத்திற்காக காத்திருக்கவும்

  const newHeight = await page.evaluate('document.body.scrollHeight');
  if (newHeight === previousHeight) {
    break; // ஏற்ற வேண்டிய மேலும் உள்ளடக்கம் இல்லை
  }
}

முக்கியமான கருத்தரிப்புகள்

JavaScript-ரெண்டர் செய்யப்பட்ட உள்ளடக்கத்துடன் வேலை செய்யும்போது:

1. செயல்திறன்: இயங்குதள உள்ளடக்க ஸ்கிராப்பிங் நிலையான HTML ஐ விட மெதுவாக உள்ளது
2. வள நிர்வாகம்: உலாவி தன்னியக்கம் அதிக கணினி வளங்களைப் பயன்படுத்துகிறது
3. நிலைத்தன்மை: ஏற்றுதல் நிலைகள் மற்றும் நெட்வொர்க் நிலைமைகளைக் கையாளுவது தேவை
4. விகித வரம்பு: செயல்களுக்கு இடையில் தாமதங்களைச் செயல்படுத்துவதைக் கருதுங்கள்

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

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

// குறிப்பிட்ட கூறுகளுக்காக காத்திருங்கள்
await page.waitForSelector('.selector');

// நெட்வொர்க் செயல்படாத நிலைக்காக காத்திருங்கள்
await page.waitForLoadState('networkidle');

// வைப்பட காத்திருப்பு நிலைமைகள்
await page.waitForFunction(() => {
  // வைப்பட JavaScript நிலை
});

2. வலுவான பிழை கையாளுதலைச் செயல்படுத்துங்கள்:

try {
  await page.goto(url);
  // ... ஸ்கிராப்பிங் தர்க்கம்
} catch (error) {
  console.error('ஸ்கிராப்பிங் தோல்வியுற்றது:', error);
} finally {
  await browser.close(); // எப்போதும் சுத்தம் செய்யுங்கள்
}

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

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

சோதனை சூழல் உண்மையான உலக நிலைமைகளை அனுகரிக்கும் போலி APIs ஐ வழங்குகிறது:

• மாறும் ஏற்றுதல் நேரங்கள்
• நெட்வொர்க் தாமதம்
• பேஜினேஷன் இயக்கவியல்
• பிழை நிலைகள்

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

1. ஸ்க்ரோல் நேரத்தை மாற்றுங்கள்
2. வெவ்வேறு திரை அளவுகளைக் கையாளுங்கள்
3. மெதுவான நெட்வொர்க் நிலைமைகளுடன் சோதிக்கவும்
4. தரவு ஒருமைப்பாட்டை சரிபார்க்கவும்

இயங்குதள உள்ளடக்கத்தைக் கையாள தயாரா? சவால் குறியீடு மற்றும் சோதனை சூழல்கள் களஞ்சியத்தில் உள்ளன.

குறிப்பு நடைமுறைகளுக்கு _solved/chapter4/ மற்றும் _solved/chapter5/ இல் தீர்க்கப்பட்ட உதாரணங்களைப் பார்க்கவும். நினைவில் கொள்ளுங்கள் - நவீன வலை ஸ்கிராப்பிங் HTML அமைப்பு மற்றும் பயன்பாட்டு நடவடிக்கை இரண்டையும் புரிந்துகொள்வதைப் பற்றியது.

மகிழ்ச்சியான ஸ்கிராப்பிங்!