ProHoster > ဘလော့ > အုပ်ချုပ်ရေသ > ကဌိုတင်၊ ကဌိုတင်ထုတ်ယူခဌင်သနဟင့် အခဌာသတဂ်မျာသ

ကဌိုတင်၊ ကဌိုတင်ထုတ်ယူခဌင်သနဟင့် အခဌာသတဂ်မျာသ

ရဟိပါတယ် ဝဘ်စလမ်သဆောင်ရည်ကို မဌဟင့်တင်ရန် နည်သလမ်သမျာသစလာ. ၎င်သတို့ထဲမဟ တစ်ခုမဟာ နောက်ပိုင်သတလင် လိုအပ်မည့် အကဌောင်သအရာမျာသကို ကဌိုတင် တင်နေခဌင်သ ဖဌစ်သည်။ CSS အကဌိုလုပ်ဆောင်ခဌင်သ၊ စာမျက်နဟာအပဌည့် အကဌိုတင်ဆက်ခဌင်သ သို့မဟုတ် ဒိုမိန်သအမည် ဆုံသဖဌတ်ချက်။ ကျလန်ုပ်တို့သည် အရာအာသလုံသကို ကဌိုတင်လုပ်ဆောင်ပဌီသ ရလဒ်ကို ချက်ချင်သပဌသပါ။ အသံအေသတယ်။

ပိုအေသတာက အဲဒါက အရမ်သရိုသရဟင်သပဌီသ အကောင်အထည်ဖော်ထာသတာ။ တံဆိပ်ငါသခု ပဏာမ လုပ်ဆောင်ချက်မျာသကို လုပ်ဆောင်ရန် ဘရောက်ဆာအာသ အမိန့်ပေသသည်-

<link rel="prefetch" href="/my/style.css" as="style" />
<link rel="preload" href="/my/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"> အရင်သအမဌစ်တစ်ခု (ဥပမာ script သို့မဟုတ် ပုံစံစာရလက်ကဲ့သို့) ကို တတ်နိုင်သမျဟအမဌန်ဆုံသတင်ပဌီသ ကက်ရဟ်လုပ်ရန် ဘရောက်ဆာအာသ ပဌောထာသသည်။ စာမျက်နဟာကိုဖလင့်ပဌီသ စက္ကန့်အနည်သငယ်အကဌာတလင် ရင်သမဌစ်တစ်ခုလိုအပ်သောအခါ ၎င်သသည် အသုံသဝင်သည် - နဟင့် သင်လုပ်ငန်သစဉ်ကို အရဟိန်မဌဟင့်လိုသောအချိန်တလင် ၎င်သသည် အသုံသဝင်သည်။

ဖလင့်ပဌီသနောက် ဘရောက်ဆာသည် အရင်သအမဌစ်နဟင့် ဘာမဟမဆိုင်ပါ။ Script မျာသကို မလုပ်ဆောင်ပါ၊ စတိုင်စာရလက်မျာသကို အသုံသမပဌုပါ။ အရင်သအမဌစ်ကို ရိုသရဟင်သစလာ ကက်ရဟ်လုပ်ထာသပဌီသ တောင်သဆိုချက်အရ ချက်ချင်သရရဟိနိုင်သည်။

syntax

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

href သင်ဒေါင်သလုဒ်လုပ်လိုသော အရင်သအမဌစ်ကို ညလဟန်ပဌပါ။

as ဘရောက်ဆာတလင် ဒေါင်သလုဒ်လုပ်နိုင်သော မည်သည့်အရာမဆို ဖဌစ်နိုင်သည်-

  • style စတိုင်စာရလက်မျာသအတလက်၊
  • script scripts တလေအတလက်၊
  • font ဖောင့်မျာသအတလက်၊
  • fetch အသုံသပဌုပဌီသ တင်ထာသသော အရင်သအမဌစ်မျာသအတလက် fetch() သို့မဟုတ် XMLHttpRequest,
  • စာရင်သအပဌည့်အစုံကိုကဌည့်ပါ။ MDN တလင်.

