網站優化的14條準則

時間 2019-11-07

原文原文鏈接

1、儘量減小HTTP請求數

Http請求是指從客戶端到服務器端的請求消息。包括：消息首行中，對資源的請求方法、資源的標識符及使用的協議。簡單來講就是當咱們打開網頁的時候，網頁中的文字、圖片、多媒體等一切內容都是從服務器獲取的，都是http請求。javascript

咱們能夠經過合併js文件、CSS文件、使用CSS Spire技術來合併圖片文件減小http請求減小服務器的壓力。php

2、使用CDN

CDN即Content Delivery Network，可使得用戶能夠就近取得內容解決網絡擁堵的狀況，提升響應速度。常見的作法是在距離用戶近的地方放置一臺性能好、鏈接順暢的副本服務器css

3、添加`Expire/Cache-Control`頭

若是服務器開啓了Expire模塊，服務器就會向瀏覽器響應Expire頭。expire頭的內容是一個時間值。這個值是資源在本地的過時時間。若是當前時間尚未超過資源的過時時間就不會從新發送http請求。
cache-control是http協議中經常使用的頭部之一，它負責頁面的緩存機制。若是該頭部指示有緩存，緩存的內容也會放在本地。其操做流程和expire相似，可是cache-control擁有更多的選項。html

4、啓用gzip壓縮

gzip壓縮就是服務器將內容壓縮以後發送給瀏覽器，瀏覽器對接收到的壓縮文件進行解壓（主流瀏覽器對gzip有很好的支持）。全部的文本內容都應該採用gzip壓縮（例如html、css、javascript、txt、xml、php等）。使用Gzip壓縮能夠減小約40%的網絡流量。java

5、將CSS放在頁面的最上面

CSS即層疊樣式表，後定義的樣式能夠覆蓋原來的樣式，就會產生頁面重繪的問題。在IE中將CSS放在頁面底部就禁止了網頁內容的順序顯示，以避免重繪元素，在低網速的狀況下就只會看到空白頁。Firefox雖然不會組織頁面的顯示。可是頁面下載後部分元素可能須要重畫致使閃爍的問題。web

6、將script放在頁面最下面

通常來講咱們是將js代碼放在head標記內部，可是若是一個腳本執行的時間過長，就會致使瀏覽器崩潰。例如：express

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom 加載順序測試</title>
    <script>
        while(true){

        }
    </script>
</head>
<body>
    This is content!
</body>
</html>

推薦的作法是這樣：瀏覽器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom 加載順序測試</title>
</head>
<body>
    This is content!
    <script>
        while(true){

        }
    </script>
</body>
</html>

以上的2種方式雖然都會致使瀏覽器崩潰，可是第二種會展示出頁面內容，提示了用戶體驗。緩存

7、避免在CSS中使用Expressions

CSS表達式就是CSS屬性的值等於javascript的結果。CSS表達式的計算頻率很高：

在頁面中隨便移動鼠標就能夠輕鬆達到10000+的計算量。在IE6和IE7下執行如下的代碼，能夠看見計算量很是巨大。服務器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS Expression測試</title>
    <script>
        var count = 0;
        function scare () {
            document.getElementById('count').value = count;
            return;
        }
    </script>
    <style>
        div{
            width: expression(this.offsetWidth > 750?scare():scare());
        }
    </style>
</head>
<body>
    移動鼠標時CSS Expression計算了<input type="text" id="count">次
    <div>鼠標在此區域移動</div>
</body>
</html>

8、將js和css放到外部文件中

其實這一條原則和第一條原則有些出入，甚至是對立的，可是從頁面中分離出js和CSS能夠減小頁面的體積，而且增長了頁面的維護性。可是對於一個不常常更新的頁面或者腳本和樣式不多的狀況下就能夠將腳本和樣式文件寫在頁面內部。

9、減小DNS查詢

減小DNS查詢的一個常見作法是緩存DNS。現代瀏覽器自身擁有DNS緩存，IE默認的DNS緩存是30min，Firefox和Chrome默認的DNS緩存時間是60s。緩存時間長的瀏覽器能夠減小DNS的重複查詢，節省時間；緩存時間短的瀏覽器能夠及時響應網站的變化，保證正確性。咱們能夠採用單域或者多域的方式部署站點。

10、最小化js和css

去除沒必要要的空格、格式符、註釋（代碼格式化），例如JQuery庫的壓縮版的體積是94.1k，代碼行數是5行，未壓縮的JQuery的體積是276k，代碼爲10,338行。因此在項目上線的時候應該壓縮js和css使線上的項目是最輕量級的，最大限度提升網站性能。

11、避免重定向

重定向增長了http請求的數目。重定向經常伴隨着2種http狀態碼：

301 Move Permanently：【永久重定向】用戶請求的資源被永久轉義到了別的位置（例如瀏覽器發送a.com的請求，服務器返回301讓瀏覽器請求b.com）
302 Found：【臨時重定向.0】瀏覽器發送的請求服務器找到了，可是不是在原始位置。

12、移除重複的腳本

重複腳本可能致使頁面的潛在問題，例若有如下的html文檔和js文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <input type="text" id="test" value="" />
    <script>
        var number = 0;
    </script>
    <script src="js.js"></script>
</body>
</html>

document.getElementById('test').value = ++number;

當咱們僅僅在頁面中引用一次腳本文件時就會獲得咱們指望獲得的結果，而當咱們重複引用的時候就沒法獲得咱們指望的結果。

十3、配置實體標籤ETag

ETag是實體標籤，屬於http協議，受web服務支持。使用特殊的字符串來標識某個請求資源的版本。用來惟一標識一個資源。當瀏覽器向服務器請求資源的時候若是服務器發現ETag同樣，就會告訴瀏覽器使用本地緩存。

十4、使用AJAX緩存

AJAX請求分爲GET請求和POST請求。POST請求每次都須要服務器進行處理（200OK），因此POST請求的AJAX沒法緩存；而對於GET請求，同一地址的AJAX請求不會重複執行（304 NOT MODIFY）

附：Yslow插件的使用

Yslow是雅虎開發的基於網頁性能分析瀏覽器插件，能夠對網站進行分析給出優化規則。該插件依賴於Firefox和Firebug插件，給Firefox添加組件Yslow後使用F12就能夠看到Yslow選項，如圖：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。