DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁SEO優化 >> SEO優化集錦 >> Web前端性能優化教程01:減少Http請求
Web前端性能優化教程01:減少Http請求
編輯:SEO優化集錦     

 

QQ截圖20150417163243

本文是Web前端性能優化系列文章中的第一篇,主要講述如何減少減少Http請求。完整教程可查看:Web前端性能優化

性能黃金法則

只有10%-20%的最終用戶響應時間花在接收請求的HTML文檔上,剩下的80%-90%時間花在HTML文檔所引用的所有組件(圖片,script,css,flash等等)進行的HTTP請求上。

前言

有關前端性能優化的資料參考於《高性能網站建設》這本書,這一系列的文章可以看作是對這本書的閱讀筆記。

改善響應時間的最簡單途徑就是減少組件的數量,並由此減少HTTP請求的數量。接下來將探討幾個技術實現。

1. 圖片地圖

圖片地圖允許你在一個圖片上關聯多個URL。目標URL的選擇取決於用戶單擊了圖片上的哪個位置。

以導航欄為例,當點擊圖標的時候將打開一個新的窗口。要實現的效果如下圖:

Web前端性能優化 Web前端優化 HTTP請求

我們可以通過使用五個分開的圖片,然後讓每個圖片對應一個超鏈接。然而這樣無疑就產生了5個Http請求,我們的目標是要減少HTTP請求,這裡圖片地圖就可以派上用場了,通過將五個圖片合並為一張圖片,然後以位置信息定位超鏈接,這樣就把HTTP請求減少為一個了,又可以保證設計的完整性和功能的齊全性,實現代碼如下:

  • <img usemap="#map1" border=0 src="">
  • <map name="map1">
  •     <area shape="rect" coords="0,0,31,31" href="javascript:alert('Home')" title="Home">
  •     <area shape="rect" coords="36,0,66,31" href="javascript:alert('Gifts')" title="Gifts">
  •     <area shape="rect" coords="71,0,101,31" href="javascript:alert('Cart')" title="Cart">
  •     <area shape="rect" coords="106,0,136,31" href="javascript:alert('Settings')" title="Settings">
  •     <area shape="rect" coords="141,0,171,31" href="javascript:alert('Help')" title="Help">
  • </map>

2. CSS Sprites

CSS Sprites中文翻譯為CSS精靈,通過使用合並圖片,通過指定css的backgroud-image和backgroud-position來顯示元素。

這裡重點提一下backgroud-position屬性。backgroud-position:x y; x和y可以寫負值也可以寫正值,我們可以想象圖片的左上方為(0,0),以(0,0)坐標向右是為負數的x軸,以(0,0)坐標向下是為負數的y軸。正值的情況則以圖片左下方為(0,0),向右是為正數的x軸,向上是為正數的y軸。

來看一張來自豆瓣的翻頁圖片:

Web前端性能優化 Web前端優化 HTTP請求

可以明顯地看到這裡組合了4張圖片,上面兩個按鈕是初始顯示按鈕樣式,當鼠標移到上面的時候就變為下面兩個按鈕樣式,實現代碼如下:

  • <html>
  • <head>
  •     <title></title>
  •     <style type="text/css">
  •         .left{ background-image:url(2.png); background-position:0px 0px; width:18px; height:18px; }
  •         .right{ background-image:url(2.png); background-position:-18px 0px; width:18px; height:18px; }
  •       &

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved