உலாவி சேமிப்பக செயல்திறன்: ஜாவாஸ்கிரிப்ட் IndexedDB மேம்படுத்தல் நுட்பங்கள்

நவீன வலை மேம்பாட்டு உலகில், பயனர் அனுபவத்தை மேம்படுத்துவதிலும் ஆஃப்லைன் செயல்பாடுகளை செயல்படுத்துவதிலும் கிளையன்ட்-பக்க சேமிப்பகம் ஒரு முக்கிய பங்கு வகிக்கிறது. IndexedDB, ஒரு சக்திவாய்ந்த உலாவி அடிப்படையிலான NoSQL தரவுத்தளம், பயனரின் உலாவிக்குள் குறிப்பிடத்தக்க அளவு கட்டமைக்கப்பட்ட தரவைச் சேமிப்பதற்கான ஒரு வலுவான தீர்வை வழங்குகிறது. இருப்பினும், சரியான மேம்படுத்தல் இல்லாமல், IndexedDB செயல்திறன் தடையாக மாறும். இந்த விரிவான வழிகாட்டி, உங்கள் ஜாவாஸ்கிரிப்ட் பயன்பாடுகளில் IndexedDB-ஐ திறம்பட பயன்படுத்துவதற்கான அத்தியாவசிய மேம்படுத்தல் நுட்பங்களை ஆராய்கிறது, உலகெங்கிலும் உள்ள பயனர்களுக்கு பதிலளிக்கும் தன்மை மற்றும் மென்மையான பயனர் அனுபவத்தை உறுதி செய்கிறது.

IndexedDB அடிப்படைகளைப் புரிந்துகொள்ளுதல்

மேம்படுத்தல் உத்திகளுக்குள் நுழைவதற்கு முன், IndexedDB-இன் முக்கிய கருத்துக்களை சுருக்கமாக மதிப்பாய்வு செய்வோம்:

• தரவுத்தளம்: தரவைச் சேமிப்பதற்கான ஒரு கொள்கலன்.
• Object Store: தொடர்புடைய தரவுத்தளங்களில் உள்ள அட்டவணைகளைப் போலவே, object stores ஜாவாஸ்கிரிப்ட் பொருட்களை வைத்திருக்கின்றன.
• குறியீடு (Index): குறிப்பிட்ட பண்புகளின் அடிப்படையில் ஒரு object store-க்குள் தரவை திறமையாக தேட மற்றும் மீட்டெடுக்க உதவும் ஒரு தரவு அமைப்பு.
• பரிவர்த்தனை (Transaction): தரவு ஒருமைப்பாட்டை உறுதி செய்யும் ஒரு வேலை அலகு. ஒரு பரிவர்த்தனைக்குள் உள்ள அனைத்து செயல்பாடுகளும் ஒன்றாக வெற்றி பெறுகின்றன அல்லது தோல்வியடைகின்றன.
• சுட்டி (Cursor): ஒரு object store அல்லது குறியீட்டில் உள்ள பதிவுகளை கடந்து செல்லப் பயன்படும் ஒரு இட்டரேட்டர்.

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

IndexedDB-க்கான முக்கிய மேம்படுத்தல் நுட்பங்கள்

1. பரிவர்த்தனை நோக்கம் மற்றும் கால அளவைக் குறைத்தல்

பரிவர்த்தனைகள் IndexedDB-இன் தரவு நிலைத்தன்மைக்கு அடிப்படையானவை, ஆனால் அவை செயல்திறன் சுமையின் ஆதாரமாகவும் இருக்கலாம். பரிவர்த்தனைகளை முடிந்தவரை குறுகியதாகவும் கவனம் செலுத்துவதாகவும் வைத்திருப்பது மிகவும் முக்கியம். பெரிய, நீண்டகால பரிவர்த்தனைகள் தரவுத்தளத்தைப் பூட்டலாம், மற்ற செயல்பாடுகள் ஒரே நேரத்தில் செயல்படுவதைத் தடுக்கலாம்.

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

