មាន វិធីជាច្រើនដើម្បីកែលម្អដំណើរការគេហទំព័រ. មួយក្នុងចំណោមពួកគេកំពុងផ្ទុកមាតិកាជាមុនដែលនឹងត្រូវការនៅពេលក្រោយ។ CSS ដំណើរការមុន ការបង្ហាញទំព័រពេញ ឬដំណោះស្រាយឈ្មោះដែន។ យើងធ្វើអ្វីគ្រប់យ៉ាងជាមុន ហើយបន្ទាប់មកបង្ហាញលទ្ធផលភ្លាមៗ! ស្តាប់ទៅឡូយ។

អ្វីដែលកាន់តែត្រជាក់នោះគឺថាវាត្រូវបានអនុវត្តយ៉ាងសាមញ្ញ។ ស្លាកប្រាំ ផ្តល់ឱ្យកម្មវិធីរុករកតាមអ៊ីនធឺណិតដើម្បីអនុវត្តសកម្មភាពបឋម៖

<link rel="prefetch" href="/km/style.css" as="style" />
<link rel="preload" href="/km/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="/km/style.css" as="style" />

href ចង្អុលទៅធនធានដែលអ្នកចង់ទាញយក។

as អាចជាអ្វីដែលអាចទាញយកបាននៅក្នុងកម្មវិធីរុករក៖

style សម្រាប់សន្លឹករចនាប័ទ្ម,
script សម្រាប់ស្គ្រីប
font សម្រាប់ពុម្ពអក្សរ,
fetch សម្រាប់ធនធានដែលបានប្រើ fetch() ឬ XMLHttpRequest,
មើលបញ្ជីពេញលេញ នៅលើ MDN.

វាមានសារៈសំខាន់ណាស់ក្នុងការបញ្ជាក់គុណលក្ខណៈ as - វាជួយកម្មវិធីរុករកតាមអ៊ីនធឺណិតកំណត់អាទិភាព និងកំណត់ពេលទាញយកបានត្រឹមត្រូវ។

ពេលណាត្រូវប្រើ

ប្រើការផ្ទុកជាមុននៅពេលដែលត្រូវការធនធាននាពេលអនាគតដ៏ខ្លី។ ឧទាហរណ៍:

