DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 前端技巧 >> 提高網站訪問速度的六種方法
提高網站訪問速度的六種方法
編輯:前端技巧     

1.把你的 .js 庫文件地址替換成 Google CDN的地址:
(google apis目前在中國地區訪問不是很穩定,不是很建議使用這條。)
隨著 jquery 和 mootools 等js庫的使用需要加載的.js文件越來越多也越來越大,通常傳統的網站是上傳到網站本身的目錄。但對於一個接近70多KB的jquery.js體積確實不利於網站響應速度的提升,此時就應該使用Google API .
把你的 http://www.cnblogs.com/jquery.x.x.js 替換為 http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js的意義在於當一個用戶訪問過使用 google api 的網站之後,再次訪問其他調用了該api地址的網站就不需要再次加載該文件了。從而達到提速的目的。
不單是jquery庫,其他諸如mootools  yui 也可以使用這種方式。
推薦一個網站 ( http://scriptsrc.net/  ) 這個網站收集Google 提供的 js API路徑。直接點擊復制就可以獲取到最新版的文件路徑。

2.精簡和優化你的 js 和 CSS:
雖然有了緩存和gzip保駕護航,但是對於 js 和 css  的優化卻也是必須的。我們寫的javascript腳本和 css 代碼都是經過縮進和換行的,適合人類閱讀,但是浏覽器執行這些腳本不並需要這些無意義的空格和換行。所以我們應該去除這一些空格換行,甚至縮短 javascript 和 css 裡面的變量。諸如此類的優化工具有 YUI Compressor 和 Closure Compiler 。這兩個工具都是基於 java 的,使用應該安裝jdk並且設置 JAVA_HOME 。(對於非程序員的網站管理員而言確實有點困難)
推薦一個地址 ( http://sweet.fengyin.name/?hl=zh-CN )
此工具可以不用在本地安裝jdk,直接上傳 js 和 css 文件進行壓縮,可選擇是采用 YUI Compressor 或 Closure Compiler 。
通過 YUI Compressor 或 Closure Compiler 和 壓縮的之後的代碼如
function hello(name) {
  alert('hello 博客' + name);
}
hello('園');
它會變成
function hello(a){alert("hello 博客, "+a)}hello("園")
把你的縮進和空行去掉的同時也縮短裡面的變量名稱,這種優化方式是不可逆的,所以使用這兩種壓縮之前請備份一份源文件方便以後的修改。

3.GZIP 壓縮你的 JS 和 CSS 文件 ::

壓縮js和css可以通過服務器動態腳本進行也可以更簡單的使用apache服務器可以在網站根目錄 .htaccess 中加入以下代碼
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/css text/plain text/xml application/x-javascript application/json
Header append Vary Accept-Encoding
</IfModule>
這段代碼的意思是調用服務器的壓縮模塊對以上文件輸出之前進行GZIP壓縮,gzip的壓縮之後所有文件都應該能減少30%以上的體積。特別是對於大量使用js的博客有了gzip保駕護航之後速度能提高不少。

4.緩存你的 js 和  CSS 文件 ::
在網站根目錄 .htaccess 中加入以下代碼
<ifmodule mod_expires.c>
<filesmatch "\.(jpg|gif|png|css|js)$">
ExpiresActive on
ExpiresDefault "access plus 1 year"
</filesmatch>
這段代碼的意思是對 jpg|gif|png|css|js 發送 header 緩存頭,進行一年的緩存、在浏覽器不使用 ctrl+F5 強制刷新時,會一直緩存到時間時間結束,唯一遺憾的是如果你更改了js或者css文件必須把以前的路徑或者文件名更改,可以這樣 base.js?ver=(x) 這種方式下次浏覽器就會自動讀取並緩存。
5.使用css sprites合並圖片
 一個網站經常使用小圖標和小圖片進行美化,但是很遺憾這些小圖片占用了大量的HTTP請求,因此可以采用sprites的方式把所有的圖片合並成一張圖片 ,http://csssprites.com/ 可以通過這個網址在線合並,也可以在ps中合並。
更多 css sprites 的資料請查看 http://baike.baidu.com/view/2173476.htm

6.優化你網站圖片(圖片)::
大量使用的圖片和圖標雖然可以給網站帶來美輪美奂的效果,圖文混編更是一種非常絢麗的博文展現方法。可圖片的體積確實不是很給力,jpg是一種有損壓縮格式,而png雖然是無損的缺憾是體積頗大。為了減少圖片體積達到最快的下載速度,每一張圖片上傳前應該優化一下體積.專注於前端的 yslow 有一個工具叫  smushit
http://www.smushit.com/ysmush.it/
此工具是一個無損壓縮圖片的工具,可以把你的圖片在保持原質量不變的前提下優化體積。而這種優化體積通常在 10% 以上.意味著
一張30KB的圖片優化後只有 27KB 或者更少……

總結:
以上6種優化方法都是前端的,前端優化的意義在於減少http請求,減少網站前端程序組成的體積。
其實在後端優化也必不可少減少更多的數據庫查詢,通過諸如memcache內存緩存進行常調用用的數據緩存才能獲得最快的速度。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved