優(yōu)化加速你的網(wǎng)站
發(fā)布時間：2008-09-23 瀏覽： 次
圖像可值上千個字-特別在網(wǎng)上，一個簡單的圖像下載的時間相當于若干頁下載的時間。到網(wǎng)上去看看，你會發(fā)現(xiàn)大塊的下載時間來自于圖像文件。
優(yōu)化圖像
第一：網(wǎng)頁訪問者往往沒有耐心。你的圖像可能很酷，但是如果她們對于快速下載來說太豐滿，很少有人會堅持到最后以求一睹她們的尊容。幸運的是，網(wǎng)頁設(shè)計者可以使用一些技巧和優(yōu)化來加速圖像和頁面的下載。
第二：不必要的就不要其實沒有什么特別的技巧。做其它事之前，從你的頁面中把所有多余的圖像去掉。這里“多余”不是指你們公司的標志或你們辦公室的地圖。我們是指那個精明的、在“發(fā)郵件”旁邊的動畫信封。也許在你的頁面底部還放著隨處可見的NetscapeNavigator和Internet Explorer按鈕。說實話，有多少人沒聽說過這些產(chǎn)品呢？
在網(wǎng)站中減少一個瑣碎的10KB的圖形文件可能對整個網(wǎng)站改進不大。但是如果你的整個頁面才40KB，減少10KB就可以減少25%的下載時間-減少一個跳舞嬰兒的按鈕還是合算的。
如果你的網(wǎng)頁確實需要削減，可以考慮用文本“提交”按鈕代替圖形“提交”按鈕。用靜態(tài)圖形代替動態(tài)GIF圖形可以減少下載時間。最后，一些神奇的“header”圖形可以用和標記代替。
第三：GIF文件和JPEG文件除非你想得到ARCHIE或GOPHER一樣的火箭速度，你總會用到一些圖形。遵守一些創(chuàng)建圖像的規(guī)則，你的頁面下載的時間就會可行。
開始時，確定一個圖像用GIF格式還是JPEG格式。這看起來很基本，但是還有一大部分網(wǎng)頁犯這樣的錯誤。
GIF用在看起來干脆整潔的小圖形上是很完美的，但是不會超過256色。GIF也可存為“透明色”-允許圖形有不規(guī)則的邊界。簡單的公司標志、小按鈕和導航條是應用GIF圖形格式的很好的例子。不象JPEG，GIF是一種無損失的壓縮格式，所以你的圖形不會變得模糊不清。如果你在掃描有詳細細節(jié)的地圖，應該選擇GIF格式。不過，如果圖片很大，GIF文件會很大，下載時間也會很長。
你不能從根本上壓縮GIF文件，但是可以減少位深，即限制顏色數(shù)。給定位深的顏色數(shù)等于2的位深次冪（即，8位=256色）。顏色數(shù)越少，圖像的字節(jié)數(shù)越少。假設(shè)你正在建一個可口可樂的網(wǎng)站，可以把很多標志的位深減少到3或4位（紅、白，或許還需要這兩種顏色的陰影色來使邊界光滑）?？梢杂肈ebabelizer軟件改變位深。
JPEG文件可以顯示幾千種顏色，而且壓縮率比GIF文件高。它們很適合照片方式的圖像。不過壓縮成JPEG文件時會損失一些照片的細節(jié)。
第四：合適的尺寸當你使用圖形編輯器時，保證圖形尺寸（72dpi）與將要在網(wǎng)頁上顯示的相同。在HTML中，用標記的WIDTH和HEIGHT屬性重述圖像的實際尺寸。這可以使瀏覽器在圖像下載時同時呈現(xiàn)頁面的其余部分-于是人們在等待圖像是有其它東西讀-并且保證在“關(guān)閉圖像”瀏覽時可以看到正確的頁面布局。
如果在頁面中使用表格，圖像尺寸非常重要：因為沒有定義尺寸的圖像會迫使瀏覽器清除和重繪頁面。這種情況發(fā)生在當瀏覽器按照和
| 來建造表格，然后卻發(fā)現(xiàn)表格單元中的圖像沒有尺寸參數(shù)卻太大而不能放在表格中時。瀏覽器只得重繪表格來容納如此笨拙的圖像。效率低下的頁面重繪浪費時間，而且用戶看到不斷消失和重繪的頁面時也會不高興。
使用WIDTH和HEIGHT時，最重要的是不要用它們調(diào)整頁面圖形的大小或形狀。通過HTML調(diào)整大小是很差勁的，有兩個原因。如果你放大圖像，你會得到一幅有鋸齒的圖片。
用HTML使圖像變小不是一直很壞，但在表現(xiàn)上很差。因為瀏覽器下載的數(shù)據(jù)比實際要顯示的圖像多，于是增加了下載時間。
第五：緩存是你的朋友有一個使圖像下載更快的重要技術(shù)。那些在網(wǎng)站中重復出現(xiàn)的圖像-比如通用標志、頁首或?qū)Ш綏l-不必一遍一遍地下載。缺省地，Netscape和Internet Explorer在RAM或硬盤上設(shè)置緩存來存儲最近用到的圖像。如果瀏覽器認識是相同的文件名，它會讀緩存，而不是從網(wǎng)上下載。這種方法大大地提高了效率，以至于很多自動記時程序無法識別-你只好用跑表自己測測了。
既然客戶端的緩存如此有用，在設(shè)計網(wǎng)頁時就應考慮到瀏覽器的緩存。例如，如果網(wǎng)站有大量相似的頁首圖形，應試圖把它進行分割，使其中不變的部分能從緩存中立刻讀出來。雖然在每頁還要調(diào)用一個新圖，因為這個圖很小，所以下載很快。
最后，把你的圖像放在一個地方，最好在你的服務(wù)器上。這可以減少DNS查找的時間。另外，如果你要存儲圖像的一個或幾個服務(wù)器崩潰，將是一件很不幸的事。
下載速度
用戶在做是進行下去還是退回的決定時，主要考慮三種速度的整體效果。好的設(shè)計者需要找到平衡這三者的方法，進而產(chǎn)生理想的下載：從用戶點擊請求到下一頁出現(xiàn)只是一眨眼的瞬間。
記?。河脩舻娜棠推谙拊诖嫒№撁娴牡谝幻刖徒Y(jié)束了，而不是在頁面完成渲染時。就用戶經(jīng)驗來說，確定渲染時間是很有學問的。我有一輛老車，我不在乎它的外觀和聲響。我想要的只是能用鑰匙打開車，加油，能開走。我的一位有錢的朋友有一輛Saab車，只用一分鐘就能達到顛峰速度。我的車要20分鐘預熱，但是我無所謂-引擎點著火時我用腳踩加速器，我只要駕駛就夠了，加速的事讓車自己去考慮吧！
我用攪拌器輪子的例子說明實際速度與感覺到的速度的重要區(qū)別。知道頁面要有一定時間渲染用戶才能看到，設(shè)計者可以從布局的觀點出發(fā)創(chuàng)建成功的頁面。當瀏覽器窗口一片灰色，什么也不做時，只要用戶不問：“喂，到底頁面有多大？”，那么頁面還在工作。
我要向你展示我是如何增加頁面的可感覺的尺寸的。我保持圖形和圖像的尺寸到最小。但是，不是簡單地減少圖像的顏色數(shù)，而是非常注意顏色的安排。
第一頁：在一行里不要放入所有顏色GIF只是顏色的列表。如果一個GIF文件有10個像素高，顏色列表就有10行。如果第一行是100個白色像素，GIF格式通過寫一次“白”，然后加一條這種顏色再重復99次的注釋。這種方法應在每一行中使用，所以如果第二行是粉紅色，第三行是蘭色都沒有關(guān)系。換句話說，一行一行地重復白色并不能減少文件大小。實際上，在一行上有大量顏色的變化。假如第一行在黑和白之間不斷交替- GIF格式不會通過加注釋來減少文件大小-它只是記住白、黑、白、黑，等等。另外，黑白相間的行在一英尺外看只是灰色。當你沿著水平方向改變顏色時，盡量使用更多的相同顏色的片段：20個白色像素，然后是20個粉紅色像素，然后是20個蘭色的，20個紅色的，20個綠色的，這樣顏色的索引將是#FFFFFF*20、#FF00FF*20、#0000FF*20、#FF0000*20、#00FF00*20，這樣可以把文件壓縮得更小。
記?。和ㄟ^使用HTML的HEIGHI和WIDTH標記簡單地放大圖像不會增加速度。一個1*1的蘭色矩形很小，傳輸也比100*100的矩形快。但是把一個蘭色像素擴展到100*100的矩形，最后卻是一個24位的100*100的圖像。GIF壓縮只趨向于減少存儲空間和傳輸速度。一旦瀏覽器的渲染引擎解壓你的圖像并顯示到屏幕上，處理實際圖像的時間和縮放到相同尺寸的時間差不多。在使用每一個技巧時看看它是否節(jié)省時間?！?
第二頁：全是文本，盡可能用文本而不用圖形，但是我的觀點更極端：我認為應對每個使用GIF顯示文本的設(shè)計者罰款15美圓。用戶花錢上網(wǎng)，很慢的下載和渲染速度意味著時間和金錢的損失。設(shè)計者應為選擇最適合文本意義的字體而驕傲。因為用戶的計算機上不存在“灰姑娘的水晶鞋”這樣的字體。（有多少人的機器上安裝了Wiese字體？）-這樣GIF格式的文本就產(chǎn)生了。如果你用圖像表示文字只是保持字型的一致或控制字型大小和間隔，對于你的頁面來說沒有任何意義。所以別這樣做。
要真正地減少下載時間，把渲染留給用戶的操作系統(tǒng)。如今，瀏覽器通過解釋HTML文檔來渲染頁面依賴于操作系統(tǒng)。利用用戶的計算機產(chǎn)生神奇的字體或形狀是最有效地利用帶寬和處理器的最有效方法-把信息包含在GIF圖像中是一種資源的浪費。用HTML定義矩形（table or layer），用ASCII表示文字，把字體留給操作系統(tǒng)，給每種顏色一個十六進制的值（例如#FF0000代表紅色）。
此時，我們還不能畫圓，我們只有Times, Courier和Helvetical/Arial幾種字型可用。但是用好這幾種字型是我們設(shè)計快速頁面的關(guān)鍵。對于復雜的多邊形，漂亮的字體和照片，只好用GIFJPEG圖形來犧牲下載時間了。
資訊推薦
關(guān)于我們about fang yue
案例展示case
新聞資訊news
版權(quán)所有：廣州方悅信息科技有限公司 Copyright © 2012-2015 方悅互動 ALL Right Reserved. 粵ICP備14072645號
|
