我爱电脑技术论坛 » 网站建设 » 网页设计者应该从三个方面优化网页

LOK 发表于 2008-5-7 17:18

网页设计者应该从三个方面优化网页

　随着带宽的提高，网页上的对象也越来越多，因此加快网页打开速度还是一个重要的课题。加快网页的打开速度，有三个路径，一是提高网络带宽，二是用户在本机做优化，三是网站设计者对网页做一定的优化。这篇文章站在一个网站设计者的角度，分享一些优化网页加载速度的小技巧。 G4u8fz5j%C6p)F7\7lt

A1lz"gm} 　　一、优化图片 WMh^D
?
M8cptnGL"E.\2u4m
　　几乎没有哪个网页上是没有图片的。如果你经历过56K猫的年代，你一定不会很喜欢有大量图片的网站。因为加载那样一个网页会花费大量的时间。 　

k Id&u$e
r caH~ 　　即使在现在，网络带宽有了很多的提高，56K猫逐渐淡出，优化图片以加快网页速度还是很有必要的。 #vPcah!O

O^si~4TF 　　优化图片包括减少图片数、降低图像质量、使用恰当的格式。 　 w6yLcd&e8RB
*x6N K @?|7xnZ)q%P
　　1、减少图片数：去除不必要的图片。
9I q)]:D9R'G'D/JG `c
:~%T,hep_*e?2y 　　2、降低图像质量：如果不是很必要，尝试降低图像的质量，尤其是jpg格式，降低5%的质量看起来变化不是很大，但文件大小的变化是比较大的。
zH$sWqi _b 3kfn;mS7h4M;q-O&K)kA
　　3、使用恰当的格式：请参阅下一点。
{Az_N#A TUy9aD0q8\/j
R$^
　　因此，在上传图片之前，你需要对图片进行编辑，如果你觉得photoshop太麻烦，可以试试一些在线图片编辑工具。懒得编辑而又想图片有特殊的效果？可以试试用过调用javascript来实现图片特效。 　
A
Ue"f
|:Jq4y u'v'zI#k
　　二、图像格式的选择 　 NX&\B1rN'?

D&C2|ECA 　　一般在网页上使用的图片格式有三种，jpg、png、gif.三种格式的具体技术指标不是这篇文章探讨的内容，我们只需要知道在什么时候应该使用什么格式，以减少网页的加载时间。 #z/~4[
v6]:A6]KX?
　
j(A:\O0v1o#c-zZ 　　1、JPG：一般用于展示风景、人物、艺术照的摄影作品。有时也用在电脑截屏上。
8Rr8A+G#|
3y ~(v+q8o0V 　　2、GIF：提供的颜色较少，可用在一些对颜色要求不高的地方，比如网站logo、按钮、表情等等。当然，gif的一个重要的应用是动画图片。就像用Lunapic制作的倒映图片。 };S S C(Xm9AN:U9T

k0u2L8E+Y\
{5f&? 　　3、PNG：PNG格式能提供透明背景，是一种专为网页展示而发明的图片格式。一般用于需要背景透明显示或对图像质量要求较高的网页上。
"[f)q.slX
k}"@/tY6w 　　三、优化CSS
y%_1E3D$k"uj$y
N@0Y9nD WOCB
　　CSS叠层样式表让网页加载起来更高效，浏览体验也得到提高。有了CSS，表格布局的方式可以退休了。
P|+F!^ _H| +~0e7f4j&x\ @Lvo-N
　　但有时我们在写CSS的时候会使用了一些比较罗嗦的语句，比如这句： g[
fbQo

hNH%N7BV s margin-top: 10px;
's_.G*P@'n9t"P margin-right: 20px;
xq,Aq(LL&N margin-bottom: 10px; 7]7@*nH
i/FW
margin-left: 20px; 6X IQ&V$SV2f#l3H

v9vx^
P2`!| 　　你可以将它简化为：
kB-Z%_od N!{ m(l
8C4G!_A ^;]YA,L 　　margin: 10px 20px 10px 20px;
ogj?!E8mA
uS-}q,q6p 　　又或者这句：
j'u"N@b(Lb5j ;q4Y&qS4`"J!H7N
＜p class="decorated">A paragraph of decorated text＜/p>
.m4M
X6eD&g ＜p class="decorated">Second paragraph＜/p> 8G@zIe3l'\q
＜p class="decorated">Third paragraph＜/p> 6u8y3Z~c$F!^
＜p class="decorated">Forth paragraph＜/p> *jOq\vv

"ABjr3Q0w 　　可以用div来包含： ,] G E!zOH6t

z}Jp+hk0i
Y ＜div class="decorated"> -DZ9J3d8N tn
＜p>A paragraph of decorated text＜/p> m%G^4ThB vr
＜p>Second paragraph＜/p>
|nv{"[P?1lU ＜p>Third paragraph＜/p> mfE llE+Ae
＜p>Forth paragraph＜/p> P,Dv^YG
g/d
＜/div>
1K'ed)`G
qN'?9r
)W@YpC"I.s$\)l 　　简化CSS能去除冗余的属性，提高运行效率。如果你写好CSS后懒得去做简化，你可以使用一些在线的简化CSS工具，比如CleanCSS.

