web性能優化

高性能JavaScript

　　1.腳本

　　　　把script腳本放到body標籤底部（ </body>）

　　　　把多個script腳本合成一個

　　　　無阻塞加載腳本（延遲defer、動態建立script、XMLHttpRequest腳本注入）　　　

　　2.變量

　　　　減小變量的搜索過程

　　　　儘可能使用局部變量

　　　　把對象成員、數組元素、跨做用域變量保存爲局部變量

　　3.DOM

　　　　減小訪問DOM次數

　　　　使用局部變量保存對DOM的引用

　　　　把HTML集合的長度保存在一個變量中、把HTML集合拷貝到數組中

　　　　使用速度更快的API

　　　　留意重繪和重排

　　　　動畫中使用絕對定位、脫離文檔流

　　　　使用事件委託減小事件處理數量

　　4.算法 流程

　　　　for、while、do-while循環性能類似

　　　　避免使用for-in循環、除非要遍歷一個屬性數量未知的對象

　　　　減小循環迭代次數和迭代的運算量

　　　　有時switch比if else快

　　　　判斷條件比較多使用查找表，使用數組或普通對象來構建查找表

　　5.字符串

　　　　數組項鍊接在<=ie7的瀏覽器中快，推薦簡單的+，+=字符串鏈接

　　6.瀏覽器線程、定時器、web workers

　　　　任何javascript任務都不該執行超過100毫秒

　　　　定時器能夠用來讓代碼延遲執行

　　　　web workers容許javascript在UI線程外執行

　　7.數據

　　　　減小http請求次數，合併javascript、css.

　　　　縮短頁面加載時間，主要內容加載完，使用ajax加載次要文件

　　　　確保代碼錯誤不要輸出給用戶，並在服務器處理

　　　　知道什麼時候使用成熟的庫(框架)，什麼時候編寫本身的底層ajax代碼

　　8.實踐

　　　　避免使用eval()和Function構造器雙重求值，給定時器(setTimeout,setInterval)傳人函數而不是字符串

　　　　使用直接量建立數組、對象

　　　　避免重複工做，使用延遲加載和條件預加載

　　　　數學計算時考慮使用位運算符

　　　　儘可能使用原生方法

　　　　合併，壓縮，緩存javascript文件 在服務器壓縮 使用CDN

　　　　使用網絡分析工具，性能分析工具

  -----------------------------------------------------------

 高性能網站建設指南（http://stevesouders.com/hpws）

　　　　HTTP（Hyper Text Transfer Protocol 超文本傳輸協議）是瀏覽器和服務器經過internet進行相互通訊的協議（由請求和響應構成）。

　　　　瀏覽器向一個特定URL發送HTTP請求，URL對應的宿主服務器返回HTTP響應。

　　　　GET請求包含URL，一個頭。HTTP響應包含狀態碼、頭、響應體。

　　　　HTTP構建在TCP（Transmission Control Protocol 傳輸控制協議）之上。

　　1.　減小HTTP請求　

　　　　　　圖片地圖：在一張圖片上關聯多個URL

　　　　　　css sprite：把多張背景圖片整合到一張大圖片中

　　　　　　內聯圖片：<img  src="data:image/gif;base64,R0lGODl" />

　　　　　　合併javascript和css文件

　　2. 使用內容發佈網絡(CDN) 

　　　　內容發佈網絡是一組分佈在多個不一樣地理位置的web服務器，用於更加有效的向用戶發佈內容。　　　　

　　　　縮短響應時間，備份、擴展存儲、緩存，緩和流量峯值壓力

　　3. 添加Expires頭

　　　　web頁面有大量的組件，訪問者會進行不少HTTP請求，經過一個長久的Expires頭，使這些組件能夠被緩存；

　　　　讓瀏覽器緩存圖片、樣式、腳本

　　4. 壓縮組件

　　　　減少HTTP響應文件的大小，減小響應時間