• செயல்பாடுகளை தொகுத்தல்: தனிப்பட்ட செயல்பாடுகளைச் செய்வதற்குப் பதிலாக, பல தொடர்புடைய செயல்பாடுகளை ஒரே பரிவர்த்தனையில் குழுவாக்கவும்.
• தேவையற்ற படித்தல்/எழுதுதல்களைத் தவிர்க்கவும்: ஒரு பரிவர்த்தனைக்குள் உங்களுக்கு முற்றிலும் தேவையான தரவை மட்டுமே படிக்கவும் அல்லது எழுதவும்.
• பரிவர்த்தனைகளை உடனடியாக மூடவும்: பரிவர்த்தனைகள் முடிந்தவுடன் அவை மூடப்படுவதை உறுதிசெய்யவும். அவற்றை தேவையற்ற முறையில் திறந்து வைக்க வேண்டாம்.

எடுத்துக்காட்டு: திறமையான தொகுதி செருகல்

            
function addMultipleItems(db, items) {
  return new Promise((resolve, reject) => {
    const transaction = db.transaction(['items'], 'readwrite');
    const objectStore = transaction.objectStore('items');

    items.forEach(item => {
      objectStore.add(item);
    });

    transaction.oncomplete = () => {
      resolve();
    };

    transaction.onerror = () => {
      reject(transaction.error);
    };
  });
}

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டு, ஒரு பரிவர்த்தனைக்குள் பல பொருட்களை ஒரு object store-ல் திறமையாக செருகுவது எப்படி என்பதைக் காட்டுகிறது, பரிவர்த்தனைகளை மீண்டும் மீண்டும் திறப்பது மற்றும் மூடுவதுடன் தொடர்புடைய சுமையைக் குறைக்கிறது.

2. குறியீட்டு பயன்பாட்டை மேம்படுத்துதல்

IndexedDB-ல் திறமையான தரவு மீட்டெடுப்பிற்கு குறியீடுகள் அவசியம். சரியான குறியீட்டு முறை இல்லாமல், வினவல்களுக்கு முழு object store-ஐயும் ஸ்கேன் செய்ய வேண்டியிருக்கும், இது குறிப்பிடத்தக்க செயல்திறன் சிதைவுக்கு வழிவகுக்கும்.

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

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

எடுத்துக்காட்டு: ஒரு குறியீட்டை உருவாக்குதல் மற்றும் பயன்படுத்துதல்

            
// Creating an index during database upgrade
db.createObjectStore('users', { keyPath: 'id' }).createIndex('email', 'email', { unique: true });

// Using the index to find a user by email
const transaction = db.transaction(['users'], 'readonly');
const objectStore = transaction.objectStore('users');
const index = objectStore.index('email');

index.get('user@example.com').onsuccess = (event) => {
  const user = event.target.result;
  // Process the user data
};

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டு `users` object store-இன் `email` பண்பில் ஒரு குறியீட்டை உருவாக்குவது மற்றும் அந்த குறியீட்டைப் பயன்படுத்தி ஒரு பயனரை அவர்களின் மின்னஞ்சல் முகவரி மூலம் திறமையாக மீட்டெடுப்பது எப்படி என்பதைக் காட்டுகிறது. `unique: true` விருப்பம் அனைத்து பயனர்களிடையேயும் மின்னஞ்சல் பண்பு தனித்துவமானது என்பதை உறுதி செய்கிறது, தரவு நகலெடுப்பதைத் தடுக்கிறது.

3. திறவுச்சொல் சுருக்கத்தைப் பயன்படுத்துதல் (விரும்பினால்)

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

எச்சரிக்கைகள்:

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

எடுத்துக்காட்டு: ஒரு ஹாஷிங் செயல்பாட்டைப் பயன்படுத்தி எளிய திறவுச்சொல் சுருக்கம்

            
function compressKey(key) {
  // A very basic hashing example (not suitable for production)
  let hash = 0;
  for (let i = 0; i < key.length; i++) {
    hash = (hash << 5) - hash + key.charCodeAt(i);
  }
  return hash.toString(36); // Convert to base-36 string
}

