web前端9大性能優化方案彙總

　　網頁的性能問題是產品開發過程當中的一個重要的環節，在產品成功地把功能實現後，性能能好與壞就直接影響了用戶體驗，以致於影響了產品的成敗！ 做爲web前端開發者，對前端部分進行性能上的優化，是義不容辭，刻不容緩的工做。下面簡介一下9種性能優化方案。

1、罪魁禍首是http請求

　　通常網頁，80%的響應時間花在下載網頁內容(images, stylesheets, javascripts, scripts, flash等)。減小請求次數是縮短響應時間的關鍵！能夠經過簡化頁面設計來減小請求次數，但頁面內容較多能夠採用如下技巧。

 

1. 捆綁文件

   如今有不少現成的庫能夠幫你將多個腳本文件捆綁成一個文件，將多個樣式表文件捆綁成一個文件，以此來減小文件的下載次數。

    

2. CSS Sprites

   就是把多個圖片拼成一副圖片，而後經過CSS來控制在什麼地方具體顯示這整張圖片的什麼位置。主要涉及到的css知識是background-position。

   例如：把多個小圖標合併成一張圖片，減小網絡請求。

    

3. Image Maps

   也是將多幅圖拼在一塊兒，而後經過座標來控制顯示導航。主要使用到map標籤，具體教程，網上一搜就有。

    

4. Inline images

   經過編碼的字符串將圖片內嵌到網頁文本中。

多一份資源就多一個http請求，以上的方法對於資源多的網站來講事十分有用的，這技能必定要get到！

 

2、不能忽視的DOM元素

　　網頁中元素過多對網頁的加載和腳本的執行都是沉重的負擔，500個元素和5000個元素在加載速度上會有很大差異。

 

　　想知道你的網頁中有多少元素，經過在瀏覽器中的一條簡單命令就能夠算出，document.getElementsByTagName('*').length

 

　　多少算是多了呢？雅虎（https://www.yahoo.com/）在寫這篇文章的時候號稱主頁只有700多元素，但如今接近多了一倍。咱們的網頁至少別比雅虎還多吧...

 

　　因此html結構儘量的簡潔，符合w3c的規範，一來能夠優化加載性能，二來更符合seo的優化。這個須要經驗的積累，須要新手們大量的去練習實踐。

 

3、避免空的圖片src屬性

　　空的圖片src仍然會使瀏覽器發送請求到服務器，這樣徹底是浪費時間，並且浪費服務器的資源。

　　尤爲是你的網站天天被不少人訪問的時候，這種空請求形成的傷害不容忽略。

　　瀏覽器如此實現也是根據RFC 3986 - Uniform Resource Identifiers標準，空的src被定義爲當前頁面。

因此注意咱們的網頁中是否存在這樣的代碼

 

straight HTML

<img src="">

 

JavaScript

var img = new Image();

img.src = "";

 

這是很簡單缺很實用的技能，不少新手會忽略。你們要謹記，養成良好的編程習慣。

 

4、千萬別使用CSS表達式

　　CSS表達式能夠動態的設置CSS屬性，在IE5-IE8中支持，其餘瀏覽器中表達式會被忽略。例以下面表達式在不一樣時間設置不一樣的背景顏色。

background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00");

　　CSS表達式的問題在於它被從新計算的次數遠比咱們想象的要多，不只在網頁繪製或大小改變時計算，即便咱們滾動屏幕或者移動鼠標的時候也在計算，所以咱們仍是儘可能避免使用它來防止使用不當而形成的性能損耗。

 

　　若是想達到相似的效果咱們能夠經過簡單的JavaScript作到。

<script type="text/javascript">
        var currentTime = new Date().getHours();
        if(currentTime%2){
          if(document.body){
            document.body.style.background = "#B8D4FF";
          }
        }else{
          if(document.body){
        document.body.style.background = "#F08A00";
      }
        }
    </script>

 

5、css內部or外部，該如何選擇？

註明一下：內部樣式包括了：嵌入式樣式和內聯式樣式。在此不展開解釋，統稱內部樣式。

 

　　使用外部Javascript和CSS文件可使這些文件被瀏覽器緩存，從而在不一樣的請求內容之間重用。同時將Javascript和CSS從內部變爲外部文件也減少了網頁內容的大小。

 

