紸啶呮媞璐濄

（1） 減少http請求次數：CSS Sprites, JS、CSS源碼壓縮、圖片大小控制合適；網頁Gzip，CDN托管，data緩存 ，圖片服務器。

（2） 前端模板 JS+數據，減少由于HTML標簽導致的帶寬浪費，前端用變量保存AJAX請求結果，每次操作本地變量，不用請求，減少請求次數

（3） 用innerHTML代替DOM操作，減少DOM操作次數，優化javascript性能。

（4） 當需要設置的樣式很多時設置className而不是直接操作style。

（5） 少用全局變量、緩存DOM節點查找的結果。減少IO讀取操作。

（6） 避免使用CSS Expression（css表達式)又稱Dynamic properties(動態屬性)。

（7） 圖片預加載，將樣式表放在頂部，將腳本放在底部 加上時間戳。

（8） 避免在頁面的主體布局中使用table，table要等其中的內容完全下載之后才會顯示出來，顯示比div+css布局慢。
對普通的網站有一個統一的思路，就是盡量向前端優化、減少數據庫操作、減少磁盤IO。向前端優化指的是，在不影響功能和體驗的情況下，能在瀏覽器執行的不要在服務端執行，能在緩存服務器上直接返回的不要到應用服務器，程序能直接取得的結果不要到外部取得，本機內能取得的數據不要到遠程取，內存能取到的不要到磁盤取，緩存中有的不要去數據庫查詢。減少數據庫操作指減少更新次數、緩存結果減少查詢次數、將數據庫執行的操作盡可能的讓你的程序完成（例如join查詢），減少磁盤IO指盡量不使用文件系統作為緩存、減少讀寫文件次數等。程序優化永遠要優化慢的部分，換語言是無法“優化”的。

請說出三種減少頁面加載時間的方法。
1.優化圖片
2.圖像格式的選擇（GIF：提供的顏色較少，可用在一些對顏色要求不高的地方）
3.優化CSS（壓縮合并css，如margin-top,margin-left...)
4.網址后加斜杠（如www.campr.com/目錄，會判斷這個“目錄是什么文件類型，或者是目錄。）
5.標明高度和寬度（如果瀏覽器沒有找到這兩個參數，它需要一邊下載圖片一邊計算大小，如果圖片很多，瀏覽器需要不斷地調整頁面。這不但影響速度，也影響瀏覽體驗。
當瀏覽器知道了高度和寬度參數后，即使圖片暫時無法顯示，頁面上也會騰出圖片的空位，然后繼續加載后面的內容。從而加載時間快了，瀏覽體驗也更好了。）

6.減少http請求（合并文件，合并圖片）。

javascript之DOM優化
最小化DOM訪問，在javascript端做盡可能多的事。
在反復訪問的地方使用局部變量存放DOM引用。
小心地處理HTML集合，因為他們表現出“存在性”，總是對底層文檔重新查詢。將集合length屬性緩存到一個變量中，在迭代中使用這個變。如果經常操作這個集合，可以將集體拷貝到數組中。
可能的話，使用速度更快的API，諸如querySelectorAll()和firstElementChild。
注重重繪和重排版：批量修改風格，離線操作DOM樹，緩存并減少對布局信息的訪問。
(1)批量修改
(2)離線操作DOM
(3)緩存布局信息
動畫中使用絕對坐標，使用拖放代理。
使用事件托管技術最小化事件句柄數量。

1. JavaScript 壓縮和模塊打包
打包css文件，合并圖片
2. 按需加載資源
資源（特別是圖片）的按需加載或者說圖片懶加載
減少向服務器發出的并發請求數量
減少瀏覽器的內存使用率
減少服務器端的負載
3. 緩存

頁面級優化
1. 減少 HTTP請求數
減少 HTTP請求數的主要途徑包括：
(1). 從設計實現層面簡化頁面
(2). 合理設置 HTTP緩存 例子：緩存css文件和js文件
(3). 資源合并與壓縮
CSS、 Javascript、Image 都可以用相應的工具進行壓縮
(4). CSS Sprites（合并 CSS圖片）

2. 將外部腳本置底（將腳本內容在頁面信息內容加載后再加載）
3. 異步執行 inline腳本(其實原理和上面是一樣，保證腳本在頁面內容后面加載。)
4. Lazy Load Javascript（只有在需要加載的時候加載，在一般情況下并不加載信息內容。）
5. 將 CSS放在 HEAD中
6. 異步請求 Callback（就是將一些行為樣式提取出來，慢慢的加載信息的內容）
7. 減少不必要的 HTTP跳轉
8. 避免重復的資源請求
代碼級優化
1. Javascript
(1). DOM
(2). 慎用 with
(3). 避免使用 eval和 Function
(4). 減少作用域鏈查找
(5). 數據訪問
(6). 字符串拼接
2. CSS選擇符
3. HTML
4. Image壓縮

把樣式表置于頂部
把腳本置于頁面底部
避免使用 CSS 表達式（Expression）
使用外部 JavaScript 和 CSS
削減 JavaScript 和 CSS
用 <link> 代替 @import
避免使用濾鏡
剔除重復腳本
減少DOM訪問

Coockie:

減小Cookie體積
對于頁面內容使用無coockie域名

圖片：

優化圖像
優化CSS Spirite
不要在HTML中縮放圖像
favicon.ico要小而且可緩存