// Usage
const originalKey = 'This is a very long key';
const compressedKey = compressKey(originalKey);

// Store the compressed key in IndexedDB

            

              
                Copy
              
            
          

முக்கிய குறிப்பு: மேலே உள்ள எடுத்துக்காட்டு ஆர்ப்பாட்ட நோக்கங்களுக்காக மட்டுமே. உற்பத்திச் சூழல்களுக்கு, மோதல்களைக் குறைக்கும் மற்றும் சிறந்த சுருக்க விகிதங்களை வழங்கும் ஒரு வலுவான ஹாஷிங் வழிமுறையைப் பயன்படுத்துவதைக் கருத்தில் கொள்ளுங்கள். சுருக்கத் திறனை மோதல்களுக்கான சாத்தியம் மற்றும் சேர்க்கப்பட்ட கணக்கீட்டு மேல்நிலைச் செலவுடன் எப்போதும் சமநிலைப்படுத்துங்கள்.

4. தரவு வரிசைப்படுத்தலை மேம்படுத்துதல்

IndexedDB இயல்பாகவே ஜாவாஸ்கிரிப்ட் பொருட்களை சேமிப்பதை ஆதரிக்கிறது, ஆனால் தரவை வரிசைப்படுத்துதல் மற்றும் வரிசை நீக்குதல் செயல்முறை செயல்திறனை பாதிக்கலாம். இயல்புநிலை வரிசைப்படுத்தல் முறை சிக்கலான பொருட்களுக்கு திறனற்றதாக இருக்கலாம்.

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

• திறமையான வரிசைப்படுத்தல் வடிவங்களைப் பயன்படுத்தவும்: எண் தரவு அல்லது பெரிய பைனரி ப்ளாப்களை சேமிக்க `ArrayBuffer` அல்லது `DataView` போன்ற பைனரி வடிவங்களைப் பயன்படுத்துவதைக் கருத்தில் கொள்ளுங்கள். இந்த வடிவங்கள் பொதுவாக தரவை சரங்களாக சேமிப்பதை விட திறமையானவை.
• தரவு மிகைமையைக் குறைக்கவும்: உங்கள் பொருட்களில் தேவையற்ற தரவை சேமிப்பதைத் தவிர்க்கவும். சேமிக்கப்பட்ட தரவின் ஒட்டுமொத்த அளவைக் குறைக்க உங்கள் தரவு கட்டமைப்பை இயல்பாக்குங்கள்.
• கட்டமைக்கப்பட்ட குளோனிங்கை கவனமாகப் பயன்படுத்தவும்: IndexedDB தரவை வரிசைப்படுத்தவும் மற்றும் வரிசை நீக்கவும் கட்டமைக்கப்பட்ட குளோன் வழிமுறையைப் பயன்படுத்துகிறது. இந்த வழிமுறை சிக்கலான பொருட்களைக் கையாள முடியும் என்றாலும், இது மிகப் பெரிய அல்லது ஆழமாக உள்ளமைக்கப்பட்ட பொருட்களுக்கு மெதுவாக இருக்கலாம். முடிந்தால் உங்கள் தரவு கட்டமைப்புகளை எளிதாக்குவதைக் கருத்தில் கொள்ளுங்கள்.

எடுத்துக்காட்டு: ஒரு ArrayBuffer-ஐ சேமித்தல் மற்றும் மீட்டெடுத்தல்

            
// Storing an ArrayBuffer
const data = new Uint8Array([1, 2, 3, 4, 5]);
const transaction = db.transaction(['binaryData'], 'readwrite');
const objectStore = transaction.objectStore('binaryData');
objectStore.add(data.buffer, 'myBinaryData');

