Web前端性能優化之一:優化瀏覽器訪問

瀏覽器訪問優化的手段有:

1. 減少http請求

HTTP是無狀態協議,每次HTTP請求都要重新建立通信鏈路。而服務器端每個http請求都要啓動獨立的線程來處理。因此,減少http請求能有效提高訪問性能。

減少HTTP請求的主要手段是合併CSS,javascript和圖片

2. 使用瀏覽器緩存

對於Logo、圖標、CSS和javascript這些靜態資源文件,幾乎是每次HTTP請求都需要的,如果將這些文件緩存在瀏覽器中,第一次加載後,以後就不需要請求了。

通過設置HTTP頭中的Cache-Control和Expires屬性,可以設定瀏覽器緩存。(Tomcat 7配置參考:http://tomcat.apache.org/tomcat-7.0-doc/config/filter.html#Expires_Filter

在某些時候,靜態資源更新需要及時應用到客戶端瀏覽器。這種情況,可以通過更新文件名來實現。例如:

<script type="text/javascript" src="/js/xx.js"></script>

xx.js更改了。這時可以將xx.js重命名。並修改HTML文件中的引用。

<script type="text/javascript" src="/js/xx2.js"></script>

3. 啓用壓縮

Nginx中啓用壓縮:

nginx.conf:

# 啓用壓縮
gzip on;

# 大於1K的才壓縮     
gzip_min_length 1k;

# 緩衝區,用默認就可以
gzip_buffers 4 16k;

# 默認值是1.1,就是說對HTTP/1.1協議的請求才會進行gzip壓縮。如果使用了反向代理,則nginx和後端的upstream server之間是用HTTP/1.0協議通信
gzip_http_version 1.0;

# 壓縮級別,1-10,越大壓縮率越高,開銷也越大
gzip_comp_level 2;

# 進行壓縮的文件類型。js文件有兩種寫法,最好都寫上
gzip_types text/plain application/x-javascript text/css application/xml text/javascript image/jpeg image/gif image/png;

gzip_vary on;

# IE6對Gzip不怎麼友好,不給它Gzip了。
gzip_disable "MSIE [1-6].";

注意:壓縮對服務器會產生一定的壓力,在帶寬充足而服務器資源不足的情況下要權衡考慮。

4. CSS放在頁面最上面,Js放在頁面最下面

瀏覽器會在下載完全部CSS文件之後,纔對頁面進行渲染,因此應該講CSS文件放在頁面最上面,讓瀏覽器儘快下載。javascript則相反,瀏覽器在加載javascript後立即執行,有可能會阻塞整個頁面,造成顯示緩慢,因此javascript最好放在頁面最下面。

CSS文件:

<head>
    ...
    <link href="/css/xx.css" rel="stylesheet" type="text/css" />
    ...
</head>

js文件:

    ...
    <link type="text/javascript" src="/js/abc.js"> 
    ...
</body>

5. 減少Cookie傳輸

Cookie在每次請求和響應中都要傳輸,因此Cookie要儘量小。

另一方面,在請求css和js等靜態資源時,也會帶上Cookie,這時發送Cookie沒有意義。這種情況可以考慮靜態資源使用獨立域名,避免請求靜態資源時發送Cookie。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章