|
|
代码设置不妥不仅延长网页加载时间,也严重影响蜘蛛程序对网页内容的抓取.通过对网页代码进行清减去掉臃肿杂乱的代码,减小网页文件大小,能够加快网页加载速度,让蜘蛛快速索引到重要内容.整个网页最好不要超过 30K,文字内容最好5K-10K 之间,Google 只对内容的前5000 个字进行索引.3 s4 W! ?7 |# W8 y
$ U7 \6 M1 B4 C; E. ?# H, O
网页减肥重点涉及以下几个要点:
, B, x1 L, O) i3 e
3 R# e* S& m$ G6 ^" Z$ Q 1.CSS 样式0 R. j) I6 {; ~" @
% R5 [0 N! H5 Y; b5 o 网页制作应通过 CSS(层叠样式表单)来统一定制字体风格.例如:7 L$ U3 K( }; @
7 g( a( K! n% V" F/ s) N6 } Y <b style="color:red;font-size:16px;">测试</b>
$ b8 T! O5 Y$ z& c& T4 Y" L" D- Y- [* \% @$ W
<div id="divmain" style="font-size:12px;">DIV</b>
) ~# ]% a. T8 i1 ?# l6 M
- m0 i, D% m. _" |# \+ R <div style="color:red;"> 红色 <b style="color:green;">绿色</b> </div>
" o: E+ P5 x$ l! |- ^$ h2 p8 t8 n, ]" z- ]& _
----------------------2 a: r4 I( P# ^1 a4 m
/ x3 r# c' N4 q5 [+ [; N, Z
<style type="text/css">4 F% @& N, M% p, _& z
2 T; C" c' R9 E7 e8 C( t% F9 T b { color:red;font-size:16px; } /*通用对象*/
- X% v* ?5 R7 s9 q) ~' i
; G) q& S1 r; I1 ^, X #divmain {font-size:12px;} /* ID 对象 */
e% m$ d4 W \7 d" r+ d5 {( K, j+ B/ u5 w: G
.red {color:red;}/* 定制类别 */
* |6 z3 o6 c- D! V4 Y/ T+ E8 p$ `. O0 {9 R+ W
.red b {color:green;}/* 定制类别下的 通用对象*/
d# w& I8 ~ A, w# r& ]
/ g% e/ G8 [9 ~. C9 n9 x& w </style>
* X# |5 I% C X* O8 `& Z$ K; G
( U% e7 G8 i" J4 Z6 a4 o* Y <b>测试</b>* b5 _8 {8 D* _; }
& r+ h: J* B" z8 N6 B <div id="divmain">DIV</b># J( ? k+ }% Z9 {0 Z
2 T3 |4 W: ]& [* D <div class="red"> 红色 <b>绿色</b> </div>
, O% x; n) D' p; a9 k v# c9 q/ _2 C1 j1 ~8 A; \
CSS 减肥示例文件 把文字的字体、字号、颜色、背景色等统一起来,不用对每段文字单独进行格式定义,从而减少大量重复性标签.注意把所有css文件单独存放在命名为css的外部文件中.) X% Q$ U( b. b x1 g" S+ t0 S: z
~' t- C9 R# n 语法:<link rel="stylesheet" type="text/css" href="/common/client.css">
" T2 X% F# O+ X6 x( H/ x1 u# `) N3 s+ Z9 e/ z1 S. b5 ^
作用的优先级:自身的style属性> 页面的内部style对象> 页面外部css文件.
& A/ H6 r# v0 s# g- {% Y) Z, T: {; N7 a) N
下载:css帮助, r7 ?+ f% I/ f) M8 m; I
! i5 I; F9 ?) A( b1 N' ] 2.JavaScript : A2 E9 P" X5 l7 P8 N1 n4 ~
5 Q% A/ X6 @ b% t
1. 简化js 中的函数名称和变量.
( W- j3 I. b! Z/ Q6 L9 N1 w: _1 d# D& Z9 h7 w0 ?( B8 v
例如:Google,里面的函数名称只有 1 个或者 2 个字符.8 p h+ r: ?% W, \" s8 [' }' ^3 X: w
" p7 g0 T, p# I' |5 T4 d$ R
2. 将网页的公共部分转换为脚本并存于js 文件里.这样可以减少文件大小,加快下载速度,同
" F k- T5 O" T# G8 d3 P; z% z7 v8 f" _. b5 v
时也方便管理.不过不能将导航等等优化的关键代码转换成js ,否则搜索引擎搜索不到.5 t( g% {2 q1 _4 d# ^
( ]4 V& C& z7 R, T+ q1 Z' W3 i+ F
转换方式:' ~* |' q+ U; S4 W% ?+ x: M1 ^
; y8 e7 b. I1 Z1 m. V
原来:<h1>天天收藏夹</h1>
- f8 ^4 A" o, f- t9 k d' D2 J) q; ]5 G7 f0 P' Z0 F/ Z5 r* n1 R+ ~
脚本:document.write("<h1>天天收藏夹</h1>");; I) `4 w8 g9 r9 Q$ T
5 J+ {4 y, i0 ~, O, {, N 例如:华军软件园 源代码,将标题、导航等等都放着js 文件里,将导航放在js 里面就不太好了.
- ?" Q/ G u: V' K& J0 a" S
( T$ S& N! E9 Y) U# j$ T 3.使用 base 标签:1 S$ W0 f, T/ U( g! s
) ?1 t: n! H$ I$ o
Base 标签是一个全集控制的标签.! W( o* v) }! }& T; L2 @) o8 g
4 r/ Z: R0 j4 Z
比如:
" D. S/ t5 m Q# \* `) E2 @
& Q1 H2 y; ]. V* E: J/ d <A HREF="http://www.7769999.com/html/nanxingke/ " target="_blank">厦门妇科医院</A>' F* S) |8 S2 O9 H- R3 g2 Y
. T& }: \% Q) d7 E, w <A HREF="http://www.7769999.com/html/zaoxie/" target="_blank">厦门妇科医院</A>
o# v ]* q& X1 r9 \( V; U g) R" D3 E) F7 W6 P
其中 http://www.7769999.com 和target="_blank": 多次重复,增加无用的代码.
% g0 ~' @, p# d) f1 ]' B) Z) m) Z: ?$ S7 q, K; S
修改为:
0 z, @! K+ I5 W7 d& s: y8 M, d3 ?* F0 f3 C5 L! q3 j) C; P0 P
<head>
, x0 T! _ p4 Q, k
. ^: p! k1 ]9 o: b0 W <base href="http://www.7769999.com/" target="_blank">) c5 j6 g: J) I& M: H9 B4 [
g! o8 b6 z2 ~. @4 ]1 d" y </head>5 v" v% v6 V1 ]6 ~: i
i% Z- X7 t8 o) N. x; F3 ]8 { <body>
( t. g+ h! F- p6 G0 w B; I, j5 U. D% d# }- E( ~
<a href="/html/nanxingke/">厦门妇科医院</a>. z0 P1 |2 f' ?( v
9 @! |. h6 s/ X! a# G <a href="/html/zaoxie/">厦门妇科医院</a> d4 H. @% I+ P) a% F9 U+ ^
* I# @$ j7 y: g/ q ~6 W& D" } </body>0 t* t2 o; H1 L/ d, S
9 \ {0 S* T' j' d0 o
4.慎用网页减肥工具( s3 @ w. X$ n) M1 w1 Q
' ~& g+ }8 t2 M. M$ q. ?1 ]
通常的网页减肥工具,对 htm 减肥具有一定的破坏性,常常为了减肥将标签的 后半个标签删除,2 z% O7 l. i2 e; [/ ?1 T
( {3 a4 M1 D& N5 Y 造成网页的不完整.
5 V! j% H9 }# C2 e ^; d" r/ p [7 F+ m) U) E2 y! S' v+ q9 r; t
处理前:<table><tr><td>第一行</td></tr><tr><td>第二行</td></tr></table>, p) a+ z' p- R: j% L! D' y
+ p- s/ ^6 v( [ 处理后:<table><tr><td>第一行<tr><td>第二行</table>4 h# h& q7 L8 l$ T+ D6 u2 p
$ \) E+ S- z8 O I0 c' u
处理后 </td></tr> 被去掉了,使页面不完整.
' Q+ R! t& S3 U) o0 V# G$ v/ O/ k/ n& }) _
5.删除空格和回车
$ e; m/ B+ h+ e3 m/ A4 j, R! @3 i$ c
* b$ D' t& u: S# `% A 如果要更加苛刻的减肥,那最后一步就是删除空格了,还可以使文件大小下降很多./ Y* c% `7 ], x4 i2 r
4 w& [9 }4 W- A 不过删除空格后的页面由于没有阶梯排列,将很难读懂.
8 |- I3 G- x% \* l+ _) d+ | Y0 \7 g7 z2 d0 l3 o
例子:百度首页的代码就非常紧凑. |
|
