வலை ஓடைகள்: நவீன பயன்பாடுகளுக்கான திறமையான தரவு செயலாக்கம்

வலை உருவாக்கத்தின் எப்போதும் மாறிவரும் உலகில், திறமையான தரவு கையாளுதல் மிக முக்கியமானது. பயன்பாடுகள் அதிக தரவு-செறிவு கொண்டதாக மாறும்போது, முழு தரவுத்தொகுப்புகளையும் ஒரே நேரத்தில் ஏற்றுவதற்கும் செயலாக்குவதற்கும் பாரம்பரிய முறைகள் செயல்திறன் தடைகளை மற்றும் மந்தமான பயனர் அனுபவங்களுக்கு வழிவகுக்கின்றன. வலை ஓடைகள் ஒரு சக்திவாய்ந்த மாற்றீட்டை வழங்குகின்றன, டெவலப்பர்களுக்கு படிப்படியாக தரவை செயலாக்க, பதிலளிப்புத்தன்மையை மேம்படுத்த, மற்றும் நினைவகப் பயன்பாட்டைக் குறைக்க உதவுகின்றன.

வலை ஓடைகள் என்றால் என்ன?

வலை ஓடைகள் ஒரு நவீன ஜாவாஸ்கிரிப்ட் ஏபிஐ ஆகும், இது தரவு ஓடைகளுடன் வேலை செய்வதற்கான ஒரு இடைமுகத்தை வழங்குகிறது. முழு தரவுத்தொகுப்பும் ஏற்றப்படும் வரை காத்திருக்காமல், தரவு கிடைக்கும்போது அதை துண்டுகளாக செயலாக்க அவை உங்களை அனுமதிக்கின்றன. இது குறிப்பாக இதற்குப் பயனுள்ளதாக இருக்கும்:

• பெரிய கோப்புகளை (எ.கா., வீடியோ, ஆடியோ, அல்லது பெரிய உரை கோப்புகள்) கையாளுதல்.
• நெட்வொர்க் கோரிக்கைகளிலிருந்து நிகழ்நேரத்தில் தரவைச் செயலாக்குதல்.
• தரவு வரும்போது புதுப்பிக்கப்படும் பதிலளிக்கக்கூடிய பயனர் இடைமுகங்களை உருவாக்குதல்.
• சிறிய துண்டுகளில் தரவைச் செயலாக்குவதன் மூலம் நினைவகத்தைச் சேமித்தல்.

ஓடைகள் ஏபிஐ பல முக்கிய இடைமுகங்களைக் கொண்டுள்ளது:

• ReadableStream: நீங்கள் படிக்கக்கூடிய தரவின் மூலத்தைக் குறிக்கிறது.
• WritableStream: நீங்கள் எழுதக்கூடிய தரவின் இலக்கைக் குறிக்கிறது.
• TransformStream: ஒரு ReadableStream-இலிருந்து தரவைப் படித்து, அதை மாற்றி, முடிவை ஒரு WritableStream-இல் எழுதும் ஒரு மாற்றுச் செயல்முறையைக் குறிக்கிறது.
• ByteLengthQueuingStrategy: துண்டுகளின் அளவை பைட்டுகளில் அளவிடும் ஒரு வரிசைப்படுத்தல் உத்தி.
• CountQueuingStrategy: துண்டுகளின் எண்ணிக்கையை எண்ணும் ஒரு வரிசைப்படுத்தல் உத்தி.

வலை ஓடைகளைப் பயன்படுத்துவதன் நன்மைகள்

உங்கள் பயன்பாடுகளில் வலை ஓடைகளை ஏற்றுக்கொள்வது பல குறிப்பிடத்தக்க நன்மைகளை வழங்குகிறது:

மேம்படுத்தப்பட்ட செயல்திறன்

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

குறைக்கப்பட்ட நினைவகப் பயன்பாடு

