渲染網(wǎng)站的下載速度的方法發(fā)布者：本站     時(shí)間：2020-04-10 11:04:16

渲染網(wǎng)站的下載速度的方法

用戶(hù)在做是進(jìn)行下去還是退回的決定時(shí)，主要考慮三種速度的整體效果。好的設計者需要找到平衡這三者的方法，進(jìn)而產(chǎn)生理想的下載：從用戶(hù)點(diǎn)擊請求到下一頁(yè)出現只是一眨眼的瞬間。

記?。河脩?hù)的忍耐期限在存取頁(yè)面的第一秒就結束了，而不是在頁(yè)面完成渲染時(shí)。就用戶(hù)經(jīng)驗來(lái)說(shuō)，確定渲染時(shí)間是很有學(xué)問(wèn)的。我有一輛老車(chē)，我不在乎它的外觀(guān)和聲響。我想要的只是能用鑰匙打開(kāi)車(chē)，加油，能開(kāi)走。我的一位有錢(qián)的朋友有一輛Saab車(chē)，只用一分鐘就能達到顛峰速度。我的車(chē)要20分鐘預熱，但是我無(wú)所謂-引擎點(diǎn)著(zhù)火時(shí)我用腳踩加速器，我只要駕駛就夠了，加速的事讓車(chē)自己去考慮吧！

我用攪拌器輪子的例子說(shuō)明實(shí)際速度與感覺(jué)到的速度的重要區別。知道頁(yè)面要有一定時(shí)間渲染用戶(hù)才能看到，設計者可以從布局的觀(guān)點(diǎn)出發(fā)創(chuàng )建成功的頁(yè)面。當瀏覽器窗口一片灰色，什么也不做時(shí)，只要用戶(hù)不問(wèn)：“喂，到底頁(yè)面有多大？”，那么頁(yè)面還在工作。

我要向你展示我是如何增加頁(yè)面的可感覺(jué)的尺寸的。我保持圖形和圖像的尺寸到最小。但是，不是簡(jiǎn)單地減少圖像的顏色數，而是非常注意顏色的安排。

第一頁(yè)：在一行里不要放入所有顏色GIF只是顏色的列表。如果一個(gè)GIF文件有10個(gè)像素高，顏色列表就有10行。如果第一行是100個(gè)白色像素，GIF格式通過(guò)寫(xiě)一次“白”，然后加一條這種顏色再重復99次的注釋。這種方法應在每一行中使用，所以如果第二行是粉紅色，第三行是蘭色都沒(méi)有關(guān)系。換句話(huà)說(shuō)，一行一行地重復白色并不能減少文件大小。實(shí)際上，在一行上有大量顏色的變化。假如第一行在黑和白之間不斷交替- GIF格式不會(huì )通過(guò)加注釋來(lái)減少文件大小-它只是記住白、黑、白、黑，等等。另外，黑白相間的行在一英尺外看只是灰色。當你沿著(zhù)水平方向改變顏色時(shí)，盡量使用更多的相同顏色的片段：20個(gè)白色像素，然后是20個(gè)粉紅色像素，然后是20個(gè)蘭色的，20個(gè)紅色的，20個(gè)綠色的，這樣顏色的索引將是#FFFFFF*20、#FF00FF*20、#0000FF*20、#FF0000*20、#00FF00*20，這樣可以把文件壓縮得更小。

記?。和ㄟ^(guò)使用HTML的HEIGHI和WIDTH標記簡(jiǎn)單地放大圖像不會(huì )增加速度。一個(gè)1*1的蘭色矩形很小，傳輸也比100*100的矩形快。但是把一個(gè)蘭色像素擴展到100*100的矩形，最后卻是一個(gè)24位的100*100的圖像。GIF壓縮只趨向于減少存儲空間和傳輸速度。一旦瀏覽器的渲染引擎解壓你的圖像并顯示到屏幕上，處理實(shí)際圖像的時(shí)間和縮放到相同尺寸的時(shí)間差不多。在使用每一個(gè)技巧時(shí)看看它是否節省時(shí)間。

第二頁(yè)：全是文本，盡可能用文本而不用圖形，但是我的觀(guān)點(diǎn)更極端：我認為應對每個(gè)使用GIF顯示文本的設計者罰款15美圓。用戶(hù)花錢(qián)上網(wǎng)，很慢的下載和渲染速度意味著(zhù)時(shí)間和金錢(qián)的損失。設計者應為選擇最適合文本意義的字體而驕傲。因為用戶(hù)的計算機上不存在“灰姑娘的水晶鞋”這樣的字體。（有多少人的機器上安裝了Wiese字體？）-這樣GIF格式的文本就產(chǎn)生了。如果你用圖像表示文字只是保持字型的一致或控制字型大小和間隔，對于你的頁(yè)面來(lái)說(shuō)沒(méi)有任何意義。所以別這樣做。

要真正地減少下載時(shí)間，把渲染留給用戶(hù)的操作系統。如今，瀏覽器通過(guò)解釋HTML文檔來(lái)渲染頁(yè)面依賴(lài)于操作系統。利用用戶(hù)的計算機產(chǎn)生神奇的字體或形狀是最有效地利用帶寬和處理器的最有效方法-把信息包含在GIF圖像中是一種資源的浪費。用HTML定義矩形（table or layer），用ASCII表示文字，把字體留給操作系統，給每種顏色一個(gè)十六進(jìn)制的值（例如#FF0000代表紅色）。