Rumah >hujung hadapan web >Soal Jawab bahagian hadapan >Bagaimanakah klien Node.js melaksanakan paparan halaman tanpa memuat turun sumber?

Bagaimanakah klien Node.js melaksanakan paparan halaman tanpa memuat turun sumber?

PHPz
PHPzasal
2023-04-05 09:09:18674semak imbas

Dengan pembangunan berterusan teknologi web, semakin banyak tapak web mula menggunakan teknologi JavaScript dan Ajax untuk mencapai kesan halaman yang lebih interaktif. Sebagai bahasa pengaturcaraan bahagian belakang berdasarkan JavaScript, pelanggan Node.js semakin digunakan untuk membangunkan aplikasi web. Walau bagaimanapun, halaman hujung hadapan sesetengah tapak web perlu memuat turun beberapa sumber sebelum ia boleh dipaparkan secara normal Berikut ialah kaedah biasa untuk memaparkan halaman pada klien Node.js tanpa memuat turun sumber.

Secara amnya, jika anda perlu mengakses tapak web pada klien Node.js, anda biasanya meminta halaman HTML tapak web, kemudian menghuraikan pautan sumber di dalamnya, dan kemudian memuat turun dan memaparkan halaman dengan meminta ini sumber.

Jika anda mesti log masuk untuk memuat turun sumber, anda perlu mensimulasikan log masuk pada klien Node.js dan merekod kuki supaya permintaan seterusnya dapat mengekalkan status log masuk. Contoh kod adalah seperti berikut:

const superagent = require('superagent');
const cheerio = require('cheerio');

superagent.post('https://example.com/login')
  .send({
    username: 'your username',
    password: 'your password'
  })
  .end((err, res) => {
    const cookie = res.headers['set-cookie'];
    superagent.get('https://example.com/secret-page')
      .set('cookie', cookie)
      .end((err, res) => {
        const $ = cheerio.load(res.text);
        console.log($('p').text());
      });
  });

Dalam kod di atas, kami menggunakan modul superagen untuk melaksanakan operasi log masuk dan meminta halaman. Antaranya, kaedah .set() digunakan untuk menetapkan Kuki supaya kita boleh kekal log masuk dalam permintaan seterusnya.

Walau bagaimanapun, jika muat turun sumber tertentu tidak diperlukan, kami boleh menggunakan beberapa teknik untuk mengelakkan memuat turun sumber yang tidak diperlukan ini. Sebagai contoh, jika kami tidak perlu memaparkan sumber seperti imej dan video yang terkandung pada beberapa halaman web, kami boleh menukar URL mereka kepada rentetan kosong atau ruang letak untuk menghalang muat turun. Kod sampel adalah seperti berikut:

const superagent = require('superagent');
const cheerio = require('cheerio');

superagent.get('https://example.com')
  .end((err, res) => {
    const $ = cheerio.load(res.text);
    $('img').attr('src', '');  // 将所有图片链接修改为空字符串
    $('video').attr('src', 'placeholder.mp4'); // 将所有视频链接修改为占位符
    console.log($.html());
  });

Dalam kod di atas, kami menggunakan modul cheerio untuk menghuraikan halaman HTML, dan kemudian menggunakan kaedah $().attr() untuk mengubah suai pautan sumber yang perlu diubah suai kepada rentetan yang kita mahu.

Selain kaedah di atas, terdapat cara yang lebih maju untuk mencapai kesan tidak memuat turun sumber, iaitu menggunakan penyemak imbas tanpa kepala. Puppeteer ialah perpustakaan penyemak imbas tanpa kepala yang dibangunkan oleh Google yang boleh digunakan dalam Node.js. Melalui Puppeteer, kami boleh mensimulasikan tingkah laku penyemak imbas untuk mengakses halaman web, dan menggunakan beberapa teknologi canggih untuk mengawal pemaparan halaman dan pemuatan sumber. Kod sampel adalah seperti berikut:

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com', {
    waitUntil: 'networkidle0'  // 告诉 Puppeteer 在所有网络请求结束后再进行页面渲染
  });
  await page.evaluate(() => {
    Array.from(document.querySelectorAll('img')).forEach(img => {
      img.src = '';
    });
    Array.from(document.querySelectorAll('video')).forEach(video => {
      video.src = 'placeholder.mp4';
    });
  });
  const html = await page.content();
  console.log(html);
  await browser.close();
})();

Melalui Puppeteer, kami boleh mengubah suai pautan sumber yang perlu dimuatkan sebelum memaparkan halaman HTML untuk mencapai kesan tidak memuat turun sumber. Kelebihan pendekatan ini ialah ia boleh mengawal tingkah laku pemuatan sumber dan pemaparan halaman dengan lebih cekap dan tepat.

Ringkasnya, memaparkan halaman tanpa memuat turun sumber dalam klien Node.js boleh dicapai dalam pelbagai cara dan pemilihan kaedah khusus bergantung pada situasi sebenar. Tetapi secara umum, menguasai kemahiran ini boleh memberi kita kawalan yang lebih baik ke atas pemaparan halaman dan pemuatan sumber, sekali gus meningkatkan prestasi aplikasi dan pengalaman pengguna.

Atas ialah kandungan terperinci Bagaimanakah klien Node.js melaksanakan paparan halaman tanpa memuat turun sumber?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya:Adakah nodejs berguna?Artikel seterusnya:Adakah nodejs berguna?