முழு தரவுத்தொகுப்பையும் நினைவகத்தில் ஏற்றுவதற்குப் பதிலாக, வலை ஓடைகள் தரவை படிப்படியாக செயலாக்குகின்றன. இது நினைவகப் பயன்பாட்டைக் குறைத்து, உங்கள் பயன்பாட்டை மிகவும் திறமையானதாக ஆக்குகிறது, குறிப்பாக பெரிய கோப்புகள் அல்லது தொடர்ச்சியான தரவு ஓடைகளைக் கையாளும் போது. மொபைல் போன்கள் அல்லது உட்பொதிக்கப்பட்ட அமைப்புகள் போன்ற வரையறுக்கப்பட்ட வளங்களைக் கொண்ட சாதனங்களுக்கு இது முக்கியமானது.

மேம்படுத்தப்பட்ட பதிலளிப்புத்தன்மை

வலை ஓடைகள் தரவு கிடைக்கும்போது உங்கள் பயனர் இடைமுகத்தைப் புதுப்பிக்க உங்களை அனுமதிக்கின்றன, மேலும் ஊடாடும் மற்றும் ஈர்க்கக்கூடிய அனுபவத்தை வழங்குகின்றன. உதாரணமாக, ஒரு கோப்பு பதிவிறக்கம் செய்யப்படும்போது நிகழ்நேரத்தில் புதுப்பிக்கப்படும் ஒரு முன்னேற்றப் பட்டியைக் காட்டலாம் அல்லது பயனர் தட்டச்சு செய்யும் போது தேடல் முடிவுகளைக் காட்டலாம். அரட்டை பயன்பாடுகள் அல்லது நேரடி டாஷ்போர்டுகள் போன்ற நிகழ்நேர தரவைக் கையாளும் பயன்பாடுகளுக்கு இது மிகவும் முக்கியமானது.

பின் அழுத்த மேலாண்மை

வலை ஓடைகள் உள்ளமைக்கப்பட்ட பின் அழுத்த வழிமுறைகளை வழங்குகின்றன, இது ஒரு ஓடையின் நுகர்வோர், தரவை உருவாக்கும் வேகத்தில் செயலாக்க முடியாவிட்டால், தயாரிப்பாளருக்கு மெதுவாகச் செல்ல சிக்னல் கொடுக்க அனுமதிக்கிறது. இது நுகர்வோர் அதிகமாகச் சுமையேற்றப்படுவதைத் தடுக்கிறது மற்றும் தரவு திறமையாகவும் நம்பகத்தன்மையுடனும் செயலாக்கப்படுவதை உறுதி செய்கிறது. நம்பமுடியாத நெட்வொர்க் இணைப்புகளிலிருந்து தரவைக் கையாளும் போது அல்லது வெவ்வேறு விகிதங்களில் தரவைச் செயலாக்கும்போது இது மிகவும் முக்கியமானது.

இணைப்புத்தன்மை மற்றும் மறுபயன்பாடு

வலை ஓடைகள் இணைக்கக்கூடியவையாக வடிவமைக்கப்பட்டுள்ளன, அதாவது சிக்கலான தரவு செயலாக்க குழாய்களை உருவாக்க நீங்கள் பல ஓடைகளை எளிதாக இணைக்கலாம். இது குறியீடு மறுபயன்பாட்டை ஊக்குவிக்கிறது மற்றும் உங்கள் பயன்பாடுகளை உருவாக்குவதையும் பராமரிப்பதையும் எளிதாக்குகிறது. உதாரணமாக, ஒரு கோப்பிலிருந்து தரவைப் படிக்கும், அதை வேறு வடிவத்திற்கு மாற்றும், பின்னர் அதை வேறு கோப்பில் எழுதும் ஒரு ஓடையை நீங்கள் உருவாக்கலாம்.

பயன்பாட்டு நிகழ்வுகள் மற்றும் எடுத்துக்காட்டுகள்

வலை ஓடைகள் பல்துறை திறன் கொண்டவை மற்றும் பரந்த அளவிலான பயன்பாட்டு நிகழ்வுகளுக்குப் பயன்படுத்தப்படலாம். இங்கே சில எடுத்துக்காட்டுகள் உள்ளன:

வீடியோ மற்றும் ஆடியோவை ஸ்ட்ரீமிங் செய்தல்