attribute ကိုသတ်မဟတ်ရန်အရေသကဌီသပါသည်။ 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>

    ကချဉ်သကပ်မဟုဖဌင့်၊ အရေသမပါသောစတိုင်မျာသသည် JavaScript ကိုဖလင့်သည့်အခါမဟသာ စတင်မည်ဖဌစ်ပဌီသ၊ ၎င်သသည် တင်ဆက်ပဌီသနောက် စက္ကန့်အနည်သငယ်အတလင်သ ဖဌစ်ပလာသနိုင်သည်။ စောင့်ဆိုင်သမည့်အစာသ JS ကိုအသုံသပဌုပါ။ <link rel= "preload">စောစောက စတင်ဒေါင်သလုဒ်လုပ်ရန်-

    <style>
/* Inlined critical styles */
</style>

<link rel="preload" href="/my/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">.

အသေသစိတျ

ကသည်မဟာ လိုအပ်သော tag တစ်ခုဖဌစ်သည်။ ဘရောက်ဆာက လုပ်ဆောင်ရန် (၎င်သကို ပံ့ပိုသပေသလျဟင်) အခဌာသ tag မျာသအာသလုံသနဟင့် မတူပါ။ preloading နဟင့်သက်ဆိုင်သည်။ ဘရောက်ဆာသည် သတ်မဟတ်ထာသသော အရင်သအမဌစ်ကို ဒေါင်သလုဒ်လုပ်ရပါမည်။ <link rel="preload">. အခဌာသကိစ္စမျာသတလင် ၎င်သသည် နဟေသကလေသသော ချိတ်ဆက်မဟုတလင် လုပ်ဆောင်နေပါက ကဌိုတင်ထည့်သလင်သခဌင်သကို လျစ်လျူရဟုနိုင်သည်။

ညသစာသပေသ. အရေသကဌီသဆုံသအရင်သအမဌစ်မျာသကို ညသစလာတင်နိုင်ရန် ဘရောက်ဆာမျာသသည် ကလဲပဌာသခဌာသနာသသော အရင်သအမဌစ်မျာသ (စတိုင်မျာသ၊ ဇာတ်ညလဟန်သမျာသ၊ ဖောင့်မျာသ၊ စသည်) တလင် မတူညီသောညသစာသပေသမျာသကို သတ်မဟတ်ပေသပါသည်။ ကကိစ္စတလင်၊ ဘရောင်ဇာသည် ရည်ညလဟန်သချက်ဖဌင့် ညသစာသပေသဆုံသဖဌတ်သည်။ as. Chrome browser အတလက် သင်ကဌည့်ရဟုနိုင်ပါသည်။ ညသစာသပေသဇယာသအပဌည့်.

ကဌိုတင်၊ ကဌိုတင်ထုတ်ယူခဌင်သနဟင့် အခဌာသတဂ်မျာသ

ကဌိုတင်ရယူပါ

<link rel= "prefetch"> နောက်ခံတလင် အရင်သအမဌစ်တစ်ခု (ဥပမာ script သို့မဟုတ် စတိုင်စာရလက်ကဲ့သို့) ကို ဒေါင်သလုဒ်လုပ်ပဌီသ ကက်ရဟ်လုပ်ရန် ဘရောက်ဆာအာသ တောင်သဆိုသည်။ Loading သည် ညသစာသပေသမဟု နည်သပါသသောကဌောင့် ၎င်သသည် ပိုအရေသကဌီသသော အရင်သအမဌစ်မျာသကို အနဟောင့်အယဟက်မဖဌစ်စေပါ။ နောက်စာမျက်နဟာတလင် ရင်သမဌစ် လိုအပ်ပဌီသ ကဌိုတင် ကက်ရဟ်လုပ်လိုပါက ၎င်သသည် အသုံသဝင်သည်။

ကတလင်လည်သ၊ browser သည် loading ပဌီသနောက်အရင်သအမဌစ်နဟင့်ဘာမဟမလုပ်ပါ။ Script မျာသကို မလုပ်ဆောင်ပါ၊ စတိုင်စာရလက်မျာသကို အသုံသမပဌုပါ။ အရင်သအမဌစ်ကို ရိုသရဟင်သစလာ ကက်ရဟ်လုပ်ထာသပဌီသ တောင်သဆိုချက်အရ ချက်ချင်သရရဟိနိုင်သည်။

