web性能優化

1.高級web性能優化：
  a.服務器端技術:改進並行性，使用緩存控制和HTTP壓縮，重寫URL，以及對RSS訂閱使用差值壓縮
  b.客戶端技術:延遲加載JS，按需加載資源，使用逐步加強和使用與數據URL內聯的圖像以節省HTTP請求數
2.吸引眼球的方法：
  a.前載標題，b.描述元標籤，c.PPC標題和摘要
3.搜索引擎優化:站內優化和站外優化
  a.站內優化：內容關鍵字優化，有效內容建立和策略性連接交換
  b.站外優化：將指向本站的連接數量和流行度最大化
4.flash優化技巧：使用兩個div，一個div用於flash動畫，另外一個用於與其等價的HTML代碼
  當flash插件可用時，利用JS把HTML DIV隱藏起來，此時HTML對搜索引擎仍然有效
  注意：這種方法沒法用於複雜的多頁面站點，由於全部文字都存放在flash以外的一個XMl文件中
5.專業設計：象徵信譽的logo易用的佈局，舒服的配色方案，廣告詞注重收益精確無誤與目標受衆密切相關，可以吸 引用戶的相關圖片，易於更新的特別標記
6.導航設計：放棄圖片導航，避免將關鍵字放入圖像，扔掉只支持JS的導航，換成基於列表的層疊樣式表風格，或提 高等價的導航文本
7.避免在不一樣URL上使用相同或很是類似的頁面
8.影響搜索引擎排名的重要因素：
  在標題中使用關鍵字，入鏈的錨文本，站點全局連接流行度，站點年齡，站點內部連接結構裏連接流行度，站點入鏈的主題相關性，站點連接在主題社區裏的流行度，主體文本中使用的關鍵字，連接站點的全局連接流行度，連接頁面的主題相關度
9.對搜索引擎負面影響的因素：
  服務器常常不能訪問，內容與索引中已有的內容很是類似或重複，出鏈質量低或指向垃圾站點，在許多頁面上覆制標題/元標籤，濫用目標關鍵字（表現爲填充，堆砌垃圾信息），參與連接工廠或大量出售連接，很是慢的服務器響應速度，從垃圾站點來的入鏈，站點的訪問者層次低
10.添加關鍵字的策略：
   可見文本的前兩句，版式標題及子標題，連接和錨文本，頁面URL，文件名，Alt文本，可索引的導航元素
11.a.永久重定向：
   Options+FollowSymLinks
   RewriteEngine on
   RewriteRule ^oldpage.htm$ ......[R=301,L]
   b.IIS重定向：
   打開Internet Services Manager並瀏覽你想要重定向的站點
   在右側面板，點擊想要重定向的文件或者目錄，而後點擊Properties
   在File標籤下面，點擊單選按鈕A redirection to a URL
   將目標輸入到Redirect to文本框
   確保選中多選框The exact URL entered above和A permanent redirection for this resource
   點擊Apply
12.加快網頁速度方法：
   儘可能減小HTTP請求，調整圖片大小並優化，優化多媒體，將JS轉換爲CSS，使用服務器端探測，優化JS得到更快的執行速度和更小的文件體積，把表佈局轉換爲CSS佈局，用CSS規則替代內聯樣式，最小化初始顯示時間（快速加載有用部分），理智的加載JS
   1）減小HTTP請求數：合併文件和用CSS技術代替基於圖形的技術（轉換圖形文本爲CSS文本，合併外部文件、腳本、CSS文件，去掉框架和JS頭文件包含，用CSS邊距代替空白單元，CSS懸停代替JS，CSS精靈）
   2）調整圖片大小並優化：提早計劃最大程度壓縮文件大小（簡化背景圖像）；裁剪圖片只保留與上下文最相關的部分；調整圖像到正好所需的像素大小；合併圖片，節約HTTP請求，使用圖像映射或CSS精靈；模糊JPEG背景，經過‘表面模糊’進行測試；使用CSS邊界或背景代替在圖像中的嵌入邊框，不要爲子排版而設置某種顏色的空白邊距，而是使用剪切的圖像和經過編碼實現背景色；儘量使用PNG圖像替換GIF和JPEG，必要時使用色彩抖動；用HTML高度和寬度指定圖像大小；PS智能銳化；用CSS或透明GIF或PNG疊加文本代替JPEG中的嵌入文本，有更高壓縮比；優化圖片前先消噪；最小化GIF和PNG色彩抖動、位深；採用加權優化（區域壓縮），經過alpha遮罩來優化背景；對於尺寸稍小的GIF和PNG，可使用「有損」壓縮；減小或避免在分層圖像中陰影效果；
   3）快速加載有用部分：經過分層表格或div確保有用內容（例如導航信息），可以快速加載