// Retrieving an ArrayBuffer
transaction.oncomplete = () => {
  const getTransaction = db.transaction(['binaryData'], 'readonly');
  const getObjectStore = getTransaction.objectStore('binaryData');

  const request = getObjectStore.get('myBinaryData');
  request.onsuccess = (event) => {
    const arrayBuffer = event.target.result;
    const uint8Array = new Uint8Array(arrayBuffer);
    // Process the uint8Array
  };
};

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டு IndexedDB-ல் ஒரு `ArrayBuffer`-ஐ சேமிப்பது மற்றும் மீட்டெடுப்பது எப்படி என்பதைக் காட்டுகிறது. `ArrayBuffer` பைனரி தரவை சரமாக சேமிப்பதை விட திறமையான வடிவமாகும்.

5. ஒத்திசைவற்ற செயல்பாடுகளை மேம்படுத்துதல்

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

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

• வாக்குறுதிகள் அல்லது async/await பயன்படுத்தவும்: ஒத்திசைவற்ற செயல்பாடுகளை சுத்தமான மற்றும் படிக்கக்கூடிய வழியில் கையாள வாக்குறுதிகள் அல்லது async/await தொடரியலைப் பயன்படுத்தவும்.
• ஒத்திசைவான செயல்பாடுகளைத் தவிர்க்கவும்: IndexedDB நிகழ்வு கையாளுபவர்களுக்குள் ஒத்திசைவான செயல்பாடுகளை ஒருபோதும் செய்ய வேண்டாம். இது பிரதான த்ரெட்டைத் தடுத்து மோசமான பயனர் அனுபவத்திற்கு வழிவகுக்கும்.
• UI புதுப்பிப்புகளுக்கு `requestAnimationFrame` பயன்படுத்தவும்: IndexedDB-லிருந்து பெறப்பட்ட தரவின் அடிப்படையில் பயனர் இடைமுகத்தைப் புதுப்பிக்கும்போது, அடுத்த உலாவி மறுவரைபடத்திற்கு புதுப்பிப்புகளைத் திட்டமிட `requestAnimationFrame`-ஐப் பயன்படுத்தவும். இது தடுமாற்றமான அனிமேஷன்களைத் தவிர்க்கவும் ஒட்டுமொத்த செயல்திறனை மேம்படுத்தவும் உதவுகிறது.

எடுத்துக்காட்டு: IndexedDB உடன் வாக்குறுதிகளைப் பயன்படுத்துதல்

            
function getData(db, key) {
  return new Promise((resolve, reject) => {
    const transaction = db.transaction(['myData'], 'readonly');
    const objectStore = transaction.objectStore('myData');
    const request = objectStore.get(key);

    request.onsuccess = () => {
      resolve(request.result);
    };

    request.onerror = () => {
      reject(request.error);
    };
  });
}

// Usage
getData(db, 'someKey')
  .then(data => {
    // Process the data
  })
  .catch(error => {
    // Handle the error
  });

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டு IndexedDB செயல்பாடுகளைச் சுற்ற வாக்குறுதிகளை எவ்வாறு பயன்படுத்துவது என்பதைக் காட்டுகிறது, இது ஒத்திசைவற்ற முடிவுகளையும் பிழைகளையும் கையாளுவதை எளிதாக்குகிறது.

6. பெரிய தரவுத்தொகுப்புகளுக்கான பக்கமாக்கல் மற்றும் தரவு ஸ்ட்ரீமிங்

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

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