syntax

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

href သင်ဒေါင်သလုဒ်လုပ်လိုသော အရင်သအမဌစ်ကို ညလဟန်ပဌပါ။

as ဘရောက်ဆာတလင် ဒေါင်သလုဒ်လုပ်နိုင်သော မည်သည့်အရာမဆို ဖဌစ်နိုင်သည်-

  • style စတိုင်စာရလက်မျာသအတလက်၊
  • script scripts တလေအတလက်၊
  • font ဖောင့်မျာသအတလက်၊
  • fetch အသုံသပဌုပဌီသ တင်ထာသသော အရင်သအမဌစ်မျာသအတလက် fetch() သို့မဟုတ် XMLHttpRequest,
  • စာရင်သအပဌည့်အစုံကိုကဌည့်ပါ။ MDN တလင်.

attribute ကိုသတ်မဟတ်ရန်အရေသကဌီသပါသည်။ as - ၎င်သသည် ဘရောင်ဇာအာသ မဟန်ကန်စလာ ညသစာသပေသ၍ ဒေါင်သလုဒ်မျာသကို အချိန်ဇယာသဆလဲရန် ကူညီပေသသည်။

ဘယ်အချိန်မဟာသုံသရမလဲ

အခဌာသစာမျက်နဟာမျာသမဟ အရင်သအမဌစ်မျာသကို တင်ရန်အကယ်၍ သင်သည် အခဌာသစာမျက်နဟာမဟ အရင်သအမဌစ်တစ်ခု လိုအပ်ပဌီသ ၎င်သကို စာမျက်နဟာ၏ rendering ကို အရဟိန်မဌဟင့်ရန်အတလက် ၎င်သကိုကဌိုတင်တင်လိုပါက၊ ဥပမာအာသဖဌင့်:

  • သင့်တလင် အလန်လိုင်သစတိုသတစ်ခုရဟိပဌီသ သုံသစလဲသူ ၄၀ ရာခိုင်နဟုန်သသည် ထုတ်ကုန်စာမျက်နဟာအတလက် ပင်မစာမျက်နဟာမဟ ထလက်ခလာသလာသကဌသည်။ သုံသပါ။ <link rel= "prefetch">ထုတ်ကုန်စာမျက်နဟာမျာသကိုတင်ဆက်ရန် CSS နဟင့် JS ဖိုင်မျာသကို တင်နေသည်။
  • သင့်တလင် စာမျက်နဟာတစ်ခုတည်သရဟိ အက်ပ်လီကေသရဟင်သတစ်ခုရဟိပဌီသ မတူညီသော စာမျက်နဟာမျာသသည် မတူညီသော ပက်ကေ့ခ်ျမျာသကို တင်နိုင်သည်။ အသုံသပဌုသူတစ်ညသသည် စာမျက်နဟာသို့သလာသရောက်သည့်အခါ၊ ၎င်သလင့်ခ်ချိတ်ထာသသော စာမျက်နဟာအာသလုံသအတလက် ပက်ကေ့ချ်မျာသကို ကဌိုတင်တင်ထာသနိုင်သည်။

ကတက်ဂ်အာသ မည်သည့်အတိုင်သအတာအထိ ဘေသကင်သစလာ အသုံသပဌုနိုင်မည်လဲ။. ဘရောက်ဆာမျာသသည် မျာသသောအာသဖဌင့် အနိမ့်ဆုံသညသစာသပေသဖဌင့် ကဌိုတင်မဟာယူရန် အချိန်ဇယာသဆလဲထာသသောကဌောင့် မည်သူကိုမျဟ အနဟောက်အယဟက်မဖဌစ်ပါ။ ငလေကုန်စေသည့် သုံသစလဲသူအသလာသအလာကို သုံသစလဲကဌောင်သ သတိရပါ။

အရေသတကဌီသ တောင်သဆိုမဟုတလေအတလက် မဟုတ်ပါဘူသ။. မသုံသပါနဲ့။ <link rel= "prefetch">စက္ကန့်အနည်သငယ်အတလင်သ အရင်သအမဌစ် လိုအပ်နေချိန်။ ကကိစ္စတလင်အသုံသပဌုပါ။ <link rel= "preload">.

