前端優(yōu)化的技巧

最近有幾個(gè)搭檔開通了自己博客，但卻訴苦說(shuō)因?yàn)榈馁I的虛擬空間，所以自己博客網(wǎng)站翻開速度很慢。關(guān)于這種景象，依照一般的狀況來(lái)看，一個(gè)網(wǎng)站的拜訪 翻開速度的快與慢，滿是看這個(gè)網(wǎng)站運(yùn)用的空間裝備，要是這個(gè)空間主機(jī)的裝備不錯(cuò)，那么你的網(wǎng)站拜訪速度就會(huì)很快;相反，要是你的空間主機(jī)的裝備很爛，那么 你的網(wǎng)站拜訪速度就會(huì)很慢。其實(shí)拋去空間主機(jī)的裝備要素不談，咱們站長(zhǎng)或許搜索引擎優(yōu)化人員也能夠從頁(yè)面制造方面著手，然后從現(xiàn)有的資本上進(jìn)步網(wǎng)站的拜訪速度。 假如你還不知道如何才干優(yōu)化網(wǎng)站來(lái)進(jìn)步網(wǎng)站的拜訪速度，那就看一下這六個(gè)小竅門吧，期望對(duì)你能有所協(xié)助!

　　1、利用瀏覽器緩存你的 js 和 CSS 文件：

　　在網(wǎng)站根目錄 .htaccess 中參加以下代碼

　　ExpiresActive on

　　ExpiresDefault “access plus 1 year”

　　這段代碼的意思是對(duì) jpg|gif|png|css|js 發(fā)送 header 緩存頭，進(jìn)行一年的緩存、在瀏覽器不運(yùn)用 ctrl+F5 強(qiáng)制改寫時(shí)，會(huì)一直緩存到時(shí)刻時(shí)刻完畢，僅有惋惜的是假如你更改了js或許css文件有必要把曾經(jīng)的途徑或許文件名更改，能夠這么 base.js?ver=(x) 這種方法下次瀏覽器就會(huì)主動(dòng)讀取并緩存。

　　2、把你的 .js 庫(kù)文件地址替換成 Google CDN的地址：

　　跟著 jquery 和 mootools 等js庫(kù)的運(yùn)用需求加載的.js文件越來(lái)越多也越來(lái)越大，一般傳統(tǒng)的網(wǎng)站是上載到網(wǎng)站自身的目錄。但關(guān)于一個(gè)接近70多KB的jquery.js體積的確不利于網(wǎng)站響應(yīng)速度的提升，此刻就應(yīng)當(dāng)運(yùn)用Google API 。

　　例如：把你的 http://www.***.cn/jquery.x.x.js 替換為 http://ajax.谷歌apis.com/ajax/libs/jquery/1.4.4/jquery.min.js，其意義在于當(dāng)一個(gè) 用戶拜訪過(guò)運(yùn)用 谷歌 api 的網(wǎng)站以后，再次拜訪別的調(diào)用了該api地址的網(wǎng)站就不需求再次加載該文件了。然后到達(dá)提速的意圖。

　　不單是jquery庫(kù)，別的諸如mootools yui 也能夠運(yùn)用這種方法。

　　3、精簡(jiǎn)和優(yōu)化你的 js 和 CSS：

　　盡管有了緩存和gzip保駕護(hù)航，可是關(guān)于 js 和 css 的優(yōu)化卻也是有必要的。咱們寫的javascript腳本和 css 代碼都是經(jīng)過(guò)縮進(jìn)和換行的，合適人類閱覽，可是瀏覽器履行這些腳本不并需求這些無(wú)意義的空格和換行。所以咱們應(yīng)當(dāng)去掉這一些空格換行，乃至縮短 javascript 和 css 里面的變量。諸如此類的優(yōu)化東西有 YUI Compressor 和 Closure Compiler 。這兩個(gè)東西都是根據(jù) java 的，運(yùn)用應(yīng)當(dāng)裝置jdk而且設(shè)置 JAVA_HOME 。(關(guān)于非程序員的網(wǎng)站管理員而言的確有點(diǎn)艱難)

　　此東西能夠不用在本地裝置jdk，直接上載 js 和 css 文件進(jìn)行緊縮，可選擇是選用 YUI Compressor 或 Closure Compiler 。
                                  愛(ài)創(chuàng)課堂--專業(yè)前端技術(shù)培訓(xùn)

                                                               年薪30萬(wàn)不是夢(mèng)
　　4、GZIP 緊縮你的 JS 和 CSS 文件：

　　緊縮js和css能夠經(jīng)過(guò)服務(wù)器動(dòng)態(tài)腳本進(jìn)行也能夠更簡(jiǎn)單的運(yùn)用apache服務(wù)器能夠在網(wǎng)站根目錄 .htaccess 中參加以下代碼

　　AddOutputFilterByType DEFLATE text/html text/css text/plain text/xml application/x-javascript application/json

　　Header append Vary Accept-Encoding

　　這段代碼的意思是調(diào)用服務(wù)器的緊縮模塊對(duì)以上文件輸出之前進(jìn)行GZIP緊縮，gzip的緊縮以后一切文件都應(yīng)當(dāng)能削減30%以上的體積。特別是關(guān)于很多運(yùn)用js的博客有了gzip保駕護(hù)航以后速度能進(jìn)步不少。

　　5、運(yùn)用css sprites兼并圖像

　　一個(gè)網(wǎng)站常常運(yùn)用小圖標(biāo)和小圖像進(jìn)行美化，可是很惋惜這些小圖像占用了很多的HTTP懇求，因而能夠選用sprites的方法把一切的圖像兼并成一張圖像 ，能夠經(jīng)過(guò)有關(guān)東西在線兼并，也能夠在ps中兼并。

　　6、優(yōu)化你網(wǎng)站圖像：

　　很多運(yùn)用的圖像和圖標(biāo)盡管能夠給網(wǎng)站帶來(lái)美輪美奐的作用，圖文混編更是一種十分艷麗的博文展示方法?？蓤D像的體積的確不是很給力，jpg是一種 有損緊縮格局，而png盡管是無(wú)損的，但缺憾是體積頗大。為了削減圖像體積到達(dá)最快的下載速度，每一張圖像上載前應(yīng)當(dāng)優(yōu)化一下體積。