css以及js的優化和壓縮工具,css文件壓縮

本文目錄一覽：

• 1、如何壓縮javascript和css文件
• 2、有什麼在線工具可以壓縮HTML、CSS、JS？
• 3、js css 壓縮有哪些工具，分析一下優劣勢
• 4、能不能推薦一下CSS的壓縮軟體和js的壓縮軟體？

如何壓縮javascript和css文件

一、壓縮html和javascript：

我們用站長工具的JavaScript-HTML格式化工具，我們打開頁面，我今天要壓縮的文件js文件：common.js ，把js代碼複製到到JavaScript/HTML格式化工具裡面如下圖所示：

點擊下面的「普通壓縮」和「加密壓縮」按鈕，經過我的精心測試，使用「加密壓縮」，對文件壓縮率是最好的，所以點擊「加密壓縮」，壓縮後如圖：

javascript代碼壓縮後，我們就把這些代碼在複製到common.js文件裡面，在吧這個文件上傳到空間原來的位置，進行訪問是否存在一些錯誤，如果沒有什麼問題說明壓縮成功；

我的common.js 文件壓縮前和壓縮後的對比：

壓縮前：

壓縮後：

文件壓縮前和壓縮後確實有明確的減少，說明壓縮確實減少文件的大小，

我們來測試文件壓縮前和壓縮後所有能的時間做對比(我是用火狐插件測試傳輸速度)：

壓縮前所用時間：

壓縮後所用時間：

壓縮前所用時間是：125ms，壓縮後所用時間：78ms ，文件壓縮後給我們節省大量的時間，如果每個js都進行壓縮，我們房子訪問速度會更快的。

(註：html文件和javascript壓縮原來一樣的，當時壓縮html要用到「普通壓縮」按鈕壓縮)

二、壓縮css文件：

我們打開站長工具的Css壓縮/格式化工具頁面，我要壓縮的文件是五色旗保健品商城的css主文件style.css，首先我們打開站長工具的Css壓縮/格式化工具頁面 ，把style.css 代碼放到Css壓縮/格式化工具裡面，如下圖所示：

點擊「壓縮代碼」按鈕後，css代碼壓縮成功，如下圖所示：

後邊就是壓縮後的css代碼，你要不右邊的代碼複製到源文件style.css裡面在上傳到伺服器空間裡面，在訪問一下網，看看網頁樣式有沒有改變，如果有點變化就需要簡單的調試一下，如果沒有變樣，說明你的css壓縮成功了；

下面我們來看看styl.css文件壓縮前和壓縮後的大小和放在訪問速度的大小：

文件大小對比：

壓縮前：

壓縮後：

壓縮前30kb，壓縮後23kb，明顯的文件大小減小了

壓縮前所用時間：

css壓縮前的時間.jpg (7.36 KB, 下載次數: 0)

下載附件

css壓縮前的時間.jpg

2013-11-2 00:35 上傳

壓縮後所用時間：

壓縮前所用時間是：188ms，壓縮後所用時間：93ms ，css壓縮後明顯的節省了95ms；

總結：一個大的網站可能會有很多的javascript和css，如果沒有都進行壓縮的話，一定會減少很多文件大小的，其實減少文件大少並不是很重要，最重要的是，文件容量減少了，能夠快速的提高網站訪問的速度，給用戶帶來好的體驗，我們盡量的把文件壓縮到最小，這樣才有利於用戶快速的打開網站，至此我的五色旗保健品商城優化後，我的每天的訪問量也增加了很多。

有什麼在線工具可以壓縮HTML、CSS、JS？

一般是單獨壓縮的，因為壓縮演算法不一樣。

如果需要一起壓縮可以自己下載webpack,grunt等工具進行配置，執行命令就可以按照指定的要求進行一起壓縮了，而且可以設置壓縮後的保存目錄。

js css 壓縮有哪些工具，分析一下優劣勢

一個工具就是 YUI Compressor，一個來自Yahoo! Developer Network的可用工具。

能不能推薦一下CSS的壓縮軟體和js的壓縮軟體？

借花獻佛：

在網站優化方面,其中一個部分就是壓縮JS以及CSS程序,比較常見的就是DOJO的ShrinkSafe以及jsmin,ESC.不過taobao團隊使用yuicompressor作為底層開發了windows下的jsMinifierjsminifier.rar下載,目前版本2.0,使用yuicompressor+native2ascii對於YAHOO的工具.