வலை ஓடைகள் வீடியோ மற்றும் ஆடியோ உள்ளடக்கத்தை ஸ்ட்ரீமிங் செய்வதற்கு ஏற்றவை. ஊடகத் தரவை துண்டுகளாக செயலாக்குவதன் மூலம், முழு கோப்பும் பதிவிறக்கம் செய்யப்படுவதற்கு முன்பே, உள்ளடக்கத்தை உடனடியாக இயக்கத் தொடங்கலாம். இது மெதுவான நெட்வொர்க் இணைப்புகளில் குறிப்பாக மென்மையான மற்றும் பதிலளிக்கக்கூடிய பார்க்கும் அனுபவத்தை வழங்குகிறது. யூடியூப் மற்றும் நெட்ஃபிக்ஸ் போன்ற பிரபலமான வீடியோ ஸ்ட்ரீமிங் சேவைகள் உலகளவில் தடையற்ற வீடியோ பிளேபேக்கை வழங்க இதே போன்ற தொழில்நுட்பங்களைப் பயன்படுத்துகின்றன.

உதாரணம்: ஒரு ReadableStream மற்றும் ஒரு <video> உறுப்பைப் பயன்படுத்தி ஒரு வீடியோவை ஸ்ட்ரீமிங் செய்தல்:

async function streamVideo(url, videoElement) {
  const response = await fetch(url);
  const reader = response.body.getReader();

  while (true) {
    const { done, value } = await reader.read();
    if (done) {
      break;
    }

    // வீடியோ உறுப்புடன் துண்டை இணைக்கவும்
    // (வீடியோ மூலத்தில் தரவைச் சேர்ப்பதைக் கையாள ஒரு பொறிமுறை தேவை)
    appendBuffer(videoElement, value);
  }
}

பெரிய உரை கோப்புகளை செயலாக்குதல்

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

உதாரணம்: ஒரு பெரிய உரை கோப்பைப் படித்து வரிகளின் எண்ணிக்கையை எண்ணுதல்:

async function countLines(file) {
  const stream = file.stream();
  const decoder = new TextDecoder();
  let reader = stream.getReader();
  let result = await reader.read();
  let lines = 0;
  let partialLine = '';

  while (!result.done) {
    let chunk = decoder.decode(result.value);
    let chunkLines = (partialLine + chunk).split('\n');
    partialLine = chunkLines.pop() || '';
    lines += chunkLines.length;
    result = await reader.read();
  }

  // ஒரு கடைசி வரி இருந்தால் அதையும் கணக்கில் எடுத்துக்கொள்ளவும்
  if (partialLine) {
    lines++;
  }

  return lines;
}

நிகழ்நேர தரவு செயலாக்கம்

வலை ஓடைகள் சென்சார்கள், நிதிச் சந்தைகள் அல்லது சமூக ஊடக ஊட்டங்களிலிருந்து வரும் நிகழ்நேர தரவைக் கையாளுவதற்கு நன்கு பொருத்தமானவை. தரவு வரும்போது அதைச் செயலாக்குவதன் மூலம், பயனருக்குப் புதுப்பித்த தகவல்களை வழங்கும் பதிலளிக்கக்கூடிய பயன்பாடுகளை நீங்கள் உருவாக்கலாம். நிதி வர்த்தக தளங்கள் நேரடி சந்தைத் தரவைக் காட்ட ஓடைகளை பெரிதும் நம்பியுள்ளன.

உதாரணம்: ஒரு WebSocket ஓடையிலிருந்து தரவைச் செயலாக்குதல்:

async function processWebSocketStream(url) {
  const socket = new WebSocket(url);

  socket.onmessage = async (event) => {
    const stream = new ReadableStream({
      start(controller) {
        controller.enqueue(new TextEncoder().encode(event.data));
        controller.close(); // ஒரு நிகழ்வைச் செயலாக்கிய பிறகு ஓடையை மூடவும்
      }
    });

    const reader = stream.getReader();
    let result = await reader.read();
    while (!result.done) {
      const decodedText = new TextDecoder().decode(result.value);
      console.log('பெறப்பட்ட தரவு:', decodedText);
      result = await reader.read(); // ஓடை மூடுவதால் இது ஒரு முறை மட்டுமே இயங்க வேண்டும்
    }
  };
}

