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

இன்னும் குளிர்ச்சியான விஷயம் என்னவென்றால், இது மிகவும் எளிமையாக செயல்படுத்தப்படுகிறது. ஐந்து குறிச்சொற்கள் பூர்வாங்க செயல்களைச் செய்ய உலாவிக்கு கட்டளை கொடுக்கவும்:

<link rel="prefetch" href="/ta/style.css" as="style" />
<link rel="preload" href="/ta/style.css" as="style" />

<link rel="preconnect" href="https://example.com" />
<link rel="dns-prefetch" href="https://example.com" />

<link rel="prerender" href="https://example.com/about.html" />

அவர்கள் என்ன செய்கிறார்கள், எப்போது பயன்படுத்த வேண்டும் என்பதை சுருக்கமாக விளக்குவோம்.

தாவி செல்லவும்: முன்னதாகவே ஏற்று · முன்னெடுப்பு · முன் இணைப்பு · dns-prefetch · முன்செலுத்துதல்

முன்னதாகவே ஏற்று

<link rel= "preload"> ஒரு ஆதாரத்தை (ஸ்கிரிப்ட் அல்லது ஸ்டைல்ஷீட் போன்றவை) விரைவில் ஏற்றி தேக்ககப்படுத்துமாறு உலாவியிடம் கூறுகிறது. பக்கம் ஏற்றப்பட்ட சில வினாடிகளுக்குப் பிறகு ஆதாரம் தேவைப்படும்போது இது பயனுள்ளதாக இருக்கும் - மேலும் நீங்கள் செயல்முறையை விரைவுபடுத்த வேண்டும்.

ஏற்றப்பட்ட பிறகு ஆதாரத்துடன் உலாவி எதுவும் செய்யாது. ஸ்கிரிப்ட்கள் செயல்படுத்தப்படவில்லை, நடை தாள்கள் பயன்படுத்தப்படவில்லை. ஆதாரம் வெறுமனே தற்காலிக சேமிப்பு மற்றும் கோரிக்கையின் பேரில் உடனடியாக கிடைக்கும்.

தொடரியல்

<link rel="preload" href="/ta/style.css" as="style" />

href நீங்கள் பதிவிறக்க விரும்பும் ஆதாரத்தை சுட்டிக்காட்டுகிறது.

as உலாவியில் பதிவிறக்கம் செய்யக்கூடிய எதுவும் இருக்கலாம்:

• style நடை தாள்களுக்கு,
• script ஸ்கிரிப்டுகளுக்கு,
• font எழுத்துருக்களுக்கு,
• fetch பயன்படுத்தி ஏற்றப்பட்ட வளங்களுக்கு fetch() அல்லது XMLHttpRequest,
• முழு பட்டியலை பார்க்கவும் MDN இல்.

பண்புக்கூறைக் குறிப்பிடுவது முக்கியம் as - இது உலாவியை சரியாக முன்னுரிமைப்படுத்தவும் பதிவிறக்கங்களை திட்டமிடவும் உதவுகிறது.

எப்போது பயன்படுத்த வேண்டும்

மிக விரைவில் எதிர்காலத்தில் ஆதாரம் தேவைப்படும் போது முன் ஏற்றி பயன்படுத்தவும். உதாரணத்திற்கு:

• வெளிப்புற கோப்பிலிருந்து தரமற்ற எழுத்துருக்கள்:

  <!-- index.html -->
  <link rel="stylesheet" href="index.css" />
  /* index.css */
  @font-face {
    src: url('comic-sans.woff2') format('woff2');
  }

  இயல்பாக comic-sans.woff2 பதிவிறக்கம் செய்து பாகுபடுத்திய பின்னரே ஏற்றத் தொடங்கும் index.css. நீண்ட நேரம் காத்திருப்பதைத் தவிர்க்க, எழுத்துருவை முன்பே பதிவிறக்கம் செய்து கொள்ளலாம் <link rel= "preload">:

  <link rel="preload" href="comic-sans.woff2" as="font" />

