WEB性能優化

      做爲一個前端工做人員，咱們不可避免要進行web的性能優化。那麼有哪些優化的方法呢？

      A、常規項

      1 、減小HTTP請求，在網頁中圖片、css、javascript、flash等等，都會增長咱們的HTTP請求，減小請求數能提升WEB的頁面響應時間；

       二、導入的css和js文件的位置，css放在head部分，js放在body的尾部；

       三、js/css/html代碼的壓縮；

       四、使用外部的 js/css，內聯的css和js其實比外部文件反應更快，那爲何要用外部呢？由於使用外部的css和技術可讓瀏覽器緩存它，這樣不只HTML文檔大小減小，並且不會增長HTTP請求數量。另外，外部的 js/css能夠提升代碼的重用性；

       五、資源的延遲加載（懶加載）；

$("img").lazyload

        六、預加載；

        七、緩存處理，使用localStorage。

        B、CSS項

        一、避免使用css表達式，由於它被從新極端的次數至關多；

        二、避免使用@import ；

        三、避免使用IE Filter；

        四、避免使用後代選擇器 ul>li ;

        五、利用css繼承機制；

        六、避免使用通配符選擇器；

        七、使用多重選擇器；

        八、CSS Sprites技術

        C、JavaScript項

        一、使用臨時變量（或數組）存放dom節點；

        二、批量操做時，使用字符串拼接，用innerHTML開銷更小，速度更快，同時內存也更安全；

        三、減小dom訪問，能夠緩存已經訪問過的元素，刪除dom節點中沒必要要的節點（remove熾熱的()）和對象；

        四、建立dom節點，在執行完 createElement 代碼後，應該立刻添加（append）到dom樹中；

        五、監聽dom事件，監聽父節點（事件冒泡）。

        D、HTML項

        一、避免使用iframe，由於它會致使頁面的重繪；

        二、減小節點數量；

        三、避免重繪和迴流，佈局變化引發重繪，元素變化（內容、樣式）致使迴流；

        E、資源項

        一、圖片

        1-一、減小圖片數量（CSS Sprites）；

        1-二、下降圖片質量（減少圖片大小）；

        1-三、選擇適當的圖片樣式（jpg主要是攝影級照相類圖像，gif主要是動畫圖片，png杜宇透明無損耗的小文件是不錯的選擇）；

        1-四、圖片的轉碼Base64（src="data:image/jpg;base64,..."）；

        二、避免使用flash，儘可能用css3代替。

        F、壓縮工具

        一、jsmin壓縮代碼，不會驗證代碼語法；

        二、YUIcompressor 壓縮時會驗證語法，代碼優化。

        G、CDN（內容分發網絡）

        CDN的好處在於

         一、不用擔憂本身網站訪客，在任什麼時候間、任何地點、任何網絡運營商，都能快速打開網站；

         二、各類服務器虛擬主機帶寬等採購成本，包括後期運維成本都會大大減小；

         三、給網站直接帶來的好處：流量、諮詢量、客戶量、成單量。