பட செயலாக்கம்

வலை ஓடைகள் மிகவும் திறமையான பட செயலாக்கத்தை எளிதாக்கும். படத் தரவை ஸ்ட்ரீமிங் செய்வதன் மூலம், முழு படத்தையும் நினைவகத்தில் ஏற்றாமல் மாற்றங்கள் மற்றும் கையாளுதல்களைச் செய்யலாம். இது பெரிய படங்களுக்கு அல்லது சிக்கலான வடிப்பான்களைப் பயன்படுத்தும் போது குறிப்பாக பயனுள்ளதாக இருக்கும். ஆன்லைன் பட எடிட்டர்கள் சிறந்த செயல்திறனுக்காக ஓடை அடிப்படையிலான செயலாக்கத்தைப் பயன்படுத்துகின்றன.

வலை ஓடைகளை செயல்படுத்துதல்: ஒரு நடைமுறை வழிகாட்டி

ஒரு உரை கோப்பைப் படித்து அதன் உள்ளடக்கங்களைச் செயலாக்க வலை ஓடைகளைப் பயன்படுத்துவதற்கான ஒரு எளிய எடுத்துக்காட்டைப் பார்ப்போம்.

1. ஒரு கோப்பிலிருந்து ஒரு ReadableStream-ஐ உருவாக்கவும்:

async function processFile(file) {
  const stream = file.stream();
  const reader = stream.getReader();
  const decoder = new TextDecoder();
  let result = await reader.read();

  while (!result.done) {
    const chunk = decoder.decode(result.value);
    console.log('துண்டு செயலாக்கப்படுகிறது:', chunk);
    result = await reader.read();
  }

  console.log('கோப்பு செயலாக்கம் முடிந்தது.');
}

2. தரவை வெளியிட ஒரு WritableStream-ஐ உருவாக்கவும்:

const writableStream = new WritableStream({
  write(chunk) {
    console.log('துண்டு எழுதப்படுகிறது:', chunk);
    // எழுதும் செயல்பாடுகளை இங்கே செய்யவும் (எ.கா., ஒரு கோப்பில் எழுதுதல், ஒரு சேவையகத்திற்கு அனுப்புதல்)
  },
  close() {
    console.log('WritableStream மூடப்பட்டது.');
  },
  abort(reason) {
    console.error('WritableStream நிறுத்தப்பட்டது:', reason);
  }
});

3. தரவைச் செயலாக்க ஒரு TransformStream-ஐ உருவாக்கவும்:

const transformStream = new TransformStream({
  transform(chunk, controller) {
    const transformedChunk = chunk.toUpperCase();
    controller.enqueue(transformedChunk);
  }
});

4. ஓடைகளை ஒன்றாக இணைத்தல்:

// எடுத்துக்காட்டு: ஒரு கோப்பிலிருந்து படித்து, பெரிய எழுத்துக்களுக்கு மாற்றி, கன்சோலில் எழுதுதல்
async function processFileAndOutput(file) {
  const stream = file.stream();
  const decoder = new TextDecoder();
  const reader = stream.getReader();

  let result = await reader.read();

  while (!result.done) {
    const chunk = decoder.decode(result.value);
    const transformedChunk = chunk.toUpperCase();
    console.log('மாற்றப்பட்ட துண்டு:', transformedChunk);

    result = await reader.read();
  }

  console.log('கோப்பு செயலாக்கம் முடிந்தது.');
}

குறிப்பு: `pipeTo` முறை ஒரு ReadableStream-ஐ ஒரு WritableStream-உடன் இணைக்கும் செயல்முறையை எளிதாக்குகிறது:

