站長資訊平臺

前端設計師如何降低服務器壓力

2019-03-18 來源：優(yōu)優(yōu)二手車網

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

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

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

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

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

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

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

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

頁面上：

CSS上：

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

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

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

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

頁面上：

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，淘寶這種重量級的。

常用的寫法是

…

我們可以把共用的頭部樣式寫到一個common.css里面，然后在首頁里的index.css里面

@import url（"common.css"）;