• பக்கமாக்கலைச் செயல்படுத்தவும்: தரவை பக்கங்களாகப் பிரித்து, தற்போதைய பக்கத்தின் தரவை மட்டும் ஏற்றவும்.
• ஸ்ட்ரீமிங்கிற்கு சுட்டிகளைப் பயன்படுத்தவும்: சிறிய துண்டுகளாக தரவை மீண்டும் செய்ய IndexedDB சுட்டிகளைப் பயன்படுத்தவும். இது முழு தரவுத்தொகுப்பையும் நினைவகத்தில் ஏற்றாமல், தரவுத்தளத்திலிருந்து மீட்டெடுக்கப்படும்போது தரவைச் செயலாக்க உங்களை அனுமதிக்கிறது.
• படிப்படியான UI புதுப்பிப்புகளுக்கு `requestAnimationFrame`-ஐப் பயன்படுத்தவும்: பயனர் இடைமுகத்தில் பெரிய தரவுத்தொகுப்புகளைக் காண்பிக்கும்போது, UI-ஐ படிப்படியாகப் புதுப்பிக்க `requestAnimationFrame`-ஐப் பயன்படுத்தவும், பிரதான த்ரெட்டைத் தடுக்கக்கூடிய நீண்டகால பணிகளைத் தவிர்க்கவும்.

எடுத்துக்காட்டு: தரவு ஸ்ட்ரீமிங்கிற்கு சுட்டிகளைப் பயன்படுத்துதல்

            
function processDataInChunks(db, chunkSize, callback) {
  const transaction = db.transaction(['largeData'], 'readonly');
  const objectStore = transaction.objectStore('largeData');
  const request = objectStore.openCursor();

  let count = 0;
  let dataChunk = [];

  request.onsuccess = (event) => {
    const cursor = event.target.result;

    if (cursor) {
      dataChunk.push(cursor.value);
      count++;

      if (count >= chunkSize) {
        callback(dataChunk);
        dataChunk = [];
        count = 0;

        // Wait for the next animation frame before continuing
        requestAnimationFrame(() => {
          cursor.continue();
        });
      } else {
        cursor.continue();
      }
    } else {
      // Process any remaining data
      if (dataChunk.length > 0) {
        callback(dataChunk);
      }
    }
  };

  request.onerror = () => {
    // Handle the error
  };
}

// Usage
processDataInChunks(db, 100, (data) => {
  // Process the chunk of data
  console.log('Processing chunk:', data);
});

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டு IndexedDB சுட்டிகளைப் பயன்படுத்தி தரவை துண்டுகளாக செயலாக்குவது எப்படி என்பதைக் காட்டுகிறது. `chunkSize` அளவுரு ஒவ்வொரு துண்டிலும் செயலாக்கப்பட வேண்டிய பதிவுகளின் எண்ணிக்கையை தீர்மானிக்கிறது. `callback` செயல்பாடு ஒவ்வொரு தரவுத் துண்டுடனும் அழைக்கப்படுகிறது.

7. தரவுத்தள பதிப்பிறக்கம் மற்றும் திட்டப் புதுப்பிப்புகள்

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

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

• தரவுத்தள பதிப்பை அதிகரிக்கவும்: நீங்கள் தரவுத்தள திட்டத்தில் மாற்றங்களைச் செய்யும்போதெல்லாம், தரவுத்தள பதிப்பு எண்ணை அதிகரிக்கவும்.
• `upgradeneeded` நிகழ்வில் திட்டப் புதுப்பிப்புகளைச் செய்யவும்: பயனரின் உலாவியில் உள்ள தரவுத்தள பதிப்பு உங்கள் குறியீட்டில் குறிப்பிடப்பட்ட பதிப்பை விட பழையதாக இருக்கும்போது `upgradeneeded` நிகழ்வு தூண்டப்படுகிறது. புதிய object stores உருவாக்குதல், குறியீடுகளைச் சேர்ப்பது அல்லது தரவை மாற்றுவது போன்ற திட்டப் புதுப்பிப்புகளைச் செய்ய இந்த நிகழ்வைப் பயன்படுத்தவும்.
• தரவு இடம்பெயர்வை கவனமாகக் கையாளவும்: பழைய திட்டத்திலிருந்து புதிய திட்டத்திற்கு தரவை மாற்றும்போது, தரவு சரியாக மாற்றப்பட்டதா மற்றும் எந்தத் தரவும் இழக்கப்படவில்லை என்பதை உறுதிப்படுத்தவும். இடம்பெயர்வு sırasında தரவு நிலைத்தன்மையை உறுதிப்படுத்த பரிவர்த்தனைகளைப் பயன்படுத்துவதைக் கருத்தில் கொள்ளுங்கள்.
• தெளிவான பிழைச் செய்திகளை வழங்கவும்: ஒரு திட்டப் புதுப்பிப்பு தோல்வியுற்றால், பயனருக்கு தெளிவான மற்றும் தகவலறிந்த பிழைச் செய்திகளை வழங்கவும்.