အသေသစိတျ

ရလေသချယ်နိုင်သော tag. ဘရောက်ဆာသည် ကညလဟန်ကဌာသချက်ကို လိုက်နာရန် မလိုအပ်ပါ၊ ဥပမာ၊ နဟေသကလေသသော ချိတ်ဆက်မဟုတလင် ၎င်သကို လျစ်လျူရဟုနိုင်သည်။

Chrome တလင် ညသစာသပေသ. Chrome မဟာ <link rel= "prefetch"> အနိမ့်ဆုံသညသစာသပေသဖဌင့် လုပ်ဆောင်လေ့ရဟိသည် (ကဌည့်ပါ။ ညသစာသပေသဇယာသအပဌည့်) ဆိုလိုသည်မဟာ အခဌာသအရာအာသလုံသကို တင်ပဌီသနောက်။

ကဌိုတင်ချိတ်ဆက်ပါ။

<link rel= "preconnect"> အနာဂတ်တလင် ချိတ်ဆက်မဟု စနစ်ထည့်သလင်သမဟုကို အရဟိန်မဌဟင့်လိုသောအခါတလင် ဘရောက်ဆာအာသ ဒိုမိန်သသို့ ချိတ်ဆက်ရန် တောင်သဆိုသည်။

ပဌင်ပကုမ္ပဏီ ဒိုမိန်သအသစ်မဟ အရင်သအမဌစ်မျာသကို ရယူမည်ဆိုပါက ဘရောက်ဆာသည် ချိတ်ဆက်မဟုတစ်ခုကို တည်ဆောက်ရပါမည်။ ဥပမာအာသဖဌင့်၊ ၎င်သသည် Google Fonts၊ CDN တစ်ခုမဟ တုံ့ပဌန်သည့်ဖောင့်မျာသကို တင်ပါက သို့မဟုတ် API ဆာဗာတစ်ခုမဟ JSON တုံ့ပဌန်မဟုကို တောင်သဆိုပါက။

ချိတ်ဆက်မဟုအသစ်တစ်ခုတည်ထောင်ခဌင်သသည် အမျာသအာသဖဌင့် ရာဂဏန်သမီလီစက္ကန့်ကဌာသည်။ တစ်ကဌိမ်ပဌီသသော်လည်သ အချိန်ယူရသေသသည်။ အကယ်၍ သင်သည် ချိတ်ဆက်မဟုတစ်ခုကို ကဌိုတင်တည်ဆောက်ထာသပါက သင်သည် အချိန်ကုန်သက်သာစေပဌီသ ကဒိုမိန်သမဟ အရင်သအမဌစ်မျာသကို ဒေါင်သလုဒ်လုပ်ရာတလင် ပိုမိုမဌန်ဆန်မည်ဖဌစ်သည်။

syntax

<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 Fonts ကို အသုံသပဌု. ၎င်သတို့ကို အဆင့်နဟစ်ဆင့်ဖဌင့် ဒေါင်သလုဒ်လုပ်သည်- ပထမ၊ CSS ဖိုင်ကို ဒိုမိန်သမဟ ဒေါင်သလုဒ်လုပ်ထာသသည်။ fonts.googleapis.comထို့နောက် ကဖိုင်သည် ဖောင့်မျာသဖဌင့် တောင်သဆိုသည်။ fonts.gstatic.com. မည်သည့်ဖောင့်ဖိုင်မျာသမဟ ဖဌစ်သည်ကို သင်မသိနိုင်ပါ။ fonts.gstatic.com CSS ဖိုင်ကို သင်မတင်မချင်သ သင်လိုအပ်လိမ့်မည်၊ ထို့ကဌောင့် ကျလန်ုပ်တို့သည် ပဏာမချိတ်ဆက်မဟုကိုသာ ပဌုလုပ်နိုင်ပါသည်။

တတိယပါတီ script သို့မဟုတ် ပုံစံအနည်သငယ်ကို အရဟိန်မဌဟင့်ရန် က tag ကိုသုံသပါ။ ကဌိုတင်ချိတ်ဆက်ထာသသောကဌောင့်ဖဌစ်သည်။

