|
|
代码设置不妥不仅延长网页加载时间,也严重影响蜘蛛程序对网页内容的抓取.通过对网页代码进行清减去掉臃肿杂乱的代码,减小网页文件大小,能够加快网页加载速度,让蜘蛛快速索引到重要内容.整个网页最好不要超过 30K,文字内容最好5K-10K 之间,Google 只对内容的前5000 个字进行索引.' e q, I8 e$ P: J( o# w4 K; ]
. `7 B& P3 Q+ L2 K1 p2 P! G/ K 网页减肥重点涉及以下几个要点:7 }0 ~. r( A' F( h7 ^/ K
l- s& j; K# Z0 a3 D T* Z0 x 1.CSS 样式
8 G c6 r) r+ \, P* E2 o
2 {. z1 K/ E. r4 b 网页制作应通过 CSS(层叠样式表单)来统一定制字体风格.例如:* [4 O3 H( t. b1 l' z5 \3 J; K' F
% [2 R6 h5 E; a0 {
<b style="color:red;font-size:16px;">测试</b>
* R+ j5 T: k& F' Y5 B- d' K* q0 R# ^( \( \* I5 j0 r% R
<div id="divmain" style="font-size:12px;">DIV</b>
( \' m! e8 k# F { Y1 } F; }$ f$ X6 t7 }" D! p& }
<div style="color:red;"> 红色 <b style="color:green;">绿色</b> </div>
; |+ F( ^, v9 L k5 }* f3 K+ w- W. H' Z9 G O
----------------------
8 W( j( p8 h( J9 _, ~) U: i, M, y0 _4 n0 R/ x( l; q! Q
<style type="text/css">
7 S/ Z/ O+ v3 U8 i/ k" z: r& v
9 a& R( h' o, _ b { color:red;font-size:16px; } /*通用对象*/2 m; T4 _7 N+ ` X) } ~: w
" N' M, M+ W" C& a/ \; ^
#divmain {font-size:12px;} /* ID 对象 */
$ d# `3 V. X B6 F5 W R" x4 {; w5 l5 U* X
.red {color:red;}/* 定制类别 */
9 f, a. N0 q6 y! m6 r. m s( }( l
) H5 V M% y# E H$ i! S. o# J .red b {color:green;}/* 定制类别下的 通用对象*/
1 P- Q$ o% k, x& i& q' h6 D: U- Z, A0 F0 y4 t
</style>
3 p4 K) q( j* Y' M5 e! x4 |4 M. ~7 E( i" j
<b>测试</b>
3 w- x) y! h) {8 k
/ ]: ~/ P/ d# A/ n* k* \3 a, n8 ]9 P <div id="divmain">DIV</b>$ A# q1 x0 T( ~! k1 D& {
; E1 r$ e2 f* C2 x, g3 ^ <div class="red"> 红色 <b>绿色</b> </div>) Q: g' q0 g% h' }; w% ]3 d
7 F8 g$ l8 f% |/ s! I# |! P CSS 减肥示例文件 把文字的字体、字号、颜色、背景色等统一起来,不用对每段文字单独进行格式定义,从而减少大量重复性标签.注意把所有css文件单独存放在命名为css的外部文件中.4 x- B6 C P- D8 X6 |6 Q- I4 [9 [8 Q
0 K5 d' d/ P6 l& a 语法:<link rel="stylesheet" type="text/css" href="/common/client.css">- w( R7 }" {) F) F2 i+ t
" ?. Y8 p3 I& f' A5 R 作用的优先级:自身的style属性> 页面的内部style对象> 页面外部css文件.
$ i# Z8 F5 P$ i W' b( t& k+ k4 B. v# c) L4 i
下载:css帮助
" L6 g* M# I3 i/ R- V, N
# `7 O! ]* u$ |0 y7 |( K/ J: U 2.JavaScript :
- ?' R: E" O" F4 C+ |, W
$ e3 v1 r3 S. C+ M& W5 P 1. 简化js 中的函数名称和变量.. g) [& j& w* B# o
: [4 |$ y, o! `+ ^2 a$ _( K' b 例如:Google,里面的函数名称只有 1 个或者 2 个字符.4 ~0 v/ f8 A6 |# ^8 F. A5 P
: j. T- R7 e# U+ M7 Q! d; v
2. 将网页的公共部分转换为脚本并存于js 文件里.这样可以减少文件大小,加快下载速度,同4 m$ w3 [9 ] Z
8 x" p( W/ i" [: a 时也方便管理.不过不能将导航等等优化的关键代码转换成js ,否则搜索引擎搜索不到.0 ]0 F& ~3 f% n1 \1 h
$ Y' @ Y/ H7 \+ s 转换方式:4 ~9 {: N! v. e
2 e; }. A' l [, M0 c; R 原来:<h1>天天收藏夹</h1>
, M$ o) b5 x, r# k9 X
: Z, B4 [: g6 o: _ 脚本:document.write("<h1>天天收藏夹</h1>");7 [5 D' n+ w/ X; o% r
5 q' N1 F% Y$ ^. T0 M! p 例如:华军软件园 源代码,将标题、导航等等都放着js 文件里,将导航放在js 里面就不太好了., u' k( A6 F! Q, w2 \
2 E1 c* D2 d6 w6 J 3.使用 base 标签:2 X5 ^4 G/ R9 `' d
& ]& C& W; i' P& t7 U( @
Base 标签是一个全集控制的标签.: a* U8 z& J ^+ r( R5 e0 I) T
1 j; [8 Z; u" _, q+ l' ]7 N8 p9 q
比如:
- y4 L% Z% F, r+ R8 u; z/ H, z4 O6 a" w" L) C
<A HREF="http://www.7769999.com/html/nanxingke/ " target="_blank">厦门妇科医院</A>* A( Y2 ~9 w% J) x" Q8 Z4 x$ L
) f4 K. K: L: T G0 T, P
<A HREF="http://www.7769999.com/html/zaoxie/" target="_blank">厦门妇科医院</A>
6 K7 f* J0 R+ c: v- B j" Q. G+ z( O; Y6 F/ E! n
其中 http://www.7769999.com 和target="_blank": 多次重复,增加无用的代码.
+ C. v" x, j/ r2 w, C8 w& i) @$ _0 d5 Q) e
修改为:! g. v3 l5 t8 L# r8 s& g- `
* O% U5 {9 W5 A3 y% F4 J <head>
9 A6 n0 Q; {. D' C. @1 G6 O
, \7 s1 T) d/ |. |$ F+ T, W <base href="http://www.7769999.com/" target="_blank">
6 A6 Q& N4 t( H) N/ c1 }7 @/ D1 l" s% }3 D3 X8 H* i' M) I: k" B: e
</head>
- R' |. f* E$ R2 k: v4 a S: X& e- m8 V( u, u- n
<body>8 d) J: x9 I) t1 [7 g# [3 r
" ], \2 b+ ?( D( q! M8 [- O& Z a
<a href="/html/nanxingke/">厦门妇科医院</a>( ~9 [8 Z/ E' _9 b4 G" d. |
5 y" r- M$ @% `: U( [; z9 D" Y <a href="/html/zaoxie/">厦门妇科医院</a>
8 ~% ~7 Y5 H, y% i. t# J/ l. p' c
* V% ?0 R: v6 H; Q </body>) o; ~/ I% y6 J; S9 _; T6 M9 u |( J5 N
$ i' u9 C3 c0 q
4.慎用网页减肥工具' w. C) {: \. I
; A- \5 N( E$ ?) D* B. |8 X& _- l, `3 V
通常的网页减肥工具,对 htm 减肥具有一定的破坏性,常常为了减肥将标签的 后半个标签删除,
' N. u# w. g, c) j$ h" ~+ g; U7 {
f+ N& i/ Q( X3 G$ J 造成网页的不完整.8 f+ m3 b( }, h& ]. O3 g3 [
0 e/ B' g6 U+ P' f2 i7 H6 U
处理前:<table><tr><td>第一行</td></tr><tr><td>第二行</td></tr></table>
4 \$ B# y- m8 N8 s' U' |+ D) y$ [1 b2 B ?. L1 Q* G7 e
处理后:<table><tr><td>第一行<tr><td>第二行</table>1 H/ ?* k: i; Y: L$ W5 a- V
7 s" d) d# b: `# H4 e' M3 b0 [; G' k 处理后 </td></tr> 被去掉了,使页面不完整.( ]- s o ?3 ?+ @4 \: D1 i5 B
$ [3 g& ?/ l0 o' H0 b9 N; Y8 ]8 Q) x$ C
5.删除空格和回车
' P+ A1 v; M& ]5 g( t
9 J3 q$ K0 J/ Y- W s( a( I; p 如果要更加苛刻的减肥,那最后一步就是删除空格了,还可以使文件大小下降很多.
& A; k( i0 ^3 T2 [4 B: J0 s) b
2 x; O6 Z3 u- }- l 不过删除空格后的页面由于没有阶梯排列,将很难读懂.6 L* c r" v( n% J/ P
8 R! u: J ~5 E% v/ n/ \1 F( E6 P
例子:百度首页的代码就非常紧凑. |
|
