當(dāng)我們的網(wǎng)站內(nèi)容多了之后,我們打開(kāi)自己的網(wǎng)站就會(huì)非常的慢,有很多人呢就會(huì)換好的服務(wù)器,和增加帶寬;其實(shí)不是這樣的,不妨我通過(guò)一些優(yōu)化減少占用服務(wù)器和寬帶的資源,從而提高網(wǎng)站打開(kāi)得速度;
我想大家都接觸過(guò)Javascript和CSS吧,網(wǎng)站大量的特性都會(huì)用到Javascript和CSS文件,如果網(wǎng)站做大了,這些文件也會(huì)越來(lái)越多,這些文件一多了,就要影響到網(wǎng)站打開(kāi)得速度,怎么解決這個(gè)問(wèn)題呢?我們就要顯示是壓縮Javascript和CSS文件,減少Javascript和CSS文件的大小,從而提高我們網(wǎng)站打開(kāi)速度;
我在這里給大家介紹一款html,javascript,css 壓縮工具,今天就以這個(gè)五色旗保健品商城為例為大家講解:
一、壓縮html和javascript:
我們用站長(zhǎng)工具的JavaScript-HTML格式化工具,我們打開(kāi)頁(yè)面,我今天要壓縮的文件js文件:common.js ,把js代碼復(fù)制到到JavaScript/HTML格式化工具里面如下圖所示:
點(diǎn)擊下面的“普通壓縮”和“加密壓縮”按鈕,經(jīng)過(guò)我的精心測(cè)試,使用“加密壓縮”,對(duì)文件壓縮率是最好的,所以點(diǎn)擊“加密壓縮”,壓縮后如圖:
javascript代碼壓縮后,我們就把這些代碼在復(fù)制到common.js文件里面,在吧這個(gè)文件上傳到空間原來(lái)的位置,進(jìn)行訪問(wèn)是否存在一些錯(cuò)誤,如果沒(méi)有什么問(wèn)題說(shuō)明壓縮成功;
我的common.js 文件壓縮前和壓縮后的對(duì)比:
壓縮前:
壓縮后:
文件壓縮前和壓縮后確實(shí)有明確的減少,說(shuō)明壓縮確實(shí)減少文件的大小,
我們來(lái)測(cè)試文件壓縮前和壓縮后所有能的時(shí)間做對(duì)比(我是用火狐插件測(cè)試傳輸速度):
壓縮前所用時(shí)間:
壓縮后所用時(shí)間:
壓縮前所用時(shí)間是:125ms,壓縮后所用時(shí)間:78ms ,文件壓縮后給我們節(jié)省大量的時(shí)間,如果每個(gè)js都進(jìn)行壓縮,我們房子訪問(wèn)速度會(huì)更快的。
(注:html文件和javascript壓縮原來(lái)一樣的,當(dāng)時(shí)壓縮html要用到“普通壓縮”按鈕壓縮)
二、壓縮css文件:
我們打開(kāi)站長(zhǎng)工具的Css壓縮/格式化工具頁(yè)面,我要壓縮的文件是五色旗保健品商城的css主文件style.css,首先我們打開(kāi)站長(zhǎng)工具的Css壓縮/格式化工具頁(yè)面 ,把style.css 代碼放到Css壓縮/格式化工具里面,如下圖所示:
點(diǎn)擊“壓縮代碼”按鈕后,css代碼壓縮成功,如下圖所示:
后邊就是壓縮后的css代碼,你要不右邊的代碼復(fù)制到源文件style.css里面在上傳到服務(wù)器空間里面,在訪問(wèn)一下網(wǎng),看看網(wǎng)頁(yè)樣式有沒(méi)有改變,如果有點(diǎn)變化就需要簡(jiǎn)單的調(diào)試一下,如果沒(méi)有變樣,說(shuō)明你的css壓縮成功了;
下面我們來(lái)看看styl.css文件壓縮前和壓縮后的大小和放在訪問(wèn)速度的大?。?br/>文件大小對(duì)比:
壓縮前:
壓縮后:
壓縮前30kb,壓縮后23kb,明顯的文件大小減小了
壓縮前所用時(shí)間:
壓縮后所用時(shí)間:
壓縮前所用時(shí)間是:188ms,壓縮后所用時(shí)間:93ms ,css壓縮后明顯的節(jié)省了95ms;
總結(jié):一個(gè)大的網(wǎng)站可能會(huì)有很多的javascript和css,如果沒(méi)有都進(jìn)行壓縮的話,一定會(huì)減少很多文件大小的,其實(shí)減少文件大少并不是很重要,最重要的是,文件容量減少了,能夠快速的提高網(wǎng)站訪問(wèn)的速度,給用戶帶來(lái)好的體驗(yàn),我們盡量的把文件壓縮到最小,這樣才有利于用戶快速的打開(kāi)網(wǎng)站。