// pipeTo ஐப் பயன்படுத்தி எளிமைப்படுத்தப்பட்ட எடுத்துக்காட்டு
async function processFileAndOutputPiped(file) {
  const stream = file.stream();

  const transformStream = new TransformStream({
    transform(chunk, controller) {
      const transformedChunk = new TextEncoder().encode(chunk.toUpperCase());
      controller.enqueue(transformedChunk);
    }
  });

  const writableStream = new WritableStream({
    write(chunk) {
      console.log('துண்டு எழுதப்படுகிறது:', new TextDecoder().decode(chunk));
    }
  });

  await stream
    .pipeThrough(new TextDecoderStream())
    .pipeThrough(transformStream)
    .pipeTo(writableStream);
}

வலை ஓடைகளுடன் வேலை செய்வதற்கான சிறந்த நடைமுறைகள்

வலை ஓடைகளின் நன்மைகளை அதிகரிக்க, பின்வரும் சிறந்த நடைமுறைகளைக் கவனியுங்கள்:

• சரியான வரிசைப்படுத்தல் உத்தியைத் தேர்வு செய்யவும்: உங்கள் தரவின் தன்மை மற்றும் உங்கள் பயன்பாட்டின் தேவைகளின் அடிப்படையில் பொருத்தமான வரிசைப்படுத்தல் உத்தியை (ByteLengthQueuingStrategy அல்லது CountQueuingStrategy) தேர்ந்தெடுக்கவும்.
• பிழைகளை நளினமாகக் கையாளவும்: ஓடை செயலாக்கத்தின் போது எதிர்பாராத பிழைகள் அல்லது விதிவிலக்குகளை நளினமாகக் கையாள வலுவான பிழை கையாளுதலைச் செயல்படுத்தவும்.
• பின் அழுத்தத்தை திறம்பட நிர்வகிக்கவும்: நுகர்வோர் அதிகமாகச் சுமையேற்றப்படுவதைத் தடுக்கவும் மற்றும் திறமையான தரவு செயலாக்கத்தை உறுதி செய்யவும் உள்ளமைக்கப்பட்ட பின் அழுத்த வழிமுறைகளைப் பயன்படுத்தவும்.
• துண்டு அளவை மேம்படுத்தவும்: செயல்திறன் மற்றும் நினைவகப் பயன்பாட்டிற்கு இடையே உகந்த சமநிலையைக் கண்டறிய வெவ்வேறு துண்டு அளவுகளுடன் பரிசோதனை செய்யவும். சிறிய துண்டுகள் அதிக செயலாக்க மேல்நிலைக்கு வழிவகுக்கும், அதே நேரத்தில் பெரிய துண்டுகள் நினைவகப் பயன்பாட்டை அதிகரிக்கக்கூடும்.
• தரவு மாற்றத்திற்கு TransformStreams-ஐப் பயன்படுத்தவும்: தரவு மாற்றங்களை ஒரு கூறுநிலை மற்றும் மறுபயன்பாட்டு வழியில் செய்ய TransformStreams-ஐப் பயன்படுத்தவும்.
• பாலிஃபில்களைக் கருத்தில் கொள்ளுங்கள்: வலை ஓடைகள் நவீன உலாவிகளில் பரவலாக ஆதரிக்கப்பட்டாலும், இணக்கத்தன்மையை உறுதிப்படுத்த பழைய உலாவிகளுக்கு பாலிஃபில்களைப் பயன்படுத்துவதைக் கருத்தில் கொள்ளுங்கள்.

உலாவி இணக்கத்தன்மை

வலை ஓடைகள் குரோம், ஃபயர்பாக்ஸ், சஃபாரி மற்றும் எட்ஜ் உள்ளிட்ட அனைத்து நவீன உலாவிகளாலும் ஆதரிக்கப்படுகின்றன. இருப்பினும், பழைய உலாவிகளுக்கு இணக்கத்தன்மையை வழங்க பாலிஃபில்கள் தேவைப்படலாம். "Can I use" போன்ற வளங்களைப் பயன்படுத்தி உலாவி இணக்கத்தன்மையை நீங்கள் சரிபார்க்கலாம்.

முடிவுரை

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

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

மேலும் அறிய

• MDN வலை ஆவணங்கள்: ஓடைகள் ஏபிஐ
• Web.dev: ஓடைகள்
• ஜேக் ஆர்ச்சிபால்ட்: நிஜ உலகில் ஓடைகள்