　　可是，並非全部狀況都適合使用將代碼抽取到外部文件去，使用外部Javascript和CSS文件的決定因素在於這些外部文件的重用率，若是用戶在瀏覽咱們的頁面時會訪問屢次相同頁面或者能夠重用腳本的不一樣頁面，那麼外部文件形式能夠爲你帶來很大的好處。

 

　　但對於用戶一般只會訪問一次的頁面，那內部的javascript和css相對來講能夠提供更高的效率。由於減小了http請求次數去加載資源，此時無疑是內部更合適。

 

6、爲何必定要將css置頂？

　　不少新手都知道的一點：要將css置頂，這早已不是什麼祕密。可是背後的緣由是什麼咱們要知道，面試官最喜歡追問這些細節。

 

　　樣式表(css)放在網頁的head中會讓網頁顯得加載速度更快。由於這樣作可使瀏覽器逐步加載已將下載的網頁內容。這對內容比較多的網頁尤爲重要。用戶不用一直等待在一個白屏上。而是能夠先看已經下載的內容。

 

　　若是將樣式表放在底部，瀏覽器會拒絕渲染已經下載的網頁。由於大多數瀏覽器在實現時都努力避免重繪。樣式表中的內容是繪製網頁的關鍵信息。沒有下載下來以前只好對不起觀衆了。

 

　　知道了嗎？是由於瀏覽器機制，沒有下載到css以前，即便下載了網頁結構，沒有了關鍵繪製信息—css，瀏覽器也不會繪製的，用戶只有等...等...等...

 

7、教你如何正確的使用css選擇器

一、避免通配選擇器

　　優化選擇器的原則是減小匹配時間。CSS選擇器的匹配機制是：從右向左進行規制匹配的！

　　#header > a { font-weight:blod; }

　　上面這條規制實際是瀏覽器遍歷頁面全部a元素，並肯定其父元素的id是否爲header。

 

　　#header a {...}

　　後代選擇器開銷更大，在遍歷頁面的全部a元素後，會需向上遍歷直到根節點。

 

　　由此可知，選擇器最右邊的規制 每每決定了向左移匹配的工做量。故最右邊的選擇規則 稱之爲關鍵選擇器。

 

　　.selected * {...}

　　在匹配全部元素後，再分別向上匹配直至根節點。一般比開銷最小的ID選擇器高出3個數量級。

 

二、避免單規則的屬性選擇器

　　.selected [href='#index'] {...}

　　瀏覽器先匹配全部的元素，檢查其是否有href屬性而且值爲「#index」，再分別向上匹配class爲selected的元素。故應該避免使用關鍵選擇器是單規則屬性選擇器的規則。

 

三、避免正則的屬性選擇器

　　CSS3添加了複雜的屬性選擇器，經過類正則表達式進行匹配。但這些類型的選擇器會比基於類別的匹配慢不少。

 

四、移除無匹配的樣式

　　1.刪除無用的樣式，可縮減樣式文件大小，加快加載速度。

　　2.對於瀏覽器，全部樣式規則都會被解析後索引發來，即便是當前頁面無匹配的規則！故移除無匹配的規則，減小索引項，加快瀏覽器查找速度。

 

8、記得使用JavaScript緩存查詢結果

緩存選擇器查詢結果

　　減小選擇器查詢的次數，並儘量緩存選中的結果，便於之後的重用。特別是的對於查詢次數較多的網頁，或者再for循環裏面作查詢的程序，使用緩存查詢，對於性能的提高是十分有效的。

//不使用緩存
        $('#box').find('.classA');
    $('#box').find('.classB');
    //使用下面的方法 減小開銷
    var cached = $('#box');
    cached.find('.calssA');
    cached.find('.calssB');

 

9、切記要避免重定向

　　重定向的英文是Redirect，用於將用戶從一個URL從新跳轉到另外一個URL。

 

　　最多見的Redirect就是301和302兩種。

 

　　在咱們實際開發中避免重定向最簡單也最容易被忽視的一個問題就是，設置URL的時候，最後的「/」，有些人有時候會忽略，其實你少了「/」，這時候的URL就被重定向了，因此在給頁面連接加URL的時候切記最後的「/」不可丟。

 

 

《-----------End----------》