13.CSS和JS位置：
   CSS置頂，JS置底
14.JS優化：
   1）刪除JS註釋（注意條件註釋）
   2）當心刪除空白字符（有些語句忘記添加分號）
   3）使用縮寫型賦值
   4）字符常量宏（定義全局變量）
   5）去除無用代碼：在聲明或多層循環中只包含一個聲明，可刪除花括號；變量在首次使用時會自動建立且是全局性的，若是使用全局變量，可省略var聲明（當心使用）；在函數末尾的返回表達式沒有參數可刪掉（如return）
15.CSS優化：
   1)用類型選擇器代替內聯樣式
   2)使用後代選擇器而不要使用內聯類
   3)將存在相同聲明的選擇器歸組
   4)將相同選擇器的不一樣聲明分組
   5)將相一樣式合併爲共享類
   6)利用繼承消除重複聲明
   7)使用CSS縮寫來簡化規則和顏色的定義
   8)縮寫較長的類名和ID名
   9)用CSS代替JS動做
   10）使用CSS3
   11）屬性值的複寫：（border，border-color，margin，padding，outline）
       一個值表明全部邊，兩個表明上下和左右，三個表明上 右左 下，四個表明上右下左
   12）CSS單幅圖像菜單翻轉：
       通常準備兩個圖片，但這樣的話須要兩次HTTP請求，在「關」圖片沒有預加載狀況下，會產生閃爍，最好的解決方法是將兩個圖片放在一個圖片精靈裏，經過切換背景位置實現翻轉
   13）可靠的CSS架構：
       重置樣式表讓渲染行爲保持一致
       對主頁區域使用標記容器單元格，以此設計後代選擇器
       將外部CSS文件放在head元素裏，使之漸進渲染
16.Ajax優化：
   1)恰當的使用Ajax解決問題
   2）使用良好構建和支持的Ajax庫
   3）最小化JS代碼
   4）減小HTTP請求
   5）選擇正確的傳輸數據格式
   6）確保網絡可用性和性能
   7）使用JS緩存
   8）爲搜索引擎提供兼容機制，保證JS被禁用時的可訪問性
   9）使用片斷標識符來儲存狀態
17.解決Ajax緩存問題：
   不將Ajax請求放入緩存的三種方法：
   1）在服務器端輸出No Cache頭部信息
      例（PHP）：
      header("Cache-Control:no-cache");
      header("Pragma:no-cache");
   2）使用惟一URL來生成請求（使用時間戳）
      例：
      var ts = "ts="+(new Date()).getTime();
      sendRequest("sayhello.php",ts);
   3)爲過去的某個時間設定If-Modified-Since
     ①使用XHR對象方法setRequestHeader()來將請求中的If-Modefied-Since設定爲遙遠的過去
     例：xhr.setRequestHeader("If-Modefied-Since","Tue,14 Nov 1995 03:33:08 GMT");
     ②將Expires頭設爲遙遠的將來
     例：header("Expires:Sun,05 Jan 2025 04:00:09 GMT");
18.超時、重試和順序
   設置在一段時間，好比5秒後觸發的定時器，來取消正在進行的連接

   var g_abort=false;
   var xhr=createXHR();
   if(xhr)
   {
     xhr.open("GET","sayhello.php",true);
     var timeout=setTimeout(function(){g_abort=true;xhr.abort();},5000);
     xhr.onreadystatechange=function(){responseCallback(xhr,timeout);};
     xhr.send();
   }

 

