محتوای رندر شده با جاوااسکریپت

اپلیکیشن‌های وب مدرن به ندرت HTML کامل ارائه می‌دهند - در عوض، محتوا به صورت پویا بارگذاری و از طریق جاوااسکریپت رندر می‌شود. این امر چالش‌های منحصربه‌فردی برای اسکرپینگ وب ایجاد می‌کند که در این دو فصل به آن‌ها خواهیم پرداخت.

فصل 4: فید اخبار پویا

اولین چالش ما شامل اسکرپینگ یک فید اخبار است که مقاله‌ها به صورت پویا از طریق جاوااسکریپت بارگذاری می‌شوند. این موضوع چندین مفهوم کلیدی را معرفی می‌کند:

• اتوماسیون مرورگر با Playwright
• انتظار برای بارگذاری محتوای پویا
• مدیریت عناصر 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');

// استخراج داده از DOM زنده با استفاده از page.$$eval()
// این تابع callback را در زمینه مرورگر اجرا می‌کند
// تا همه عناصر مطابق با انتخابگر را یکجا ارزیابی کند
const items = await page.$$eval('.news-item', elements => {
  // مانند Array.map() روی عناصر مطابق کار می‌کند
  // اشیاء جاوااسکریپت قابل سریال‌سازی برمی‌گرداند
  // عالی برای استخراج داده از چندین عنصر
});

فصل 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; // محتوای بیشتری برای بارگذاری نیست
  }
}

نکات مهم

هنگام کار با محتوای رندر شده با جاوااسکریپت:

1. کارایی: اسکرپینگ محتوای پویا کندتر از HTML استاتیک است
2. مدیریت منابع: اتوماسیون مرورگر منابع سیستم بیشتری استفاده می‌کند
3. پایداری: نیاز به مدیریت حالت‌های بارگذاری و شرایط شبکه
4. محدودیت نرخ: اضافه کردن تأخیر بین اقدامات را در نظر بگیرید

بهترین روش‌ها

1. استراتژی‌های انتظار مناسب استفاده کنید:

// انتظار برای عناصر مشخص
await page.waitForSelector('.selector');

// انتظار برای بی‌فعال شدن شبکه
await page.waitForLoadState('networkidle');

// شرایط انتظار سفارشی
await page.waitForFunction(() => {
  // شرط جاوااسکریپت سفارشی
});

2. مدیریت خطای قوی پیاده‌سازی کنید:

try {
  await page.goto(url);
  // ... منطق اسکرپینگ
} catch (error) {
  console.error('اسکرپینگ ناموفق:', error);
} finally {
  await browser.close(); // همیشه تمیزکاری کنید
}

3. پیاده‌سازی مکانیزم‌های تلاش مجدد برای قابلیت اعتماد را در نظر بگیرید
4. استفاده از حافظه را هنگام کار با مجموعه داده‌های بزرگ نظارت کنید
5. داده‌های استخراج شده را برای ثبات اعتبارسنجی کنید

آزمایش راه‌حل شما

محیط آزمایش API‌های شبه‌ساز ارائه می‌دهد که شرایط دنیای واقعی را شبیه‌سازی می‌کند:

• زمان‌های بارگذاری متغیر
• تأخیر شبکه
• مکانیزم‌های صفحه‌بندی
• حالت‌های خطا

این تغییرات را امتحان کنید:

1. زمان‌بندی اسکرول را تغییر دهید
2. اندازه‌های مختلف صفحه را مدیریت کنید
3. با شرایط شبکه کند آزمایش کنید
4. یکپارچگی داده‌ها را اعتبارسنجی کنید

آماده مدیریت محتوای پویا هستید؟ کد چالش و محیط‌های آزمایش در مخزن هستند.

نمونه‌های حل شده در _solved/chapter4/ و _solved/chapter5/ را برای پیاده‌سازی‌های مرجع بررسی کنید. به یاد داشته باشید - اسکرپینگ وب مدرن در مورد درک هم ساختار HTML و هم رفتار اپلیکیشن است.

اسکرپینگ خوشحال!