2010-06-22 45 views
1

通過從數據庫提供更小的圖像來提高頁面加載速度是否有意義,而不是在網站使用PHP驅動的情況下發出多個HTTP請求?通過在數據庫中保存圖像來減少http請求?

我想較小的頁面的設計元素,按鈕,縮略圖等畫廊

+3

如何在沒有http請求的情況下從數據庫中獲取圖像? – Naktibalda 2010-06-22 10:54:37

+0

你可以有一個內聯數據URI:http://en.wikipedia.org/wiki/Data_URI_scheme。 – etc 2010-06-22 11:01:59

+0

@Naktibalda:事實上,你可以,但在這種情況下沒有意義。 ;-) – 2010-06-22 11:02:08

回答

10

號自:

  • 瀏覽器只通過HTTP服務器通信,所以你將不得不從數據庫中拉他們,把他們在HTTP,然後將其返回到瀏覽器
  • 這是從數據庫中提取大量二進制數據更昂貴,然後將其從文件系統中提取出來。

如果你想減少HTTP請求,您可以sprite the images,但不這樣做,與內容圖像(其中應該有適當的<img>元素與ALT文本)。

+0

「不要這樣做與內容圖像(應該有正確的元素與替代文字)」 - 這就是爲什麼我們有一個不使用精靈的一般政策。 – Leo 2010-06-22 11:23:00

+0

有很多地方的精靈是一個不錯的選擇(我目前的項目將它們用於按鈕上的背景圖像,每個按鈕有多個狀態)。內容是覆蓋在背景上的純文本。 – Quentin 2010-06-22 11:59:16

+0

我不反對,我推動使用精靈。 – Leo 2010-06-22 12:54:10

0

HTTP請求的數目仍然是瀏覽器是否從從數據庫或定期加載圖像數據的腳本加載圖像相同文件。事實上,從數據庫加載圖像數據而不是靜態文件可能會帶來額外的開銷。

如果您希望減少瀏覽器加載文檔所需的HTTP請求數量,則應該查看CSS Sprites

0

你會節省HTTP的開銷,但你會如何插入圖像的HTML?否則,您仍然需要發出HTTP請求來獲取圖像。

如果您將圖像作爲來自數據庫的byteStream提供,則不允許瀏覽器緩存內容。如果您使用每張圖片的HTTP請求,您可以讓他們緩存內容,但支付價格以執行更多請求。 您還需要考慮從數據庫獲取圖像的時間以及處理它們的時間!

我認爲,在這種情況下,你最好的選擇,是把所有的小圖片中只有一個文件精靈),然後使用CSS來顯示它們。這是高負荷網站所做的。通過這種方式,您只需執行一個請求並獲取所有圖像,瀏覽器就會緩存該文件,這會提高您的性能。您付出的代價是您需要編寫更多CSS,但這只是純文本和相同數量的文件。這是一個雙贏的局面:)

+0

瀏覽器緩存獨立於圖像存儲在服務器上的方式(只需使用正確的HTTP標頭)。 – 2010-06-22 11:00:11

+0

@Marcel Korpel:那不是他說的。 – 2010-06-22 11:01:12

+0

支持在html中插入圖像。 – nothrow 2010-06-22 11:02:34

2

用戶沒有直接連接到數據庫,你不能(當然你可以,但它是如此的醜陋,我忽略它)輸出的圖像HTML中的數據。他們必須在不同的請求上加載。

如果將它們存儲在數據庫中,則需要某些內容才能訪問數據庫,然後將其流出。 它實際上是認真比讓你的httpd服務更糟。如果服務器承載它,則只有核心服務器和文件系統被觸碰。如果它在數據庫中,它是核心服務器,語言連接器(例如mod_php),語言(例如php),數據庫連接和文件系統(數據庫被寫入)。

保持簡單。把它保存爲一個文件。

如果你淹沒在請求:

  • 如果你在Apache考慮使用在類似lighttpd或nginx的服務器。在靜態/動態混合環境中大幅提高效率。你仍然可以保持apache或者你可以完全轉儲它。

  • 將您的圖片轉移到像S3,Akami等CDN。有很多提供商,它通常只會比託管更昂貴一點(這是假設您有很多流量)。

+0

「這實際上嚴重的比讓你的httpd服務它「 - 這個頁面上的基準似乎會挑戰該聲明:http://www.onlineaspect.com/2007/07/10/image-storage-database-or-file-system/ – Leo 2010-06-22 11:31:17

+0

閱讀您鏈接的文章下的評論也是如此。 – nothrow 2010-06-22 11:39:43

+0

@Y:是的,我閱讀了所有的評論,看起來符合我的需求。我的要求不僅僅是簡單地減少HTTP請求,在這種情況下可擴展性不是問題。 – Leo 2010-06-22 11:53:34

1

這是可能的,你可以使用Data URI Scheme在HTML中嵌入圖像。但我懷疑它會贖回,你會減少HTTP請求的數量,但圖像可以緩存在客戶端,所以你會大大增加每個響應的長度。

但是,直接從光盤加載這些文件會更快,而不是從數據庫加載。

+1

不幸的是,跨瀏覽器支持似乎不可靠。 – Leo 2010-06-22 11:19:04

2

你也可以提供來自多個子域的圖像,所以你可以有更多的併發HTTP請求,這可以幫助加快速度。

0

有多種方法來提高網站

  1. 使用備用域名只爲靜態內容的圖像性能。這有兩個好處 - 從你的主域名的Cookie不會隨每個請求發送,和一個單獨的域得到它的連接自己的分配

  2. 圖片組合爲精靈

  3. 配置緩存正確。設置遠期過期頭文件。設置過期標題,以便在訪問網站之間不會下載圖像。當請求圖像時,也可以檢查ETAG,如果它們匹配,則返回302響應,並且不會再次下載內容。

我不明白爲什麼數據庫中的流式圖像比文件系統要好。由於緩存,你的表現數字是主觀的我懷疑。