前端设计师如何降低服务器压力.docx

前端设计师如何降低服务器压力2011-05-24 21:50当一个网站从小流量短期内做到大流量的时候，我想给技术带来最大的问题就是服务器不稳定。同时在线几千IP里面，服务器上的CPU就会经带来 100%，从而造成了访问网站速度下降，特别是一些网络比较慢的用户，此时容易打不开网站。在用户体验和网站本身都是一伤害。作为页面设计者，如何从页面 结构上，在降低服务器连结数的一些经验之谈，希望对大家有用：我们撇开程序运行效率的问题，一个网站如果要做的美观兼实用，肯定少不了一些小图，背景图的功能，同时还有表而上看不到的CSS，JS。一、网站图片优化图片我想是每个网站必备的，不然审美观上过不去；小图标，背景图，登录框等等。当访问一张页面时，每一张图片都是一样连结数，如果你的首页有20张的小图，那就是一个用户访问时，要占有用20个连接数，2千人同时在线时，恐怖啊。解决图片问题就是把所有的小图集成到一个大图里面，如下图：这样就把可以20变为1一个连接数，除了降低连接数，可以加快网页的加载图片，这儿我建议您保存为png-8格式化，因为它同比gif，jpg，png-32要更小，更小就意味着你加载页面的速度快，用户可以更快的看到你网站的内容，一石两鸟。学一下如何调用这些图片：比如要调用会员登录这个图标页面上：a class=login heft=# 会员登录/aCSS上：.login{background:url（ 图片.png） 0 -100px no-repeat; height:30px; width:50px;}!— 0 -100px；指图片所在的位置。Height和width是图标长宽看图标大小而定--这样就完成了对图标的调用，是不是很简单啊，赶快学一下吧。二、网站的CSS优化在CSS优化了，除了降低css大小，像marin，padding，font等一些常用的缩写外面。像上面所有说的backgroud这个也是可以简写的。如下;页面上：pa class=”login” heft=“#” 会员登录/aa class=”reg” heft=“#” 会员注册/aa class=”sell” heft=“#” 我要卖车/aa class=”buy” heft=“#” 我要买车/a/pCSS上：.login{background: url(../images/图片.png) 0 -100px no-repeat; height:30px; width:50px;}.reg{background: url(../images/图片.png) 0 -100px no-repeat; height:30px; width:50px;}.sell{background: url(../images/图片.png) 0 -100px no-repeat; height:30px; width:50px;}.buy{background: url(../images/图片.png) 0 -100px no-repeat; height:30px; width:50px;}改进后.Login,.reg,.sell,.buy{background: url(图片.png) no-repeat; }1.Login{background-position: 0 -100px;}.reg{background-position: 0 -100px;}.sell{background-position: 0 -100px;}.buy{background-position: 0 -100px;}这是css的简写上，可以减少CSS文件大小。为了降低CSS连接数，会把CSS代码直接写在首页的《style》***《/style》，这种情况适合像百度，163，淘宝这种重量级的。常用的写法是link href=css/index.css rel=stylesheet type=text/css /…link href=css/top.css rel=stylesheet type=text/css/我们可以把共用的头部样式写到一个common.css里面，然后在首页里的index.css里面@import url（common.css）;注意：不要在@import url（common.css）;又导入@import url（common1.css）;这样在效果上适得其反。因为在加载首页就会把common.css保存下，当第二次用户访问就直接调用本地的缓存，从而加快速度。三、网站的JS优化为了便于管理，很多人在写JS时，只要是广告就会用JS来代替，代码如下;文字连接的JS调用：script language=javascriptdocument.write（a href=# targ