LOK 发表于 2008-5-7 17:19

　随着带宽的提高，网页上的对象也越来越多，因此加快网页打开速度还是一个重要的课题。加快网页的打开速度，有三个路径，一是提高网络带宽，二是用户在本机做优化，三是网站设计者对网页做一定的优化。这篇文章站在一个网站设计者的角度，分享一些优化网页加载速度的小技巧。 K%~%g5\+Mq9F4o
pps3bt]!l'e
　　一、优化图片
8y\w*yZ}7YK &` LY#{1o!q4auxZRf
　　几乎没有哪个网页上是没有图片的。如果你经历过56K猫的年代，你一定不会很喜欢有大量图片的网站。因为加载那样一个网页会花费大量的时间。 　 B8^yJFA$L

,\xHm'i&RT`0pK 　　即使在现在，网络带宽有了很多的提高，56K猫逐渐淡出，优化图片以加快网页速度还是很有必要的。
s#G
S'yr +|q5^mk8NW
　　优化图片包括减少图片数、降低图像质量、使用恰当的格式。 　 ]!r/ZY(@9mV7^UI

T xT-f"r?+M9S9q"E@{ 　　1、减少图片数：去除不必要的图片。 i/kmNQx
7s;Ac'I:p#P*}E
　　2、降低图像质量：如果不是很必要，尝试降低图像的质量，尤其是jpg格式，降低5%的质量看起来变化不是很大，但文件大小的变化是比较大的。
:P9Uo2L%K!]`!p
7u:^:u ?
nGem;s 　　3、使用恰当的格式：请参阅下一点。 *w$s?S`|'U

n:i]@w]#lh] 　　因此，在上传图片之前，你需要对图片进行编辑，如果你觉得photoshop太麻烦，可以试试一些在线图片编辑工具。懒得编辑而又想图片有特殊的效果？可以试试用过调用javascript来实现图片特效。 　
3l&N/e+uR(EN5Z
2N0LE5GY)nj+d 　　二、图像格式的选择 　
&j%o|Q2sO
h yi)J(?1g 　　一般在网页上使用的图片格式有三种，jpg、png、gif.三种格式的具体技术指标不是这篇文章探讨的内容，我们只需要知道在什么时候应该使用什么格式，以减少网页的加载时间。
ez2Oadu G.W 　
4D U?:{*l'\"P 　　1、JPG：一般用于展示风景、人物、艺术照的摄影作品。有时也用在电脑截屏上。
^&Uk&KUU Gee6O"U }F4g5qbG;y
　　2、GIF：提供的颜色较少，可用在一些对颜色要求不高的地方，比如网站logo、按钮、表情等等。当然，gif的一个重要的应用是动画图片。就像用Lunapic制作的倒映图片。
3j:A!nHx Q
%N8Q0}
~.`H 　　3、PNG：PNG格式能提供透明背景，是一种专为网页展示而发明的图片格式。一般用于需要背景透明显示或对图像质量要求较高的网页上。
/cwc i1f4Q
mT_L
B5b(z 　　三、优化CSS t+AHiTx
3Rk:P'@btK ^k/v
　　CSS叠层样式表让网页加载起来更高效，浏览体验也得到提高。有了CSS，表格布局的方式可以退休了。 B^` K$u

._ M0fJ~M i`4f'S*y 　　但有时我们在写CSS的时候会使用了一些比较罗嗦的语句，比如这句： 2Y$J}i]*Ds0R.j4M!`
7E'o3r&q&~ CL zg~S
margin-top: 10px; ~~,{3t Dw
O
EWH@Q
margin-right: 20px; je9B
doZ}5Y9D`
margin-bottom: 10px;
v#w1usa%r?q.u margin-left: 20px; "WJ0e4h!}5e
q$w

0Si z*fys8Z IW+u 　　你可以将它简化为：
/k'P/@8{"~
;ZH!L
k8?f+Zx 　　margin: 10px 20px 10px 20px;

ju+Jz0j
B$a&c h[ 　　又或者这句： 5E$KQkVl0C

I }r|5e+VuCl ＜p class="decorated">A paragraph of decorated text＜/p>
-y LLjt ＜p class="decorated">Second paragraph＜/p>
(cJn)Cf'q)]s&QY&E ＜p class="decorated">Third paragraph＜/p>
#f*S3M?p [/u ＜p class="decorated">Forth paragraph＜/p>
Xz0n3tv?8~*_ :}*Q]m7Ec
　　可以用div来包含：
YTe3o-}}
"Z}#q?4P0\4S3CE*P ＜div class="decorated">
0]^ggq ＜p>A paragraph of decorated text＜/p>
R6RS"Cg9wR ＜p>Second paragraph＜/p>
y S]F4m_R ＜p>Third paragraph＜/p> ,uP5RX#K/g
＜p>Forth paragraph＜/p>
"r g(M5}2}~V ＜/div> r9W:^Z0Xm*p
AV7dw~3Q u
　　简化CSS能去除冗余的属性，提高运行效率。如果你写好CSS后懒得去做简化，你可以使用一些在线的简化CSS工具，比如CleanCSS.

查看完整版本: 网页设计者应该从三个方面优化网页