PHP ဝက်ဘ်ဆိုက် optimization သိကောင်းစရာများ - စာမျက်နှာတုံ့ပြန်မှုကိုအရှိန်မြှင့်ရန်အရင်းအမြစ်ဝန်တင်ခြင်းကိုလျှော့ချပါ

javascript ဖိုင်များဖြင့် CSS ကိုပေါင်းစည်းခြင်းနှင့်ချုံ့ခြင်း

မျက်မှောက်ခေတ် 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 = [&#39;style1.css&#39;, &#39;style2.css&#39;, &#39;style3.css&#39;;<br>
$ js_assets = [&#39;script1.js&#39;, &#39;script2.js&#39;];</p>
<p>Merge_and_compress_Assets ($ css_assets, CSS &#39;);<br>
Merge_and_compress_Assets ($ js_Astets, JS &#39;);<br>

အပေါ်ကဥပမာမှာ `merge_and_compress_Ardsons function ကိုဖိုင်အမျိုးမျိုးထည့်ပြီးဖိုင်အမျိုးအစား (CSS သို့မဟုတ် Javascript) အလိုက်ဖိုင်ပေါင်းစုံကိုထည့်သွင်းပြီးဖိအားပေးမှုများစွာကိုထည့်သွင်းပါ။ နောက်ဆုံးတွင်ပေါင်းစည်းထားသောအကြောင်းအရာကိုဖိုင်အသစ်သို့ရေးပါ။

CSS Sprites နည်းပညာကိုအသုံးပြုခြင်း

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 င်သောကြီးမားသောပုံရိပ်တစ်ခုဖြစ်သည်။ ကွဲပြားခြားနားသော `နောက်ခံအနေအထား 'တန်ဖိုးများနှင့်အတူ, သင်သည်စာမျက်နှာဖိုင်များစွာကိုမတင်ဘဲစာမျက်နှာရှိကွဲပြားသောအိုင်ကွန်များကိုပြနိုင်သည်။

ပျင်းရိ vs. ပျင်းရိ loading ပျင်းရိ

ပုံများသို့မဟုတ်အရင်းအမြစ်များအမြောက်အများရှိသောစာမျက်နှာများအတွက်ပျင်းရိသောတင်ခြင်းနှင့်ပျင်းရိသော 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 နည်းဗျူဟာကိုရွေးချယ်နိုင်သည်။