前端框架優化方案

一：可以參考 雅虎34條軍規   這裏不做解釋，可以去百度

下面是詳細的前端頁面的優化

 1.合併圖片   雪碧圖    
    css-backgroud-position 調整圖片的顯示位置   
    <img src="">  換成 data:url  
    <img src="data:image/jpeg;base64,url"> 渲染圖片無需額外的http請求
    img {
      background-image:url("data:image/jpeg;base64,url")
    }
    
  2.css  js  合併 並壓縮   
    js放到最後
    
    
  3.充分利用瀏覽器的緩存   
      強制緩存   協商緩存   
      
      強制緩存   
          Catch-Control：max-age=365d
      協商緩存   
          E-Tag（response/request header ）  If-None-Match  決定資源是否過期    
  4.動態的請求腳本和樣式   
     <script type="" src=""></script>
     var flag = true;
     
     if(flag){
       loadScript("*.js");
     }
     
    function loadScript(url){
    var script  =  document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;
    
    document.getElementsByTagName('head')[0].appendChild(script);
    }
    
    
    IE瀏覽器  w3c瀏覽器    
    <link> 0
    <style> 1
    
    .box{
       font-size:16px;
    }
    內聯   document.styleSheet
    外鏈
    
    
    行內  
    
    1.目標對象 style 還是link 第幾個  
    2.選擇器
    3.樣式
    4.位置  
    
    
    insertRule（）   非IE瀏覽器
    目標對象.insertRule(.box{font-size:16px},2);
    
    addRule()  IE瀏覽器  
    目標對象.addRule(box,font-size:16px,1);
    var flag = true;
     
     if(flag){
        loadCss($sheet,"#box","font-size:16px",4);
     }
    
    $sheet = document.styleSheet[0];
    
    
    function loadCss(sheet,selectorText,cssText,position){
        //判定是哪個瀏覽器
        if(sheet.insertRule){  //非IE瀏覽器
               sheet.insertRule(selectorText+"{"+cssText+"}",position);
        }else if(sheet.addRule){
               sheet.addRule(selectorText,cssText,position); //IE瀏覽器
        }
    }