• அணுகுமுறைக்கு ஏற்ப உங்கள் பாணிகளைப் பிரித்தால் முக்கியமான CSS இரண்டு பகுதிகளாக, முக்கியமான (உடனடியாக வழங்குவதற்கு) மற்றும் விமர்சனமற்றது:

  <style>
  /* Inlined critical styles */
  </style>
  
  <script>
  /* Custom JS that starts downloading non-critical styles */
  loadCSS('/app/non-critical.css');
  </script>

  இந்த அணுகுமுறையுடன், ஜாவாஸ்கிரிப்ட் இயங்கும் போது மட்டுமே விமர்சனமற்ற பாணிகள் ஏற்றத் தொடங்கும், இது ரெண்டரிங் செய்த சில நொடிகளில் நிகழலாம். காத்திருப்பதற்கு பதிலாக JS பயன்படுத்தவும் <link rel= "preload">முன்பே பதிவிறக்கம் செய்ய:

  <style>
  /* Inlined critical styles */
  </style>
  
  <link rel="preload" href="/ta/app/non-critical.css" as="style" />
  
  <script>
  /* Custom JS that starts downloading non-critical styles */
  loadCSS('/app/non-critical.css');
  </script>

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

ப்ரீஃபெட்ச்சிங்குடன் குழப்பமடையக்கூடாது. பயன்படுத்த வேண்டாம் <link rel= "preload">, பக்கம் ஏற்றப்பட்டவுடன் உங்களுக்கு ஆதாரம் தேவையில்லை என்றால். உங்களுக்கு பின்னர் தேவைப்பட்டால், எடுத்துக்காட்டாக அடுத்த பக்கத்திற்கு, பிறகு பயன்படுத்தவும் <link rel= "prefetch">.

விவரங்களைக் காட்டு

இது தேவையான குறிச்சொல் மற்ற எல்லா குறிச்சொற்களைப் போலல்லாமல், உலாவியால் செயல்படுத்தப்படும் (அது ஆதரிக்கும் பட்சத்தில்). முன் ஏற்றுதல் தொடர்பானது. குறிப்பிட்ட ஆதாரத்தை உலாவி பதிவிறக்கம் செய்ய வேண்டும் <link rel="preload">. மற்ற சந்தர்ப்பங்களில், இது ப்ரீலோடிங்கைப் புறக்கணிக்கலாம், எடுத்துக்காட்டாக, இது மெதுவான இணைப்பில் இயங்கினால்.

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

முன்னெடுப்பு

<link rel= "prefetch"> பின்னணியில் உள்ள ஆதாரத்தை (ஸ்கிரிப்ட் அல்லது ஸ்டைல் ​​ஷீட் போன்றவை) பதிவிறக்கம் செய்து தேக்ககப்படுத்துமாறு உலாவியைக் கேட்கிறது. ஏற்றுதல் குறைந்த முன்னுரிமையில் நிகழ்கிறது, எனவே இது மிக முக்கியமான ஆதாரங்களில் தலையிடாது. அடுத்த பக்கத்தில் ஆதாரம் தேவைப்பட்டால், அதை முன்கூட்டியே தேக்ககப்படுத்த விரும்பினால் இது பயனுள்ளதாக இருக்கும்.

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

தொடரியல்

<link rel="prefetch" href="/ta/style.css" as="style" />

href நீங்கள் பதிவிறக்க விரும்பும் ஆதாரத்தை சுட்டிக்காட்டுகிறது.

as உலாவியில் பதிவிறக்கம் செய்யக்கூடிய எதுவும் இருக்கலாம்:

• style நடை தாள்களுக்கு,
• script ஸ்கிரிப்டுகளுக்கு,
• font எழுத்துருக்களுக்கு,
• fetch பயன்படுத்தி ஏற்றப்பட்ட வளங்களுக்கு fetch() அல்லது XMLHttpRequest,
• முழு பட்டியலை பார்க்கவும் MDN இல்.

பண்புக்கூறைக் குறிப்பிடுவது முக்கியம் as - இது உலாவியை சரியாக முன்னுரிமைப்படுத்தவும் பதிவிறக்கங்களை திட்டமிடவும் உதவுகிறது.

எப்போது பயன்படுத்த வேண்டும்

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

