我们都清楚,网页的打开速度十分重要,如果网页打开时间超过8秒,那么访客将减少60%.所以,我们需要对网页进行优化,以便能够达到最佳的用户体验. 下面是18条网站加速方法:. m: f) [0 G' n* w# |& q
2 Z8 A5 i8 g7 A% @5 F5 F: z
1、减少HTTP请求
# K, F; a( E* i9 U- B A6 M. U) X3 M0 S! X! R9 ~, y. ~0 k* I; E, _
图片、css、script、flash等等这些都会增加http请求数,减少这些元素的数量就能减少响应时间.把多个JS、CSS在可能的情况下写进一个文件,页面里直接写入图片也是不好的做法,应该写进CSS里,利用 CSS sprites 将小图拼合后利用background来定位./ [& M+ A9 _1 c- R
/ G t f3 ~7 f( u9 Y1 ?
2、设置头文件过期或者静态缓存6 F4 G5 I) |9 p2 L& @
, \& J4 |' z D% q# u: a2 @* R0 [/ n 浏览器会用缓存来减少http请求数来加快页面加载的时间,如果页面头部加一个很长的过期时间,浏览器就会一直缓存页面里的元素.不过这样如果页面里的东西变动的话就要改名字了,否则用户端不会主动刷新,看自己衡量了~ 这项可以通过修改.htaccess文件来实现.3 p! W: F7 h$ g9 c, f
. H* B8 r8 J, B! c
3、Gzip压缩
' O' i3 m+ u7 @' o* h- M1 Q
6 Y5 C* I7 C0 A* E4 x5 F Gzip格式是一种很普遍的压缩技术,几乎所有的浏览器都有解压Gzip格式的能力,而且它可以压缩的比例非常大,一般压缩率为85%.压缩没压缩,可以到 这里 做下测试. B8 ^0 m D$ v# x% L7 t- t! `/ l
) R5 I$ @* ?& \) r+ F- ^ 4、不要在HTML中缩放图片$ X Q* O! k; i
0 Y) {+ g" n J5 n9 S8 l- @% R
图片要用多大的就用多大的,1000X1000的图片被width="100″ height="100″以后,本身的KB数是不会减少的.0 d" }( |* ]( W8 f- w$ E
; w* E0 [. x* A( _; {* G5 ^. J 5、优化图片
- X& h6 c; v, T9 a. t# G: `$ {$ ]7 w) ]8 u3 A
将你的GIF转为PNG8会是个减小体积的好办法,另外有很多方法处理你的JPG及PNG图片以达到优化效果.
' C F) j4 w& u. q; i0 H6 ^
3 Q q" \5 h- ~5 O0 } 6、不要出现404页面
+ y& x& i% J" J3 j! g) r2 M
4 H( d+ Y( R! ^, X% t 站点本身里(非搜索结果)出现404页面,无意义的404页面会影响用户体验并且会消耗服务器资源.8 E) c/ ~; ~7 u: I2 ]7 V7 J$ x
4 p- l, |) q+ [, a! m 7、减小Cookie9 H, h0 C2 x- \3 |- g
! a# x3 d3 {& }# N @. {
Cookie在服务器及浏览器之间的通过文件头进行交换,尽可能减小Cookie体积,设置合理的过期时间,能够很好的提高效率.
( X. I* x$ \+ H2 r
9 h5 ?: t; s! q3 ?- j% Y- D 8、减少iframe数量, j _1 Q' P" J, x
9 K! i/ r8 H* ]" b8 `
需要更有效的利用 ifames.5 j; g5 b1 t+ P1 O8 Y* X1 c
3 o" r: L% x) f7 Y
iframe 优点:有利于下载缓慢的广告等第三方内容,安全沙箱,并行下载脚本
4 G" _4 T) D+ P; v! g0 [- r9 n. E
iframe 缺点:即使为空也会有较大资源消耗,会阻止页面的onload,非语义
# y* m) f4 P( q- P* k/ M4 o* R: U, L" S5 h2 c! l% k
9、尽早的释放缓冲
. g$ l2 c! [7 L* a( ` o7 [% U; \) J2 M( p0 c R& x f
当用户进行页面请求时,服务器端需要花费200到500毫秒时间来拼合HTML,将写在head与body之间,释放缓冲,这样可以将文件头先发送出去,然后再发送文件内容,提高效率.: B+ S$ [; w+ D
3 y) i6 Z1 Z+ t8 o5 L
10、删除重复脚本. t, @1 E" w( r: h% k N* Z- l
2 \2 l6 L: S! ]" x% h
重复调用的代码浏览器并不会识别忽略,而是会再次运算一遍,这当然是大大的浪费.
2 [9 W1 Z. ?$ C s, I4 b3 X, a
% G3 {; j8 C. {% |0 R 11、减小JS和CSS的体积5 T" t6 p. X6 O) v: W$ T9 T* }
$ ~. I, r+ J9 [7 B: a( c
写JS和CSS都是有技巧的,用最少的代码实现同样的功能,减少空白,增强逻辑性,用缩写方式等等,当然也有不少工具也能够帮你实现这一点.4 l/ O* i/ z0 B) x
0 X' j4 S$ A4 q' \# R+ h
12、减少DNS查找
- L0 T' E& y! q* c' ?& J9 f5 \8 D, r }8 j& S5 g6 t
减少网站从外部调用资源,网页加载效率会大大提高.7 s w* C/ I/ Q$ u5 ]0 B
0 B/ U7 j* G5 w# o2 b 13、将JS和CSS外链% D! }% Z7 U `! O! H, Q
4 ?- O6 H: g0 E$ @ 一些较为公用的JS和CSS,我们可以使用外链的形式,譬如我就是从Google外链来的Jquery文件,如果我的浏览者在浏览别的使用了这个外链文件的网站时已经下载并缓存了这个文件,那么他在浏览我的网站的时候就不需要再进行下载了!' o6 V+ m. [3 T5 `& b* ?
% d9 F3 \& m a4 |* e
14、避免CSS表达式' D0 i' I0 U9 r7 Y) b
/ @- ?; V6 _0 X) a3 j CSS表达式很可怕,这个只被IE支持的东西执行时候的运算量非常大,你移动一下鼠标它都要进行重计算的,但有时候为了做浏览器的兼容必须要用到这个||| IE6去死去死!; J+ u4 Q* ^1 J6 E) v0 j+ S( R
, I3 |5 P1 j8 J2 M4 \+ J 15、把CSS放顶部
n) f; ]2 X, O6 l0 |9 d7 i
$ p$ {, `, p s0 l3 N 让浏览者能尽早的看到网站的完整样式.
8 @; X# u8 G% E, s/ R! j% j) l) f [ m0 T1 R$ ^) v. O' {
16、把JS放底部
9 G9 o% D7 u& g# Y7 T7 Y. K P# R) k1 ?) G/ B; ?- |
网站呈现完毕后再进行功能设置,当然这些JS要在你的加载过程中不影响内容表现.
2 |. d/ E/ `" p( C2 X4 W9 h7 D* b' L2 l5 e- p& o8 D I* Y
17、用GET方式进行AJAX请求
1 m0 j' c0 n! H2 K. `5 c5 x! L* b. n, ], i" m" ?
Get 方法和服务器只有一次交互(发送数据),而 Post 要两次(发送头部再发送数据).6 O0 j1 \- J4 @/ ~- U
+ l: Z1 H a6 [' ]# X 18、减少DOM的访问次数6 f( S- c; l+ m$ i: J
" H! J3 L7 \2 c3 R JS访问DOM是很慢的,尽量不要用JS来设置页面布局.1 w8 T0 F! y" I( I5 l
4 t/ e" q# Y, B; }* e 转载请注明:丝袜脚网 www.asxfd.com |
