當前位置:首頁 >  站長 >  建站經驗 >  正文

通過頁面結構給服務器降低壓力的一點經驗

 2011-05-25 20:55  來源:   我來投稿 撤稿糾錯

  阿里云優(yōu)惠券 先領券再下單

當一個網站從小流量短期內做到大流量的時候,我想給技術帶來最大的問題就是服務器不穩(wěn)定。同時在線幾千IP里面,服務器上的CPU就會經帶來100%,從而造成了訪問網站速度下降,特別是一些網絡比較慢的用戶,此時容易打不開網站。在用戶體驗和網站本身都是一傷害。作為頁面設計者,如何從頁面結構上,在降低服務器連結數的一些經驗之談,希望對大家有用:

一、網站圖片優(yōu)化

圖片我想是每個網站必備的,不然審美觀上過不去;小圖標,背景圖,登錄框等等。當訪問一張頁面時,每一張圖片都是一樣連結數,如果你的首頁有20張的小圖,那就是一個用戶訪問時,要占有用20個連接數,2千人同時在線時,恐怖啊。

解決圖片問題就是把所有的小圖集成到一個大圖里面,如下圖:

這樣就把可以20變?yōu)?一個連接數,除了降低連接數,可以加快網頁的加載圖片,這兒我建議您保存為png-8格式化,因為它同比gif,jpg,png-32要更小,更小就意味著你加載頁面的速度快,用戶可以更快的看到你網站的內容,一石兩鳥。

學一下如何調用這些圖片:

比如要調用會員登錄這個圖標

頁面上:

<a class="login" heft="#"> 會員登錄</a>

CSS上:

.login{background:url("圖片.png") 0 -100px no-repeat; height:30px; width:50px;}<!— 0 -100px;指圖片所在的位置。Height和width是圖標長寬看圖標大小而定-->

.login{background:url("圖片.png") 0 -100px no-repeat; height:30px; width:50px;}

這樣就完成了對圖標的調用,是不是很簡單啊,趕快學一下吧。

二、網站的CSS優(yōu)化

在CSS優(yōu)化了,除了降低css大小,像marin,padding,font等一些常用的縮寫外面。像上面所有說的backgroud這個也是可以簡寫的。如下;

頁面上:

<p><a class=”login” heft=“#”> 會員登錄</a><a class=”reg” heft=“#”> 會員注冊</a><a class=”sell” heft=“#”> 我要賣車</a><a class=”buy” heft=“#”> 我要買車</a></p>

CSS上:

.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優(yōu)化

為了便于管理,很多人在寫JS時,只要是廣告就會用JS來代替,代碼如下;

文字連接的JS調用:

<script language="javascript">document.write("<a href='#' target='_blank'>會員廣告鏈接</a>");</script>

圖片鏈接的文字調用:

<script language="javascript">document.write("<a href='#' target='_blank'><img src='abc.jpg‘ /></a>");</script>

因為JS會把本來1行的代碼變成了三,四行,增加了一些不必要的代碼,還增加了下載請求。

總結:這是針對短期內來的高流量,等高流量穩(wěn)定長漲后,收入增加了,可以買臺服務器把CSS,JS,圖片這些大量文件放到新的服務器。這是種方法能起到治本的效果。

以上只是我一些經驗,希望能為廣大站長提供幫助,寫的并不好,希望大家理解。

本文由優(yōu)優(yōu)二手車網 原創(chuàng),轉載請注名出處。

申請創(chuàng)業(yè)報道,分享創(chuàng)業(yè)好點子。點擊此處,共同探討創(chuàng)業(yè)新機遇!

相關文章

  • 低頁面結構調整的轉變思路

    頁面,是網站結構的組成部分,是留住訪客的關鍵點。因此,頁面結構是關鍵點。

    標簽:
    頁面結構
  • 安徽互聯網沙龍第十期“單頁面結構優(yōu)化”報名開始

    安徽互聯網沙龍結合目前企業(yè)需求,特開展“零起點SEO速成攻略”系列講座,邀請安徽斯百德信息技術有限公司(站長百科)推廣部主管:劉飛,與大家一起學習探討、交流SEO知識。

  • 充分利用站點頁面結構 讓你的關鍵詞排名不落人后

    提升關鍵詞的排名每一位SEOer都有屬于自己的心得,我們可以通過友鏈、可以通過高質量外鏈建設等等。而這些方法都是一些外在的提高關鍵詞排名的方法。筆者認為如果想提高我們的關鍵詞的排名最好最簡單的方法就是從站點的內部結構出發(fā),通過站點的內部結構來提高關鍵詞的

    標簽:
    頁面結構
  • B2B行業(yè)網站“頁面結構”分析及應用

    B2B行業(yè)網站策劃提供給網站設計師的策劃文檔里,一般都表明了每個部份的內容和功能所采用的頁面結構,但是并不代表設計師就能理解策劃者在頁面結構方面的考慮,以及由于有的策劃者對網絡了解不太深入,或者說有一些疏忽,從而在頁面結構上考慮的不周全,這個時候設計師

    標簽:
    頁面結構

熱門排行

信息推薦