19.三種緩存方法：
   1）經過<meta>標籤<meta http-equiv="Expires"...>
   2)經過編碼實現HTTP頭設置（CGI腳本等）
   3）經過網絡服務器通用配置文件（httpd.conf）
20.web性能優化：
   1)服務器端優化技術：優化並行下載，緩存頻繁使用的對象，使用HTTP壓縮，使用delta編碼，用mod_rewrite重寫URL
   關閉ETag，使用Expires和Cache_Control頭部來有效緩存資源
   關閉方法：在Apache配置文件中添加以下兩行（須要mod_header包含在默認Apache結構中）
   Header unset Etag
   FileETag none
   2)客戶端優化技術：
   Ⅰ.延遲腳本加載：（使用漸進加強，按需加載JS或裝載，爲外部widget使用一個iframe模擬異步JS）
     a.漸進加強：
       使用簡介的語義化XHTML構造基礎內容，讓全部瀏覽器均可以訪問，由外部CSS提供更高級的佈局，由外部JS提供更高級的交互，用JS實現從DOM添加或刪除對象，用JS實現更高級的功能
     b.按需加載JS：
       使用DOM建立一個腳本元素並把它追加到頭部元素：

       function include_js(file){
         if(document.getElementByTagName){
           var html_doc=document.getElementsByTagName('head')[0];
           var js=document.createElement('script');
           js.setAttribute('src',file);
           js.setAttribute('type','text/javascript');
           html_doc.appendChild(js);
           js.onreadystatechange=function(){
             //for IE
             if(js.readyState=='complete'){
               alert('JS onreadystate fired');
               //return true;
             }
           }
           js.onload=function(){
             //for non-IE
             alert('JS onload fired');
             //return true;
           }
           return false;
         }
         else alert('getElementsByTagName not supported');
       }

 

   爲了不緩存，可添加隨機種子到腳本名中：
   function include_jsNoCache{
     var ms=new Date().getTime().toString();
     var seed="?"+ms;
     include_js(src+seed);
   }
   上述代碼在Safari中不會觸發onload事件，只有在加載腳本前設置onload和src 屬性纔會觸發Safari中的加載事件，並且前面的腳本也不會清理內存，當腳本被添加到DOM並使用完後，應該刪除以節省內存，修改以下：

   include_js=(function(){
     var uid=0;
     var remove=function(id){
       var head=document.getElementsByTagName('head')[0];
       head.removeChild(document.getElementById('jsInclude_'+id));
     };
     return function(file,callback){
       var callback;
       var id=++uid;
       var head=document.getElementsByTagName('head')[0];
       var js=document.createElement('script');
       js.setAttribute('type','text/javascript');
       js.setAttribute('src',file);
       js.setAttribute('id','jsInclude_'+uid);
       if(document.all)
       js.onreadystatechange=function(){
         if(js.readyState=="complete"){callback(id);remove(id);}
       };
       else
         js.onload=function(){
           callback(id);remove(id);
         };
       head.appendChild(js);
       return uid;
     };
   })();

 

       c.爲外部JS使用iframe：
       這樣在加載腳本時若是有拖延，只有iframe被拖延，而不是整個網頁，由於JS能從一個HTML文件訪問嵌入其中的iframe中變量，反之亦然，全部經過把一個HTML分紅幾個iframe能夠有效將同步的HTML網頁變成異步
       首先，編寫一個函數，用於在iframe加載完成以後處理數據：
       function mainPageFunction(data){
         //...
       }
       而後建立一個iframe加載外部的JS文件，注意iframe會引發佈局問題，因此可使用隱藏的iframe
       這裏對指定位置的iframe不作介紹，可用用空的iframe加載數據：
       <iframe src="about:blank" height="0" width="0" name="dataframe"></iframe>
       <script type="text/javascript">
       window.frames['dataframe'].window.location.replace('loadData.html');
       </script>
       parent.mainPageFunction(data);
   Ⅱ.在服務器上緩存站外文件並本地加載：
     可使用cron任務週期地抓取文件，而後本地加載以免任何由外部服務器引發的延時