前端優化

 

（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要小並且可緩存