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

我們撇開程序運(yùn)行效率的問題，一個網(wǎng)站如果要做的美觀兼實用，肯定少不了一些小圖，背景圖的功能，同時還有表而上看不到的CSS，JS。

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

圖片我想是每個網(wǎng)站必備的，不然審美觀上過不去；小圖標(biāo)，背景圖，登錄框等等。當(dāng)訪問一張頁面時，每一張圖片都是一樣連結(jié)數(shù)，如果你的首頁有20張的小圖，那就是一個用戶訪問時，要占有用20個連接數(shù)，2千人同時在線時，恐怖啊。

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

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

學(xué)一下如何調(diào)用這些圖片：

比如要調(diào)用會員登錄這個圖標(biāo)

頁面上：

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

CSS上：

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

這樣就完成了對圖標(biāo)的調(diào)用，是不是很簡單啊，趕快學(xué)一下吧。

二、網(wǎng)站的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;}

改進(jìn)后

.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連接數(shù)，會把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"）;又導(dǎo)入@import url（"common1.css"）;這樣在效果上適得其反。

因為在加載首頁就會把common.css保存下，當(dāng)?shù)诙�次用戶訪問就直接調(diào)用本地的緩存，從而加快速度。

三、網(wǎng)站的JS優(yōu)化

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

文字連接的JS調(diào)用：

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

圖片鏈接的文字調(diào)用：

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

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

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

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

本文由優(yōu)優(yōu)二手車網(wǎng)http://www.uu2car.com 原創(chuàng)，轉(zhuǎn)載請注名出處。

標(biāo)簽： CSS優(yōu)化 圖片優(yōu)化 頁面結(jié)構(gòu) 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請與原作者聯(lián)系。