　　　　gzip壓縮是流行的壓縮方法

　　5. 將CSS樣式表放在頂部　　

　　　　避免白屏和無樣式閃爍　使用link標籤將樣式表放在文檔head中

　　6. 將javascript腳本放在底部

　　　　無阻塞加載腳本 並行下載　　

　　7. 避免使用CSS表達式(expression)　　　　

.box{ width:expression( document.body.clientWidth < 960 ? "960px" : "auto" ); min-width:960px; }

 　　8. 使用外部javascript和css　　

 　　　　

 　　9. 減小DNS查找

　　　　緩存DNS查找

　　 10. 壓縮javascript代碼

　　　　　從代碼中移除沒必要要的字符、空格、註釋　　

　　  11. 避免重定向

　　　　重定向是將用戶從一個URL從新路由到另外一個URL　　

http://www.a.com/  //有斜線 （建議加上）
http://www.a.com   //無斜線

　　　12. 移除重複的腳本

　　　13. 配置或移除Etag　　

　　　　　　實體標籤(Etag)是web服務器和瀏覽器用於確認緩存組件的有效性的一種機制。

　　　　　　Etag用於檢測瀏覽器緩存中的組件與原始服務器上的組件是否匹配。

　　　14. 使ajax可緩存　　　　　　

  -----------------------------------------------------------

 高性能網站建設進階指南

　　　1. 理解ajax性能

 　　  2. 建立快速響應的web應用　

 　　  3. 拆分初始化負載

 　　  4. 無阻塞加載腳本

　　　　　XHR Eval 

　　　　　XHR Injection

　　　　　Script in Iframe

　　　　　Script Defer

　　　　　document.write Script Tag

　　   5. 整合異步腳本

　　　6. 佈置行內腳本　　

　　　7. 編寫高效的javascript (高性能javascript)

　　　8. 可伸縮的Comet

　　　　　簡單的輪詢　　　　　　

function xhrRequest(){
	var xhr = new XMLHttpRequest();
	xhr.onreadystatechange = function(){
	    if( xhr.readyState == 4 && xhr.status == 200 ){
	        //處理返回的數據
	    }
	};
	xhr.open('GET','test.php',true);
	xhr.send(null);
}
setTimeout(function(){
	xhrRequest()
},2000);

 　　　　　長輪詢

function longPoll(url,callback){
	var xhr = new XMLHttpRequest();
	xhr.onreadystatechange = function(){
	    if( xhr.readyState == 4 && xhr.status == 200 ){
	        callback(xhr.responseText);
	        //發送另外一個請求，從新鏈接服務器
	        xhr.open('GET',url,true);
			xhr.send(null);	    }
	};
	xhr.open('GET',url,true);
	xhr.send(null);
}

 　　　9. 超越Gzip壓縮　　　

　　　　　　使用事件委託

　　　　　　使用相對URL

　　　　　　移除空白

　　　　　　移除屬性的引號

　　　　　　避免行內樣式

　　　　　　爲javascript變量設置別名

　　　10. 圖片優化　　　　　　

　　　　　　使用合適的圖片格式

　　　　　　優化png圖片

　　　　　　避免使用A　　lphaImageLoader

　　　　　　使用並優化 css sprite

　　　　　　模塊化的方法創建 css sprite

　　　　　　不要再HTML中縮放圖片

　　　　　　緩存圖片

 　　　11. 劃分主域　　

　　　 12. 儘早刷新文檔的輸出　　　

　　　 13. 少用iframe(內嵌frame)

　　　　　　開銷最高的DOM元素

　　　　　　阻塞onload事件

　　　 14. 簡化css選擇符　　　

　　　　　　css選擇符是從右到左進行匹配的

　　　　　　避免使用通配規則

　　　　　　不要限定 ID 選擇符

　　　　　　不要限定類選擇符

　　　　　　避免使用後代、子選擇符

　　　　　　依靠繼承

   -----------------------------------------------------------