မျက်မှောက်ခေတ် Web Development တွင် CSS နှင့် JavaScript ဖိုင်များကိုများသောအားဖြင့်စာမျက်နှာအကျိုးသက်ရောက်ခြင်းနှင့်လုပ်ဆောင်မှုများကိုရရှိရန်အသုံးပြုသည်။ သို့သော်ဖိုင်တစ်ခုချင်းစီကိုတင်ခြင်းဆိုသည်မှာနောက်ထပ်ကွန်ယက်တောင်းဆိုမှုကိုဆိုလိုသည်။ ၎င်းသည်စာမျက်နှာတင်ရန်နှောင့်နှေးစေသည်။ ထို့ကြောင့်ဖိုင်များစွာကိုပေါင်းစည်းခြင်းနှင့်ချုံ့ခြင်းများကိုချုံ့ခြင်းများကိုချုံ့ခြင်းကတောင်းဆိုမှုများအရေအတွက်ကိုသိသိသာသာလျှော့ချနိုင်သည်။
ဖိုင်များကိုပေါင်းစည်းခြင်းနှင့် compressing များအတွက် PHP နမူနာကုဒ်ဖြစ်သည်။
function ကို Merge_and_compress_Assets ($ ပိုင်ဆိုင်မှု, $ အမျိုးအစား) { $ အကြောင်းအရာ = ''; foreach ($ file ကို $ ပိုင်ဆိုင်မှု) { $ အကြောင်းအရာ။ = file_get_contents ($ file); } အကယ်. ($ type == 'CSS') { $ အကြောင်းအရာ = compress_css ($ အကြောင်းအရာ); } အခြား ($ type == 'JS') { $ အကြောင်းအရာ = compress_Js ($ အကြောင်းအရာ); } File_Propl_Contents ('ပေါင်းစည်းခြင်း။ ' ။ $ အမျိုးအစား, $ အကြောင်းအရာ); } <p>function compress_css ($ အကြောင်းအရာ) {<br> // CSS compressing ၏တိကျသောယုတ္တိဗေဒ<br> }</p> <p>function compress_Js ($ အကြောင်းအရာ) {<br> // JavaScript ၏တိကျသောယုတ္တိဗေဒချုံ့<br> }</p> <p>$ css_assets = ['style1.css', 'style2.css', 'style3.css';<br> $ js_assets = ['script1.js', 'script2.js'];</p> <p>Merge_and_compress_Assets ($ css_assets, CSS ');<br> Merge_and_compress_Assets ($ js_Astets, JS ');<br>
အပေါ်ကဥပမာမှာ `merge_and_compress_Ardsons function ကိုဖိုင်အမျိုးမျိုးထည့်ပြီးဖိုင်အမျိုးအစား (CSS သို့မဟုတ် Javascript) အလိုက်ဖိုင်ပေါင်းစုံကိုထည့်သွင်းပြီးဖိအားပေးမှုများစွာကိုထည့်သွင်းပါ။ နောက်ဆုံးတွင်ပေါင်းစည်းထားသောအကြောင်းအရာကိုဖိုင်အသစ်သို့ရေးပါ။
CSS Sprites သည်သေးငယ်သောအိုင်ကွန်အမြောက်အများကိုပုံကြီးတစ်ခုအဖြစ်ပေါင်းစပ်ထားသောနည်းပညာဖြစ်သည်။ CSS ၏ `နောက်ခံအနေအထား၏ပိုင်ဆိုင်မှုမှတစ်ဆင့်သင်သည်ရုပ်ပုံကြီး၏ကွဲပြားခြားနားသောနေရာများကိုသေးငယ်သော icon များအဖြစ်ပြသနိုင်သည်။ ဤနည်းအားဖြင့်စာမျက်နှာတစ်ခုသည်ပုံတစ်ပုံကိုတင်ရန်, ရုပ်ပုံများအတွက်တောင်းဆိုမှုကိုရှောင်ရှားရန်နှင့်ဝက်ဘ်စာမျက်နှာများကိုမြန်မြန်ဆန်ဆန်အရှိန်မြှင့်တင်ရန်လိုအပ်သည်။
CSS Sprites သုံး. ဥပမာတစ်ခုမှာဤတွင်ဖြစ်သည်။
<style> .sprite { background-image: url('sprites.png'); background-repeat: no-repeat; } .icon1 { width: 32px; height: 32px; background-position: 0 -32px; } .icon2 { width: 64px; height: 64px; background-position: 0 0; } </style> <div class="sprite icon1"></div> <div class="sprite icon2"></div>
ဤဥပမာတွင် `Sprins.png` သည်သေးငယ်သော icon များစွာပါ 0 င်သောကြီးမားသောပုံရိပ်တစ်ခုဖြစ်သည်။ ကွဲပြားခြားနားသော `နောက်ခံအနေအထား 'တန်ဖိုးများနှင့်အတူ, သင်သည်စာမျက်နှာဖိုင်များစွာကိုမတင်ဘဲစာမျက်နှာရှိကွဲပြားသောအိုင်ကွန်များကိုပြနိုင်သည်။
ပုံများသို့မဟုတ်အရင်းအမြစ်များအမြောက်အများရှိသောစာမျက်နှာများအတွက်ပျင်းရိသောတင်ခြင်းနှင့်ပျင်းရိသော Loying သည်ကန ဦး စာမျက်နှာ၏အမြန်နှုန်းကိုတိုးတက်စေနိုင်သည်။ ပျင်းရိသောတင်ခြင်းသည်မရှိမဖြစ်လိုအပ်သောအရင်းအမြစ်များကိုမရှိမဖြစ်လိုအပ်သောအရင်းအမြစ်များကိုဖြည့်ဆည်းပေးရန်ဖြစ်သည်။
ပျင်းရိသောတင်ခြင်းနှင့်ပျင်းရိသောတင်ခြင်း၏ဥပမာအားဖြင့်ဥပမာတစ်ခုမှာဤတွင်ဖြစ်သည်။
<script> window.addEventListener('DOMContentLoaded', function() { var lazyImages = document.querySelectorAll('.lazy'); lazyImages.forEach(function(img) { img.src = img.getAttribute('data-src'); }); }); </script>
ဤဥပမာတွင် `img`` tag ၏ data-src attribute သည်အမှန်တကယ်ပုံရိပ်တွင်လမ်းကြောင်းသို့လမ်းကြောင်းပါ 0 င်သည်။ စာမျက်နှာဖွင့်ပြီးနောက် JavaScript သည် `SRC` attribute သို့ image attribute သို့ image attribute သို့ account လုပ်လိမ့်မည်။
ဤ optimization method များကိုအကောင်အထည်ဖော်ခြင်းအားဖြင့် PHP ဝက်ဘ်ဆိုက်များကို အသုံးပြု. PHP ဝက်ဘ်ဆိုက်များကို 0 င်ရောက်ခြင်းကိုထိရောက်စွာလျှော့ချနိုင်သည်။ CSS နှင့် JavaScript ဖိုင်များပေါင်းစည်းခြင်း, CSS နှင့် JavaScript ဖိုင်များပေါင်းစည်းခြင်း, အကောင်းဆုံးသောအခါစီမံကိန်း၏လိုအပ်ချက်များကို အခြေခံ. သင့်လျော်သော optimization နည်းဗျူဟာကိုရွေးချယ်နိုင်သည်။