எடுத்துக்காட்டு: தரவுத்தள மேம்படுத்தல்களைக் கையாளுதல்

            
const dbName = 'myDatabase';
const dbVersion = 2;

const request = indexedDB.open(dbName, dbVersion);

request.onupgradeneeded = (event) => {
  const db = event.target.result;
  const oldVersion = event.oldVersion;
  const newVersion = event.newVersion;

  if (oldVersion < 1) {
    // Create the 'users' object store
    const objectStore = db.createObjectStore('users', { keyPath: 'id' });
    objectStore.createIndex('email', 'email', { unique: true });
  }

  if (oldVersion < 2) {
    // Add a new 'created_at' index to the 'users' object store
    const objectStore = event.currentTarget.transaction.objectStore('users');
    objectStore.createIndex('created_at', 'created_at');
  }
};

request.onsuccess = (event) => {
  const db = event.target.result;
  // Use the database
};

request.onerror = (event) => {
  // Handle the error
};

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டு `upgradeneeded` நிகழ்வில் தரவுத்தள மேம்படுத்தல்களை எவ்வாறு கையாளுவது என்பதைக் காட்டுகிறது. குறியீடு `oldVersion` மற்றும் `newVersion` பண்புகளைச் சரிபார்த்து, எந்தத் திட்டப் புதுப்பிப்புகள் செய்யப்பட வேண்டும் என்பதைத் தீர்மானிக்கிறது. எடுத்துக்காட்டு ஒரு புதிய object store-ஐ உருவாக்குவது மற்றும் ஒரு புதிய குறியீட்டைச் சேர்ப்பது எப்படி என்பதைக் காட்டுகிறது.

8. செயல்திறனை சுயவிவரப்படுத்தி கண்காணிக்கவும்

சாத்தியமான தடைகள் மற்றும் மேம்பாட்டிற்கான பகுதிகளை அடையாளம் காண உங்கள் IndexedDB செயல்பாடுகளின் செயல்திறனை தவறாமல் சுயவிவரப்படுத்தி கண்காணிக்கவும். தரவைச் சேகரிக்கவும், உங்கள் பயன்பாட்டின் செயல்திறன் குறித்த நுண்ணறிவுகளைப் பெறவும் உலாவி டெவலப்பர் கருவிகள் மற்றும் செயல்திறன் கண்காணிப்பு கருவிகளைப் பயன்படுத்தவும்.

கருவிகள் மற்றும் நுட்பங்கள்:

• உலாவி டெவலப்பர் கருவிகள்: IndexedDB தரவுத்தளங்களை ஆய்வு செய்யவும், பரிவர்த்தனை நேரங்களைக் கண்காணிக்கவும், மற்றும் வினவல் செயல்திறனை பகுப்பாய்வு செய்யவும் உலாவியின் டெவலப்பர் கருவிகளைப் பயன்படுத்தவும்.
• செயல்திறன் கண்காணிப்பு கருவிகள்: தரவுத்தள செயல்பாட்டு நேரங்கள், நினைவகப் பயன்பாடு மற்றும் CPU பயன்பாடு போன்ற முக்கிய அளவீடுகளைக் கண்காணிக்க செயல்திறன் கண்காணிப்பு கருவிகளைப் பயன்படுத்தவும்.
• பதிவு செய்தல் மற்றும் கருவியாக்கம்: குறிப்பிட்ட IndexedDB செயல்பாடுகளின் செயல்திறனைக் கண்காணிக்க உங்கள் குறியீட்டில் பதிவு மற்றும் கருவியாக்கத்தைச் சேர்க்கவும்.

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