• உங்களிடம் ஆன்லைன் ஸ்டோர் உள்ளது, மேலும் 40% பயனர்கள் தயாரிப்புப் பக்கத்திற்கான முகப்புப் பக்கத்தை விட்டு வெளியேறுகிறார்கள். பயன்படுத்தவும் <link rel= "prefetch">, தயாரிப்பு பக்கங்களை வழங்க CSS மற்றும் JS கோப்புகளை ஏற்றுகிறது.
• உங்களிடம் ஒரு பக்க பயன்பாடு உள்ளது, மேலும் வெவ்வேறு பக்கங்கள் வெவ்வேறு தொகுப்புகளை ஏற்றும். ஒரு பயனர் ஒரு பக்கத்தைப் பார்வையிடும்போது, ​​அது இணைக்கும் அனைத்துப் பக்கங்களுக்கான தொகுப்புகளும் முன்பே ஏற்றப்படும்.

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

அவசர கோரிக்கைகளுக்காக அல்ல. பயன்படுத்த வேண்டாம் <link rel= "prefetch">, சில நொடிகளில் ஆதாரம் தேவைப்படும் போது. இந்த வழக்கில், பயன்படுத்தவும் <link rel= "preload">.

விவரங்களைக் காட்டு

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

Chrome இல் முன்னுரிமை. Chrome இல் <link rel= "prefetch"> வழக்கமாக குறைந்தபட்ச முன்னுரிமையுடன் செயல்படுத்தப்படுகிறது (பார்க்க முழு முன்னுரிமை அட்டவணை), அதாவது, மற்ற அனைத்தையும் ஏற்றிய பிறகு.

முன் இணைப்பு

<link rel= "preconnect"> நீங்கள் எதிர்காலத்தில் இணைப்பு அமைப்பை விரைவுபடுத்த விரும்பும் போது, ​​டொமைனுடன் முன்கூட்டியே இணைக்குமாறு உலாவியைக் கேட்கிறது.

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

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

தொடரியல்

<link rel= "preconnect" href="https://api.my-app.com" />