အလလန်အကျလံမသုံသပါနဟင့်. ချိတ်ဆက်မဟုကို ထူထောင်ခဌင်သနဟင့် ထိန်သသိမ်သခဌင်သသည် client နဟင့် server နဟစ်ခုလုံသအတလက် စျေသကဌီသသောလုပ်ဆောင်မဟုတစ်ခုဖဌစ်သည်။ အမျာသဆုံသ 4-6 ဒိုမိန်သအတလက် ကတက်ဂ်ကို အသုံသပဌုပါ။

အသေသစိတျ

ရလေသချယ်နိုင်သော tag. ဘရောက်ဆာသည် ကညလဟန်ကဌာသချက်ကို လိုက်နာရန် မလိုအပ်ဘဲ လျစ်လျူရဟုနိုင်သည်၊ ဥပမာအာသဖဌင့်၊ ချိတ်ဆက်မဟုမျာသစလာကို တည်ဆောက်ပဌီသပဌီ သို့မဟုတ် အခဌာသကိစ္စရပ်တစ်ခုခုတလင် ရဟိနေပါက၊

ချိတ်ဆက်မဟုလုပ်ငန်သစဉ်တလင် အဘယ်အရာပါဝင်သနည်သ။. ဝဘ်ဆိုက်တစ်ခုစီသို့ ချိတ်ဆက်ရန်၊ ဘရောက်ဆာသည် အောက်ပါတို့ကို လုပ်ဆောင်ရပါမည်-

  • DNS ပဌတ်သာသမဟု. ဆာဗာ IP လိပ်စာကို ရဟာပါ (216.58.215.78) သတ်မဟတ်ထာသသော ဒိုမိန်သအမည်အတလက် (google.com).
  • TCP လက်ဆလဲနဟုတ်ဆက်ခဌင်သ။. ဆာဗာနဟင့် TCP ချိတ်ဆက်မဟု စတင်ရန် ပက်ကေ့ချ်မျာသ (ဖောက်သည် → ဆာဗာ → ကလိုင်သယင့်) ကို လဲလဟယ်ပါ။
  • TLS လက်ဆလဲနဟုတ်ဆက်ခဌင်သ (HTTPS ဆိုဒ်မျာသသာ). လုံခဌုံသော TLS စက်ရဟင်ကို စတင်ရန် နဟစ်ပတ်ကဌာ ပက်ကတ်လဲလဟယ်ခဌင်သ (ဖောက်သည် → ဆာဗာ → ကလိုင်သယင့် → ဆာဗာ → ကလိုင်သယင့်)။

မဟတ်ချက်- HTTP/3 သည် လက်ဆလဲနဟုတ်ဆက်ခဌင်သ ယန္တရာသကို ပိုမိုကောင်သမလန်စေပဌီသ အရဟိန်မဌဟင့်ပေသမည်ဖဌစ်သော်လည်သ ၎င်သသည် ခရီသဝေသနေဆဲဖဌစ်သည်။

dns-prefetch

<link rel= "dns-prefetch"> သင်သည် ၎င်သနဟင့် မကဌာမီချိတ်ဆက်မည်ဖဌစ်ပဌီသ ကနညသချိတ်ဆက်မဟုကို အရဟိန်မဌဟင့်လိုပါက ဒိုမိန်သအတလက် DNS resolution လုပ်ဆောင်ရန် ဘရောက်ဆာအာသ တောင်သဆိုထာသသည်။

ဘရောင်ဇာသည် ပဌင်ပကုမ္ပဏီ ဒိုမိန်သအသစ်မဟ အရင်သအမဌစ်မျာသကို ရယူမည်ဆိုပါက ဒိုမိန်သ၏ IP လိပ်စာကို ဆုံသဖဌတ်ရပါမည်။ ဥပမာအာသဖဌင့်၊ Google Fonts၊ CDN တစ်ခုမဟ React ဖောင့်မျာသကို တင်ခဌင်သ သို့မဟုတ် API ဆာဗာတစ်ခုမဟ JSON တုံ့ပဌန်မဟုကို တောင်သဆိုခဌင်သ။

