網頁性能優化

1. 圖片優化

1.1 樣式代替圖片
例如：半透明、圓角、陰影、高光、漸變等。這些效果主流的瀏覽器都能夠完美支持，而對於那些低端瀏覽器，我們並不會完全拋棄他們，“漸進增強”則是一個很好的解決方案。
1.2 精靈圖
CSS Sprites，將同類型的圖標或按鈕等背景圖合到一張大圖中，減少頁面請求。
1.3 字體圖標
Icon Font，將圖標做成字體文件。優點是圖標支持多個尺寸，兼容所有瀏覽器，減少頁面請求等。美中不足的是隻支持純色的icon。SVG，對於絕大多數圖案、圖標等，矢量圖更小，且可縮放而無需生成多套圖。現在主流瀏覽器都支持SVG了，所以可放心使用
1.4 base64
將圖片轉化爲base64編碼格式，資源內嵌於CSS或HTML中，不必單獨請求。
1.5圖片響應式
通常圖片加載都是可以通過lazy加載的形式來的，那麼可以在加載的時候來判斷屏幕的尺寸來達到加載大圖還是小圖的目的來達到優化。

2. 資源優化

2.1 CSS頂部, JS底部
2.2 CSS JS文件壓縮
2.3 儘量使用圖片使用精靈圖，字體圖標
2.4 圖片加載可通過懶加載的方式。
總之就是減少資源體積減少資源請求次數。

3. 代碼性能

3.1 css代碼性能優化
1>使用CSS縮寫，減少代碼量；
2>減少查詢層級：如.header .logo要好過.header .top .logo；
3>減少查詢範圍：如.header>li要好過.header li；
4>避免TAG標籤與CLASS或ID並存：如a.top、button#submit；
5>刪除重複的CSS；

3.2 html代碼性能優化

1>正確的閉合標籤

如避免使用<div/>，瀏覽器會多一個將它解析成<div\></div\>的過程；

2>減少DOM節點：加速頁面渲染；
3>最小化重繪和重排
瀏覽器下載完成所有的html標記，js，css，圖片後，它解析文件並創建兩個內部結構，一個事dom樹，一個是渲染樹，瀏覽器根據DOM樹排列，根據渲染樹繪製；
什麼情況下發生重排：
(1)添加或者刪除可見的dom元素
(2)元素位置可變
(3)元素尺寸改變（邊距，填充，邊框寬高等）
(4)內容改變
(5)最初的頁面渲染
(6)瀏覽器窗口改變尺寸
最好減少這些屬性（佈局信息）的查詢次數，查詢時將它賦值給局部變量，參與計算，當你需要對dom樹中的多個元素進行修改時，最好根據以下方式來減少重排和重繪：
(1)從文檔中國摘下此元素
(2)對其應用多重改變
(3)將元素帶回文檔中

3.3 js性能優化
1>緩存變量的值，儘量少的使用全局變量
2>如果需要不斷運行的代碼，不該使用setTimeout，而是使用setInterval，因setTimeout每一次都會初始化一個定時器，而setInterval只會在開始時初始化一個定時器
3>避免使用with語句，由於js的解析器需要檢查with塊中的變量是否屬於with包含的對象，將使with語句執行速度下降，導致js語句很難優化，爲了兼顧速度與代碼量，找個折中的方案：

var form = document.forms[];
form.name.value = "lihang";
form.address.value = "beijing";
form.age.value = "23";

4>儘量少的去使用閉包，使用後要記得銷燬
5>訪問速度與成員嵌套深度有關，嵌套約深，訪問速度越慢
例如：local.href的訪問速度快於window.localtion.href
6>prop()的執行速度要快於attr()
attr()函數主要依賴的是Element對象的getAttribute()和setAttribute()兩個方法。prop()函數主要依賴的則是JS中原生的對象屬性獲取和設置方式。
7>儘量使用for循環遍歷數組，少使用for in循環
8>建議將對象進行緩存處理，特別是DOM訪問是比較消耗資源的

//c.length沒有緩存，每次迭代都要計算一下數組的長度
    function foo1() {
        var i, b, c=[1,2,3];
        for (i=0;i&lt;c.length;i++) {
            b = c[i];
            if(b === "2"){
                return b;
            }
        }
    }
     //性能更好，第一次將數組的長度緩存到變量l中，第二次及後續的循環無需計算數組長度
    function foo2() {
        var i, b, c=[1,2,3],l;
        for (i=0,l=c.length;i&lt;l;i++) {
            b = c[i];
            if(b === "2")
                return b;
        }
    }
    //document.getElementById('info')沒有緩存，每次都要遍歷DOM
    function foo1() {
        var e;
        document.getElementById('info').innerHTML="call 1";
        document.getElementById('info').innerHTML="call 2";

    }
     //性能更好，第二次無需訪問DOM
    function foo2() {
       var e=document.getElementById('info');
       e.innerHTML="call 1";
           e.innerHTML="call 2";
    }

9>儘量不要在函數內部進行過深的嵌套判斷
10>避免循環引用，防止內存泄漏
11>建議避免在函數內返回一個未聲明的變量，會污染外部變量

網頁性能優化