href நீங்கள் ஐபி முகவரியைத் தீர்மானிக்க விரும்பும் டொமைன் பெயரைக் குறிக்கிறது. முன்னொட்டுடன் குறிப்பிடலாம் (https://domain.com) அல்லது அது இல்லாமல் (//domain.com).

எப்போது பயன்படுத்த வேண்டும்

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

• உங்கள் விண்ணப்பம் ஹோஸ்ட் செய்யப்பட்டுள்ளது my-app.com மற்றும் AJAX கோரிக்கைகளை செய்கிறது api.my-app.com: குறிப்பிட்ட வினவல்கள் உங்களுக்கு முன்கூட்டியே தெரியாது, ஏனெனில் அவை JS இலிருந்து மாறும். டொமைனுடன் முன்கூட்டியே இணைக்க ஒரு குறிச்சொல்லைப் பயன்படுத்துவது இங்கே மிகவும் பொருத்தமானது.
• உங்கள் விண்ணப்பம் ஹோஸ்ட் செய்யப்பட்டுள்ளது my-app.com மற்றும் Google எழுத்துருக்களைப் பயன்படுத்துகிறது. அவை இரண்டு படிகளில் பதிவிறக்கம் செய்யப்படுகின்றன: முதலில், CSS கோப்பு டொமைனில் இருந்து பதிவிறக்கம் செய்யப்படுகிறது fonts.googleapis.com, பின்னர் இந்தக் கோப்பு எழுத்துருக்களைக் கோருகிறது fonts.gstatic.com. குறிப்பிட்ட எழுத்துருக் கோப்புகள் எவை என்பதை நீங்கள் அறிய முடியாது fonts.gstatic.com நீங்கள் CSS கோப்பை ஏற்றும் வரை உங்களுக்கு இது தேவைப்படும், எனவே நாங்கள் முன்கூட்டியே ஒரு பூர்வாங்க இணைப்பை மட்டுமே உருவாக்க முடியும்.

மூன்றாம் தரப்பு ஸ்கிரிப்ட் அல்லது ஸ்டைலை சிறிது வேகப்படுத்த இந்தக் குறிச்சொல்லைப் பயன்படுத்தவும் முன்பே நிறுவப்பட்ட இணைப்பு காரணமாக.

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

விவரங்களைக் காட்டு

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

இணைப்பு செயல்முறை என்ன உள்ளடக்கியது?. ஒவ்வொரு தளத்தையும் இணைக்க, உலாவி பின்வருவனவற்றைச் செய்ய வேண்டும்:

• DNS தீர்மானம். சர்வர் ஐபி முகவரியைக் கண்டுபிடி (216.58.215.78) குறிப்பிட்ட டொமைன் பெயருக்கு (google.com).
• TCP கைகுலுக்கல். சேவையகத்துடன் TCP இணைப்பைத் தொடங்க, பாக்கெட்டுகளை (கிளையன்ட் → சர்வர் → கிளையன்ட்) பரிமாறவும்.
• TLS ஹேண்ட்ஷேக் (HTTPS தளங்கள் மட்டும்). பாதுகாப்பான TLS அமர்வைத் தொடங்க இரண்டு சுற்றுகள் பாக்கெட் பரிமாற்றம் (கிளையன்ட் → சர்வர் → கிளையன்ட் → சர்வர் → கிளையன்ட்).

குறிப்பு: HTTP/3 ஹேண்ட்ஷேக் பொறிமுறையை மேம்படுத்தி வேகப்படுத்தும், ஆனால் அது இன்னும் வெகு தொலைவில் உள்ளது.

dns-prefetch

<link rel= "dns-prefetch"> நீங்கள் விரைவில் டொமைனுடன் இணைக்கப் போகிறீர்கள் மற்றும் ஆரம்ப இணைப்பை விரைவுபடுத்த விரும்பினால், அதற்கான DNS தெளிவுத்திறனை முன்கூட்டியே செய்யுமாறு உலாவியைக் கேட்கிறது.

புதிய மூன்றாம் தரப்பு டொமைனிலிருந்து ஏதேனும் ஆதாரங்களை மீட்டெடுக்க வேண்டுமானால், டொமைனின் IP முகவரியை உலாவி தீர்மானிக்க வேண்டும். எடுத்துக்காட்டாக, Google எழுத்துருக்களை ஏற்றுதல், CDN இலிருந்து எழுத்துருக்கள் எதிர்வினையாற்றுதல் அல்லது API சேவையகத்திலிருந்து JSON பதிலைக் கோருதல்.

ஒவ்வொரு புதிய டொமைனுக்கும், DNS பதிவு தெளிவுத்திறன் பொதுவாக 20-120 ms எடுக்கும். இது கொடுக்கப்பட்ட டொமைனில் இருந்து முதல் ஆதாரத்தை ஏற்றுவதை மட்டுமே பாதிக்கிறது, ஆனால் இன்னும் தாமதத்தை அறிமுகப்படுத்துகிறது. நாங்கள் முன்கூட்டியே DNS தெளிவுத்திறனைச் செய்தால், நேரத்தைச் சேமித்து, வளத்தை வேகமாக ஏற்றுவோம்.

தொடரியல்

<link rel= "dns-prefetch" href="https://api.my-app.com" />

href நீங்கள் ஐபி முகவரியை அமைக்க விரும்பும் டொமைன் பெயரைக் குறிக்கிறது. முன்னொட்டுடன் குறிப்பிடலாம் (https://domain.com) அல்லது அது இல்லாமல் (//domain.com).

எப்போது பயன்படுத்த வேண்டும்

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

• உங்கள் விண்ணப்பம் ஹோஸ்ட் செய்யப்பட்டுள்ளது my-app.com மற்றும் AJAX கோரிக்கைகளை செய்கிறது api.my-app.com: குறிப்பிட்ட வினவல்கள் உங்களுக்கு முன்கூட்டியே தெரியாது, ஏனெனில் அவை JS இலிருந்து மாறும். டொமைனுடன் முன்கூட்டியே இணைக்க ஒரு குறிச்சொல்லைப் பயன்படுத்துவது இங்கே மிகவும் பொருத்தமானது.
• உங்கள் விண்ணப்பம் ஹோஸ்ட் செய்யப்பட்டுள்ளது my-app.com, மற்றும் Google எழுத்துருக்களைப் பயன்படுத்துகிறது. அவை இரண்டு படிகளில் பதிவிறக்கம் செய்யப்படுகின்றன: முதலில், CSS கோப்பு டொமைனில் இருந்து பதிவிறக்கம் செய்யப்படுகிறது fonts.googleapis.com, பின்னர் இந்தக் கோப்பு எழுத்துருக்களைக் கோருகிறது fonts.gstatic.com. குறிப்பிட்ட எழுத்துருக் கோப்புகள் எவை என்பதை நீங்கள் அறிய முடியாது fonts.gstatic.com நீங்கள் CSS கோப்பை ஏற்றும் வரை உங்களுக்கு இது தேவைப்படும், எனவே நாங்கள் முன்கூட்டியே ஒரு பூர்வாங்க இணைப்பை மட்டுமே உருவாக்க முடியும்.

மூன்றாம் தரப்பு ஸ்கிரிப்ட் அல்லது ஸ்டைலை சிறிது வேகப்படுத்த இந்தக் குறிச்சொல்லைப் பயன்படுத்தவும் முன்பே நிறுவப்பட்ட இணைப்பு காரணமாக.

தயவு செய்து ஒத்த பண்புகளை கவனியுங்கள் <link rel= "dns-prefetch"/> и <link rel= "preconnect">. பொதுவாக ஒரு டொமைனுக்கு அவற்றை ஒன்றாகப் பயன்படுத்துவதில் அர்த்தமில்லை: <link rel= "preconnect"> ஏற்கனவே அடங்கும் <link rel= "dns-prefetch"/> இன்னும் பற்பல. இதை இரண்டு சந்தர்ப்பங்களில் நியாயப்படுத்தலாம்:

• பழைய உலாவிகளை ஆதரிக்க விரும்புகிறீர்களா?. <link rel= "dns-prefetch" /> உதவியவா் IE10 மற்றும் Safari 5 இலிருந்து. <link rel= "preconnect"> Chrome மற்றும் Firefox இல் சிறிது காலம் ஆதரிக்கப்பட்டது, ஆனால் Safari இல் 11.1 இல் மட்டுமே சேர்க்கப்பட்டது மற்றும் IE/Edgeல் இன்னும் ஆதரிக்கப்படவில்லை. இந்த உலாவிகளை நீங்கள் ஆதரிக்க வேண்டும் என்றால், பயன்படுத்தவும் <link rel= "dns-prefetch" /> ஒரு காப்பு விருப்பமாக <link rel= "preconnect">.
• 4-6 க்கும் மேற்பட்ட டொமைன்களுக்கான இணைப்புகளை வேகப்படுத்த விரும்புகிறீர்கள். குறிச்சொல் <link rel= "preconnect"> 4-6 டொமைன்களுக்கு மேல் பயன்படுத்த பரிந்துரைக்கப்படவில்லை, ஏனெனில் இணைப்பை நிறுவுவதும் பராமரிப்பதும் விலை உயர்ந்த செயல். <link rel= "dns-prefetch" /> குறைந்த வளங்களைப் பயன்படுத்துகிறது, எனவே தேவைப்பட்டால் அதைப் பயன்படுத்தவும்.

விவரங்களைக் காட்டு

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

DNS என்றால் என்ன. இணையத்தில் உள்ள ஒவ்வொரு சர்வருக்கும் ஒரு தனிப்பட்ட ஐபி முகவரி உள்ளது, அது போல் தெரிகிறது 216.58.215.78. தளத்தின் பெயர் பொதுவாக உலாவியின் முகவரிப் பட்டியில் உள்ளிடப்படும் (எடுத்துக்காட்டாக, google.com), மற்றும் DNS (டொமைன் நேம் சிஸ்டம்) சர்வர்கள் சர்வரின் ஐபி முகவரியுடன் (216.58.215.78).

IP முகவரியைத் தீர்மானிக்க, உலாவி DNS சேவையகத்தை வினவ வேண்டும். புதிய மூன்றாம் தரப்பு டொமைனுடன் இணைக்கும் போது 20−120 ms ஆகும்.

டிஎன்எஸ் தற்காலிகமாக சேமிக்கப்படுகிறது, இருப்பினும் மிகவும் நம்பகத்தன்மை இல்லை. சில OSகள் மற்றும் உலாவிகள் DNS வினவல்களைத் தற்காலிகமாகச் சேமிக்கின்றன: இது மீண்டும் மீண்டும் வினவல்களில் நேரத்தைச் சேமிக்கும், ஆனால் தேக்ககத்தை நம்ப முடியாது. லினக்ஸில் இது பொதுவாக வேலை செய்யாது. Chrome இல் DNS கேச் உள்ளது, ஆனால் அது ஒரு நிமிடம் மட்டுமே நீடிக்கும். விண்டோஸ் டிஎன்எஸ் பதில்களை ஐந்து நாட்களுக்கு தேக்ககப்படுத்துகிறது.

முன்செலுத்துதல்

<link rel= "prerender"> URL ஐ பதிவிறக்கம் செய்து, கண்ணுக்கு தெரியாத தாவலில் காண்பிக்க உலாவியைக் கேட்கிறது. பயனர் இணைப்பைக் கிளிக் செய்யும் போது, ​​பக்கம் உடனடியாகக் காட்டப்பட வேண்டும். பயனர் ஒரு குறிப்பிட்ட பக்கத்தைப் பார்வையிடுவார் மற்றும் அதன் காட்சியை விரைவுபடுத்த விரும்பினால், இது பயனுள்ளதாக இருக்கும்.

2019 இல் இந்த குறிச்சொல்லின் விதிவிலக்கான செயல்திறன் இருந்தபோதிலும் (அல்லது அதன் காரணமாக). <link rel= "prerender"> முக்கிய உலாவிகளில் மோசமாக ஆதரிக்கப்படுகிறது. மேலும் விவரங்களைப் பார்க்கவும். கீழே.

தொடரியல்

<link rel="prerender" href="https://my-app.com/pricing" />

href நீங்கள் பின்னணியில் ரெண்டரிங் செய்யத் தொடங்க விரும்பும் URLஐக் குறிக்கிறது.

எப்போது பயன்படுத்த வேண்டும்

பயனர் ஒரு குறிப்பிட்ட பக்கத்திற்குச் செல்வார் என்று நீங்கள் உறுதியாக நம்பும்போது. உங்களிடம் "சுரங்கப்பாதை" இருந்தால், அதன் மூலம் 70% பார்வையாளர்கள் பக்கம் A பக்கம் B க்குச் செல்கின்றனர் <link rel= "prerender"> பக்கம் A இல் பக்கம் B ஐ மிக விரைவாகக் காட்ட உதவும்.

அதிகமாக பயன்படுத்த வேண்டாம். அலைவரிசை மற்றும் நினைவகத்தின் அடிப்படையில் முன்-ரெண்டரிங் மிகவும் விலை உயர்ந்தது. பயன்படுத்த வேண்டாம் <link rel= "prerender"> ஒன்றுக்கும் மேற்பட்ட பக்கங்களுக்கு.

விவரங்களைக் காட்டு

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

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

Firefox மற்றும் Safari இந்த குறிச்சொல்லை ஆதரிக்கவே இல்லை. உலாவிகள் இந்த அறிவுறுத்தலைப் பின்பற்ற வேண்டிய அவசியமில்லை என்பதால், இது விவரக்குறிப்பை மீறாது; ஆனாலும் வருத்தமாக இருக்கிறது. செயல்படுத்தல் பிழை பயர்பாக்ஸ் ஏழு ஆண்டுகளாகத் திறக்கப்பட்டுள்ளது. சஃபாரி என்று தகவல்கள் உள்ளன இந்த குறிச்சொல்லை ஆதரிக்கவில்லை.

சுருக்கம்

பயன்படுத்தவும்:

• <link rel= "preload"> - சில நொடிகளில் உங்களுக்கு ஆதாரம் தேவைப்படும்போது
• <link rel= "prefetch"> - அடுத்த பக்கத்தில் உங்களுக்கு ஆதாரம் தேவைப்படும்போது
• <link rel= "preconnect"> - உங்களுக்கு விரைவில் ஒரு ஆதாரம் தேவைப்படும் என்பதை நீங்கள் அறிந்தால், ஆனால் அதன் முழு URL உங்களுக்கு இன்னும் தெரியவில்லை
• <link rel= "dns-prefetch"> - இதேபோல், உங்களுக்கு விரைவில் ஒரு ஆதாரம் தேவைப்படும் என்பதை நீங்கள் அறிந்தால், அதன் முழு URL உங்களுக்கு இன்னும் தெரியவில்லை (பழைய உலாவிகளுக்கு)
• <link rel= "prerender"> — பயனர்கள் ஒரு குறிப்பிட்ட பக்கத்திற்குச் செல்வார்கள் என்று நீங்கள் உறுதியாக நம்பினால், அதன் காட்சியை விரைவுபடுத்த வேண்டும்

ஆதாரம்: www.habr.com