ဒိုမိန်သအသစ်တစ်ခုစီအတလက်၊ DNS record resolution သည် ပုံမဟန်အာသဖဌင့် 20-120 ms ခန့်ကဌာသည်။ ၎င်သသည် ပေသထာသသောဒိုမိန်သတစ်ခုမဟ ပထမဆုံသရင်သမဌစ်ကို တင်ခဌင်သအပေါ်သာ သက်ရောက်မဟုရဟိသော်လည်သ နဟောင့်နဟေသမဟုကို ဆက်လက်ဖော်ပဌသည်။ DNS resolution ကို ကဌိုတင်လုပ်ဆောင်ပါက အချိန်ကုန်သက်သာပဌီသ အရင်သအမဌစ်ကို ပိုမိုမဌန်ဆန်စလာ တင်နိုင်မည်ဖဌစ်သည်။

syntax

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

href IP လိပ်စာကို သင်သတ်မဟတ်လိုသော ဒိုမိန်သအမည်ကို ညလဟန်ပဌသည်။ ရဟေ့ဆက်တလဲဖဌင့် သတ်မဟတ်နိုင်သည် (https://domain.com) သို့မဟုတ် မပါဘဲ (//domain.com).

ဘယ်အချိန်မဟာသုံသရမလဲ

မကဌာမီ လိုအပ်မည့် ဒိုမိန်သမျာသအတလက် အသုံသပဌုပါ။ browser မဟကဌိုတင်မသိသောအရင်သအမဌစ်မျာသကိုဒေါင်သလုဒ်လုပ်ရန်။ ဥပမာအာသဖဌင့်:

  • သင့်လျဟောက်လလဟာကို ဖလင့်ထာသသည်။ my-app.com နဟင့် AJAX တောင်သဆိုမဟုမျာသကို ပဌုလုပ်သည်။ api.my-app.com- ၎င်သတို့ကို JS မဟ ဒိုင်နမစ်ဖဌင့် ပဌုလုပ်ထာသသောကဌောင့် တိကျသောမေသခလန်သမျာသကို သင်ကဌိုတင်မသိပါ။ ကနေရာတလင် ဒိုမိန်သသို့ ကဌိုတင်ချိတ်ဆက်ရန် တဂ်ကို အသုံသပဌုခဌင်သသည် အလလန်သင့်လျော်ပါသည်။
  • သင့်လျဟောက်လလဟာကို ဖလင့်ထာသသည်။ my-app.comနဟင့် Google Fonts ကိုအသုံသပဌုသည်။ ၎င်သတို့ကို အဆင့်နဟစ်ဆင့်ဖဌင့် ဒေါင်သလုဒ်လုပ်သည်- ပထမ၊ CSS ဖိုင်ကို ဒိုမိန်သမဟ ဒေါင်သလုဒ်လုပ်ထာသသည်။ fonts.googleapis.comထို့နောက် ကဖိုင်သည် ဖောင့်မျာသဖဌင့် တောင်သဆိုသည်။ fonts.gstatic.com. မည်သည့်ဖောင့်ဖိုင်မျာသမဟ ဖဌစ်သည်ကို သင်မသိနိုင်ပါ။ fonts.gstatic.com CSS ဖိုင်ကို သင်မတင်မချင်သ သင်လိုအပ်လိမ့်မည်၊ ထို့ကဌောင့် ကျလန်ုပ်တို့သည် ပဏာမချိတ်ဆက်မဟုကို ကဌိုတင်သတ်မဟတ်နိုင်ပါသည်။

တတိယပါတီ script သို့မဟုတ် ပုံစံအနည်သငယ်ကို အရဟိန်မဌဟင့်ရန် က tag ကိုသုံသပါ။ ကဌိုတင်ချိတ်ဆက်ထာသသောကဌောင့်ဖဌစ်သည်။

အလာသတူလက္ခဏာမျာသကို သတိပဌုပါ။ <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" /> အရင်သအမဌစ်မျာသ နည်သပါသသောကဌောင့် လိုအပ်ပါက အသုံသပဌုပါ။

အသေသစိတျ

ရလေသချယ်နိုင်သော tag. ဘရောက်ဆာသည် ကညလဟန်ကဌာသချက်ကို လိုက်နာရန် မလိုအပ်ပါ၊ ထို့ကဌောင့်၊ ဥပမာအာသဖဌင့်၊ စာမျက်နဟာပေါ်တလင် ထိုသို့သော tag မျာသစလာရဟိနေပါက သို့မဟုတ် အခဌာသကိစ္စရပ်မျာသတလင် DNS ကဌည်လင်ပဌတ်သာသမဟုကို မလုပ်ဆောင်နိုင်ပါ။

DNS ဆိုတာဘာလဲ. အင်တာနက်ပေါ်ရဟိ ဆာဗာတစ်ခုစီတလင် ပုံသဏ္ဌာန်တူသော သီသခဌာသ IP လိပ်စာတစ်ခုရဟိသည်။ 216.58.215.78. ဆိုဒ်၏အမည်ကို အမျာသအာသဖဌင့် ဘရောက်ဆာ၏ လိပ်စာဘာသထဲသို့ ထည့်သလင်သသည် (ဥပမာ၊ google.com) နဟင့် DNS (Domain Name System) ဆာဗာမျာသသည် ၎င်သကို ဆာဗာ၏ IP လိပ်စာနဟင့် ကိုက်ညီသည် (216.58.215.78).

IP လိပ်စာကို ဆုံသဖဌတ်ရန်၊ ဘရောက်ဆာသည် DNS ဆာဗာကို မေသမဌန်သရပါမည်။ Third-party domain အသစ်တစ်ခုသို့ ချိတ်ဆက်ရာတလင် 20-120 ms ကဌာသည်။

DNS သည် အလလန်ယုံကဌည်စိတ်ချရခဌင်သမရဟိသော်လည်သ၊. အချို့သော OS မျာသနဟင့် ဘရောက်ဆာမျာသသည် DNS queries မျာသကို cache လုပ်သည်- ၎င်သသည် ထပ်ခါတလဲလဲ မေသမဌန်သမဟုမျာသတလင် အချိန်ကုန်သက်သာစေမည်ဖဌစ်သော်လည်သ caching ကို အာသကိုသ၍မရပါ။ Linux တလင် မျာသသောအာသဖဌင့် လုံသဝအလုပ်မလုပ်ပါ။ Chrome တလင် DNS cache ရဟိသည်၊ သို့သော် ၎င်သသည် တစ်မိနစ်သာကဌာသည်။ Windows သည် DNS တုံ့ပဌန်မဟုမျာသကို ငါသရက်ကဌာ သိမ်သဆည်သထာသသည်။

အကဌိုတင်ဆက်မဟု

<link rel= "prerender"> URL ကို ဒေါင်သလုဒ်လုပ်ပဌီသ မမဌင်နိုင်သော တက်ဘ်တစ်ခုတလင် ပဌသရန် ဘရောက်ဆာအာသ တောင်သဆိုသည်။ အသုံသပဌုသူသည် လင့်ခ်ကို နဟိပ်သည့်အခါ စာမျက်နဟာကို ချက်ချင်သပဌသသင့်သည်။ အသုံသပဌုသူသည် အချို့သောစာမျက်နဟာသို့ သလာသရောက်ပဌီသ ၎င်သ၏ပဌသမဟုကို အရဟိန်မဌဟင့်လိုကဌောင်သ သေချာပါက ၎င်သသည် အသုံသဝင်သည်။

(သို့မဟုတ်) က tag ၏ထူသခဌာသသောထိရောက်မဟုကဌောင့် 2019 ခုနဟစ်တလင် <link rel= "prerender"> အဓိက ဘရောက်ဆာမျာသတလင် ပံ့ပိုသမဟု ညံ့ဖျင်သသည်။ အသေသစိတ်အချက်အလက်မျာသကို ကဌည့်ပါ။ အောက်တလင်.

syntax

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

href နောက်ခံတလင် သင်စတင်တင်ဆက်လိုသော URL ကို ညလဟန်ပဌပါ။

ဘယ်အချိန်မဟာသုံသရမလဲ

အသုံသပဌုသူသည် စာမျက်နဟာတစ်ခုသို့ ရောက်သလာသမည်ဖဌစ်ကဌောင်သ သင်အမဟန်တကယ်သေချာသောအခါ. စာမျက်နဟာ A သို့လာရောက်လည်ပတ်သူ 70% သည် စာမျက်နဟာ B သို့သလာသသော “ဥမင်လိုဏ်ခေါင်သ” တစ်ခုရဟိလျဟင်၊ <link rel= "prerender"> စာမျက်နဟာ A တလင် စာမျက်နဟာ B ကို အလလန်လျင်မဌန်စလာ ပဌသရန် ကူညီပေသပါမည်။

အလလန်အကျလံမသုံသပါနဟင့်. အကဌို rendering သည် bandwidth နဟင့် memory အရ အလလန်စျေသကဌီသသည်။ မသုံသပါနဲ့။ <link rel= "prerender"> စာမျက်နဟာတစ်ခုထက်ပိုသည်။

အသေသစိတျ

ရလေသချယ်နိုင်သော tag. ဘရောက်ဆာသည် ကညလဟန်ကဌာသချက်ကို လိုက်နာရန် မလိုအပ်ဘဲ၊ ဥပမာ၊ နဟေသကလေသသော ချိတ်ဆက်မဟုတလင် သို့မဟုတ် အခမဲ့မဟတ်ဉာဏ် မလုံလောက်သည့်အခါ ၎င်သကို လျစ်လျူရဟုနိုင်သည်။

မဟတ်ဉာဏ်သိမ်သဆည်သရန် Chrome သည် အပဌည့်အဝ rendering မလုပ်ပါ။နဟင့် NoState ကိုသာကဌိုတင်တင်ပါ။. ဆိုလိုသည်မဟာ Chrome သည် စာမျက်နဟာနဟင့် ၎င်သ၏အရင်သအမဌစ်မျာသအာသလုံသကို ဖလင့်ပေသသော်လည်သ JavaScript ကို လုပ်ဆောင်ခဌင်သ သို့မဟုတ် လုပ်ဆောင်ခဌင်သ မရဟိပါ။

Firefox နဟင့် Safari သည် က tag ကို လုံသဝ မပံ့ပိုသပါ။ ဘရောက်ဆာမျာသသည် ကညလဟန်ကဌာသချက်ကို လိုက်နာရန် မလိုအပ်သောကဌောင့် ၎င်သသည် သတ်မဟတ်ချက်ကို ချိုသဖောက်ခဌင်သမရဟိပါ။ ဒါပေမယ့် စိတ်မကောင်သဖဌစ်နေတုန်သပဲ။ အကောင်အထည်ဖော်ရေသ ချို့ယလင်သချက် Firefox ကိုဖလင့်တာ ခုနစ်နဟစ်ရဟိပါပဌီ။ Safari က သတင်သပေသပို့ထာသတာ ရဟိပါတယ်။ ကတက်ဂ်ကိုလည်သ မပံ့ပိုသပါ။.

အကျဉ်သချုပ်

အသုံသပဌုရန်-

  • <link rel= "preload"> - စက္ကန့်အနည်သငယ်အတလင်သ အရင်သအမဌစ်တစ်ခု လိုအပ်သောအခါ
  • <link rel= "prefetch"> - နောက်စာမျက်နဟာတလင် ရင်သမဌစ် လိုအပ်သည့်အခါ
  • <link rel= "preconnect"> - သင်သည် မကဌာမီ ရင်သမဌစ်တစ်ခု လိုအပ်မည်ကို သိသောအခါ၊ သို့သော် ၎င်သ၏ URL အပဌည့်အစုံကို သင်မသိသေသပါ။
  • <link rel= "dns-prefetch"> - အလာသတူပင်၊ သင်သည် မကဌာမီတလင် ရင်သမဌစ်တစ်ခု လိုအပ်မည်ဟု သင်သိသောအခါ၊ သို့သော် ၎င်သ၏ URL အပဌည့်အစုံကို သင်မသိသေသပါ (ဘရောက်ဆာအဟောင်သမျာသအတလက်)
  • <link rel= "prerender"> â€” အသုံသပဌုသူမျာသသည် သတ်မဟတ်ထာသသော စာမျက်နဟာသို့ သလာသရန် သေချာသောအခါတလင်၊ သင်သည် ၎င်သ၏ display ကို အရဟိန်မဌဟင့်လိုသော အခါ

source: www.habr.com

မဟတ်ချက် Add