ពុម្ពអក្សរមិនស្តង់ដារពីឯកសារខាងក្រៅ៖
```

<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>
```
ជាមួយនឹងវិធីសាស្រ្តនេះ រចនាប័ទ្មមិនសំខាន់នឹងចាប់ផ្តើមផ្ទុកនៅពេលដែល JavaScript ដំណើរការ ដែលអាចកើតឡើងពីរបីវិនាទីបន្ទាប់ពីការបង្ហាញ។ ជំនួសឱ្យការរង់ចាំ JS ប្រើ <link rel= "preload">ដើម្បីចាប់ផ្តើមទាញយកមុននេះ៖
```
<style>
/* Inlined critical styles */
</style>

<link rel="preload" href="/km/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="/km/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 ឬស្នើសុំការឆ្លើយតប JSON ពីម៉ាស៊ីនមេ API ។

ការបង្កើតការតភ្ជាប់ថ្មីជាធម្មតាចំណាយពេលពីរបីរយមីលីវិនាទី។ វាត្រូវបានធ្វើម្តង ប៉ុន្តែនៅតែត្រូវការពេលវេលា។ ប្រសិនបើអ្នកបានបង្កើតការតភ្ជាប់ជាមុន អ្នកនឹងសន្សំសំចៃពេលវេលា និងទាញយកធនធានពីដែននេះលឿនជាងមុន។

វាក្យសម្ព័ន្ធ

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

href ចង្អុលបង្ហាញឈ្មោះដែនដែលអ្នកចង់កំណត់អាសយដ្ឋាន IP ។ អាចត្រូវបានបញ្ជាក់ដោយបុព្វបទ (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. ស្វែងរកអាសយដ្ឋាន IP របស់ម៉ាស៊ីនមេ (216.58.215.78) សម្រាប់ឈ្មោះដែនដែលបានបញ្ជាក់ (google.com).
ការចាប់ដៃ TCP. ផ្លាស់ប្តូរកញ្ចប់ព័ត៌មាន (អតិថិជន → ម៉ាស៊ីនមេ → ម៉ាស៊ីនភ្ញៀវ) ដើម្បីចាប់ផ្តើមការតភ្ជាប់ TCP ជាមួយម៉ាស៊ីនមេ។
ការចាប់ដៃ TLS (គេហទំព័រ HTTPS តែប៉ុណ្ណោះ). ការផ្លាស់ប្តូរកញ្ចប់ព័ត៌មានពីរជុំ (អតិថិជន → ម៉ាស៊ីនមេ → ម៉ាស៊ីនភ្ញៀវ → ម៉ាស៊ីនមេ → ម៉ាស៊ីនភ្ញៀវ) ដើម្បីចាប់ផ្តើមវគ្គ TLS សុវត្ថិភាព។

ចំណាំ៖ HTTP/3 នឹងធ្វើឲ្យប្រសើរឡើង និងបង្កើនល្បឿនយន្តការចាប់ដៃ ប៉ុន្តែវានៅតែជាផ្លូវដ៏វែងឆ្ងាយ។

dns-prefetch

<link rel= "dns-prefetch"> ស្នើឱ្យកម្មវិធីរុករកតាមអ៊ីនធឺណិតអនុវត្តដំណោះស្រាយ DNS សម្រាប់ដែនជាមុន ប្រសិនបើអ្នកនឹងភ្ជាប់ទៅវាឆាប់ៗនេះ ហើយចង់បង្កើនល្បឿនការតភ្ជាប់ដំបូង។

កម្មវិធីរុករកត្រូវតែកំណត់អាសយដ្ឋាន IP របស់ដែន ប្រសិនបើវានឹងទាញយកធនធានណាមួយពីដែនភាគីទីបីថ្មី។ ឧទាហរណ៍ ការផ្ទុកពុម្ពអក្សរ Google ប្រតិកម្មពុម្ពអក្សរពី CDN ឬស្នើសុំការឆ្លើយតប JSON ពីម៉ាស៊ីនមេ API ។

សម្រាប់ដែនថ្មីនីមួយៗ ដំណោះស្រាយកំណត់ត្រា DNS ជាធម្មតាចំណាយពេលប្រហែល 20-120 ms ។ វាប៉ះពាល់តែការផ្ទុកធនធានដំបូងពីដែនដែលបានផ្តល់ឱ្យប៉ុណ្ណោះ ប៉ុន្តែនៅតែណែនាំការពន្យារពេល។ ប្រសិនបើយើងអនុវត្តដំណោះស្រាយ DNS ជាមុន យើងនឹងសន្សំសំចៃពេលវេលា និងផ្ទុកធនធានកាន់តែលឿន។

វាក្យសម្ព័ន្ធ

<link rel= "dns-prefetch" href="https://api.my-app.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 ជាអ្វី. ម៉ាស៊ីនមេនីមួយៗនៅលើអ៊ីនធឺណិតមានអាសយដ្ឋាន IP តែមួយគត់ដែលមើលទៅដូច 216.58.215.78. ឈ្មោះនៃគេហទំព័រជាធម្មតាត្រូវបានបញ្ចូលទៅក្នុងរបារអាសយដ្ឋាននៃកម្មវិធីរុករក (ឧទាហរណ៍ google.com) និងម៉ាស៊ីនមេ DNS (Domain Name System) ត្រូវគ្នាជាមួយអាសយដ្ឋាន IP របស់ម៉ាស៊ីនមេ (216.58.215.78).

ដើម្បីកំណត់អាសយដ្ឋាន IP កម្មវិធីរុករកត្រូវតែសួរម៉ាស៊ីនមេ DNS ។ វាត្រូវការពេល 20-120 ms នៅពេលភ្ជាប់ទៅដែនភាគីទីបីថ្មី។

DNS ត្រូវបានទុកក្នុងឃ្លាំងសម្ងាត់ ទោះបីជាមិនអាចជឿទុកចិត្តបានក៏ដោយ. ប្រព័ន្ធប្រតិបត្តិការ និងកម្មវិធីរុករកមួយចំនួនរក្សាទុកសំណួរ DNS៖ វានឹងជួយសន្សំសំចៃពេលវេលាលើសំណួរដដែលៗ ប៉ុន្តែឃ្លាំងសម្ងាត់មិនអាចពឹងផ្អែកលើបានទេ។ នៅលើ Linux វាជាធម្មតាមិនដំណើរការទាល់តែសោះ។ Chrome មានឃ្លាំងសម្ងាត់ DNS ប៉ុន្តែវាមានរយៈពេលត្រឹមតែមួយនាទីប៉ុណ្ណោះ។ ប្រព័ន្ធប្រតិបត្តិការ Windows រក្សាទុកការឆ្លើយតប 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 មិនធ្វើការបង្ហាញពេញលេញទេ។និង មានតែ NoState ជាមុនប៉ុណ្ណោះ។. នេះមានន័យថា Chrome ផ្ទុកទំព័រ និងធនធានរបស់វាទាំងអស់ ប៉ុន្តែមិនបង្ហាញ ឬប្រតិបត្តិ JavaScript ទេ។

Firefox និង Safari មិនគាំទ្រស្លាកនេះទាល់តែសោះ។ នេះមិនបំពានលើការបញ្ជាក់ទេ ព្រោះកម្មវិធីរុករកមិនតម្រូវឱ្យធ្វើតាមការណែនាំនេះទេ។ ប៉ុន្តែនៅតែសោកសៅ។ កំហុសក្នុងការអនុវត្ត Firefox បានបើកអស់រយៈពេលប្រាំពីរឆ្នាំមកហើយ។ មានរបាយការណ៍ថា Safari ក៏មិនគាំទ្រស្លាកនេះដែរ។.

សង្ខេប

ប្រើ៖

<link rel= "preload"> - នៅពេលដែលអ្នកត្រូវការធនធានក្នុងរយៈពេលពីរបីវិនាទី
<link rel= "prefetch"> - នៅពេលដែលអ្នកត្រូវការធនធាននៅទំព័របន្ទាប់
<link rel= "preconnect"> - នៅពេលដែលអ្នកដឹងថាអ្នកនឹងត្រូវការធនធានក្នុងពេលឆាប់ៗនេះ ប៉ុន្តែអ្នកមិនទាន់ដឹង URL ពេញលេញរបស់វា។
<link rel= "dns-prefetch"> - ស្រដៀងគ្នានេះដែរ នៅពេលដែលអ្នកដឹងថាអ្នកនឹងត្រូវការធនធានក្នុងពេលឆាប់ៗនេះ ប៉ុន្តែអ្នកមិនទាន់ដឹង URL ពេញលេញរបស់វា (សម្រាប់កម្មវិធីរុករកចាស់)
<link rel= "prerender"> — នៅពេលដែលអ្នកប្រាកដថាអ្នកប្រើប្រាស់នឹងទៅកាន់ទំព័រជាក់លាក់មួយ ហើយអ្នកចង់បង្កើនល្បឿនការបង្ហាញរបស់វា។

ប្រភព: www.habr.com

ផ្ទុកជាមុន ទាញយកជាមុន និងស្លាកផ្សេងទៀត។

ផ្ទុកជាមុន

វាក្យសម្ព័ន្ធ

ពេលណាត្រូវប្រើ

មើលព័ត៌មានលម្អិត

យកជាមុន

វាក្យសម្ព័ន្ធ

ពេលណាត្រូវប្រើ

មើលព័ត៌មានលម្អិត

ភ្ជាប់ជាមុន

វាក្យសម្ព័ន្ធ

ពេលណាត្រូវប្រើ

មើលព័ត៌មានលម្អិត

dns-prefetch

វាក្យសម្ព័ន្ធ

ពេលណាត្រូវប្រើ

មើលព័ត៌មានលម្អិត

ការបង្ហាញជាមុន

វាក្យសម្ព័ន្ធ

ពេលណាត្រូវប្រើ

មើលព័ត៌មានលម្អិត

សង្ខេប

បន្ថែមមតិយោបល់ ответОтменить