மேம்பட்ட IndexedDB மேம்படுத்தல் உத்திகள்

1. பின்னணி செயலாக்கத்திற்கான Web Workers

பிரதான த்ரெட்டைத் தடுப்பதைத் தவிர்க்க, குறிப்பாக நீண்டகால பணிகளுக்கு, IndexedDB செயல்பாடுகளை Web Workers-க்கு மாற்றவும். Web Workers தனித்தனி த்ரெட்களில் இயங்குகின்றன, பயனர் இடைமுகத்தை பாதிக்காமல் பின்னணியில் தரவுத்தள செயல்பாடுகளைச் செய்ய உங்களை அனுமதிக்கிறது.

எடுத்துக்காட்டு: IndexedDB செயல்பாடுகளுக்கு ஒரு Web Worker-ஐப் பயன்படுத்துதல்

main.js

            
const worker = new Worker('worker.js');

worker.postMessage({ action: 'getData', key: 'someKey' });

worker.onmessage = (event) => {
  const data = event.data;
  // Process the data received from the worker
};

            

              
                Copy
              
            
          

worker.js

            
importScripts('idb.js'); // Import a helper library like idb.js

self.onmessage = async (event) => {
  const { action, key } = event.data;

  if (action === 'getData') {
    const db = await idb.openDB('myDatabase', 1); // Replace with your database details
    const data = await db.get('myData', key);
    self.postMessage(data);
    db.close();
  }
};

            

              
                Copy
              
            
          

குறிப்பு: Web Workers DOM-க்கு வரையறுக்கப்பட்ட அணுகலைக் கொண்டுள்ளன. எனவே, அனைத்து UI புதுப்பிப்புகளும் worker-இடமிருந்து தரவைப் பெற்ற பிறகு பிரதான த்ரெட்டில் செய்யப்பட வேண்டும்.

2. ஒரு உதவி நூலகத்தைப் பயன்படுத்துதல்

IndexedDB API உடன் நேரடியாக வேலை செய்வது விரிவானதாகவும் பிழை ஏற்படக்கூடியதாகவும் இருக்கலாம். உங்கள் குறியீட்டை எளிதாக்கவும் மற்றும் கொதிகலனைக் குறைக்கவும் `idb.js` போன்ற ஒரு உதவி நூலகத்தைப் பயன்படுத்துவதைக் கருத்தில் கொள்ளுங்கள்.

ஒரு உதவி நூலகத்தைப் பயன்படுத்துவதன் நன்மைகள்:

• எளிமைப்படுத்தப்பட்ட API: உதவி நூலகங்கள் IndexedDB உடன் வேலை செய்ய ஒரு சுருக்கமான மற்றும் உள்ளுணர்வு API-ஐ வழங்குகின்றன.
• வாக்குறுதி அடிப்படையிலானது: பல உதவி நூலகங்கள் ஒத்திசைவற்ற செயல்பாடுகளைக் கையாள வாக்குறுதிகளைப் பயன்படுத்துகின்றன, இது உங்கள் குறியீட்டை சுத்தமாகவும் படிக்க எளிதாகவும் ஆக்குகிறது.
• குறைக்கப்பட்ட கொதிகலன்: உதவி நூலகங்கள் பொதுவான IndexedDB செயல்பாடுகளைச் செய்யத் தேவையான கொதிகலன் குறியீட்டின் அளவைக் குறைக்கின்றன.

3. மேம்பட்ட குறியீட்டு நுட்பங்கள்

எளிய குறியீடுகளுக்கு அப்பால், போன்ற மேம்பட்ட குறியீட்டு உத்திகளை ஆராயுங்கள்:

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

முடிவுரை

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

மேலும் ஆதாரங்கள்

• Mozilla Developer Network (MDN) - IndexedDB API
• Google Chrome Samples - IndexedDB
• idb.js - A small IndexedDB wrapper