html代碼壓縮在線工具

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

B. 請大家介紹一款最好的圖片壓縮工具

用這個在線圖片壓縮工具吧，你想把圖片文件的大小減到多少都行，比如你的200kb的照片，你直接設置壓縮到100K，它馬上瞬間就能壓縮到100K。而且頂多也就一兩秒鍾搞定。在線智能壓縮圖片大小,圖片壓縮體積寬高,大圖縮小

▼ 在線圖片智能壓縮使用步驟：

一、首先點擊加號添加需要壓縮的圖片。目前已知支持對jpg、png等多種常見的圖片格式進行壓縮，如果上傳圖片並壓縮成功，則代表支持該圖片格式。
二、可以自行修改圖片需要被壓縮到的最大寬高尺寸，默認為圖片原始的寬高尺寸，且寬高比例是自動鎖定的。
三、必須設置圖片被壓縮後，期望輸出的圖片文件的最大佔用空間。(必填項)
四、選擇圖片生成的演算法。默認為混合優先演算法，絕大多數情況下使用默認演算法即可。
五、壓縮的設定值不能小於1Kb，但圖片壓縮的最終效果可以小於1Kb。

C. 怎樣壓縮html或者jsp文件中標記元素之間的空格

有專禪橘明租門的jsp壓縮工具，下載個來壓賀槐團縮就行了。html文件不大，不影響速度，用Dreamweaver 處理下就行了。
推薦工具 js壓縮專家 JsPacker 1.0

D. 如何用php壓縮html代碼並輸出

第一步，你需要對php的設置如下：
php.ini： output_buffering = Off output_handler = ob_gzhandler zlib.output_compression = Off zlib.output_compression_level = -1

第二步，你需要在apache下增加如下設置：

AddOutputFilter DEFLATE html php js css

這樣就可以對html php js css進行gzip壓縮了。

第三步，你需要使用如下php壓縮html並輸出到客戶端的函數：

function compress_html($string) { return ltrim(rtrim(preg_replace(array("/> *([^ ]*) *</","//","'/\*[^*]*\*/'","/\r\n/","/\n/","/\t/",'/>[ ]+</'), array(">\\1<",'','','','','','><'),$string))); }

上面的這個正則表達式，很強大的哦，經過我本人親自測試可使用。
通過以上方法，你就可以將你的html代碼壓縮然後輸出給客戶端了。不信你可以查看源代碼，就是一行，網頁瞬間壓縮很小。

E. 前端工程師都有用哪些比較靠譜的小工具

1.node.js + npm， 這個是前端工具的一個平台，沒有他們就沒有以下的工具，建立開發環境，下載開發工具，運行開發工具的利器
2. bower, 庫依賴管理器，類似於npm，但針對瀏覽器JavaScript的依賴管理，減少尋找庫，下載庫和升級庫的煩惱
3.grunt，流程自動化管理工具，將你非編程的開發步驟減到最小，grunt watch+liveReload或者grunt connect,可以使得免除你F5無盡地獄，發布和開發各種無壓力。以下大部分開發工具，都有grunt的相對應的插件，也就是說他們都能利用grunt進行自動化運行
4.liveReload, 本來是一套解決方案，自從grunt watch出現後，我們只要安裝他的chrome或者firefox插件就行了。它的目的很簡單，只要發現目標文件中有任何一個文件有改動，立刻通知瀏覽器刷新頁面，這樣就免除了手動按F5。如果和grunt watch合用，就是只要發現任何文件有改動，立刻運行自動化流程中的所有任務，然後通知瀏覽器刷新。
5. 本人用less比較多，因為基本無縫兼容歷史遺留系統中的css，（而Sass語法比較特殊，還沒有專門用過，應該開發新系統的css比較好），一套css預編譯語言，可以把less語法轉成css語法，lessc是less語言編譯器，配合grunt less，編寫大型css文檔毫無壓力。
6.Phantomjs，沒有界面的瀏覽器，用js腳本控制其操作網頁。測試，抓圖，網頁流程自動化利器。配合casperjs的語法簡化功能真強庫後，控制Phantomjs就更加容易了
7. grunt PhotoBox, 利用phantomjs抓圖功能和ImageMagick圖片比較功能，在利用live-reload即時刷新功能，可以讓你開發css的時候，快速對n多個頁面進行觀察，看其前後變化。不過缺點也比較明顯，就是速度慢。但比起手動對比來看，還是非常快的。值得css開發時擁有
8. phantomCSS，這個和grunt photobox類似，都用於css開發的，差別是photobox是全局觀察差別，而這個是單元組件觀察差別，它方便你就抓頁面中某一塊元素然後進行前後比較，更加註重細節上的差異，這個比較合適組件開發時候使用。
9. jshint，幫助你快速定位JavaScript的語法錯誤和潛在的跨瀏覽器兼容性問題。在部署你JS前，用jshint檢查一下是沒錯的 。
10.UglifyJS，壓縮JavaScript代碼，使你的JS代碼可以更加快速的載入。有grunt的插件
11. browserify允許你在瀏覽器裡面使用CMD標准模塊，但本人認為它的另外一個優勢是合並代碼，開發時候可以把代碼模塊化，分成很多很多小文件，然後有調理的放到相對應文件夾下，然後最後合成單一文件。本人曾經利用browserify開發greasemonkey代碼，大大簡化了greasemonkey的開發難度和增強了greasemonkey代碼的質量。browserify有grunt插件，這樣又減少的開發步驟。
12. Karma， google開發的一個單元測試運行器，這個自己本身不是一個單元測試框架，而是配合測試單元框架的一個工具。由於前端瀏覽器眾多，就算你有live-reload這樣自動化工具，但是還是要手動打開各種瀏覽器，手動把你的單元測試在各個瀏覽器都運行一遍。這個工具目的是目的就是讓電腦能自動化打開各種瀏覽器，然後把單元測試在個個瀏覽器中自動運行一遍，讓這個步驟也能自動化了。
13.clean-css (grunt cssmin)， 我用的是grunt cssmin，但是grunt cssmin實際上背後使用的是clean-css工具，這個工具就是用來壓縮精簡css的，讓css文件大小更小。
還有些有名氣的工具，應該不錯，但是自己沒有用過，所以也就沒有提，但可以參考一下
yeoman 項目初始化工具
buddy.js 魔術數字檢查器
Image minifier.壓縮圖片工具
html-minifier html壓縮
jade html預編譯語言
jsdox JS代碼注釋文檔生成器
jscs JS代碼風格檢查器

F. html怎麼做gzip壓縮文件，請舉個例子付代碼的幫助理解

<DCWeb>
<HttpCompress compressionType="GZip">
<!--配置要壓縮何種類型的資源，這里設定只壓縮html，即只有aspx頁面及*.axd資源會被壓縮,其它的資閉知源(如圖片,CSS等）將不被壓縮！例：如果要壓縮gif，請添加<add mime="image/gif"/>,壓縮jpg則添加<add mime="image/jpeg"/>-->
<IncludedMimeTypes>
<add mime="text/html" />
</IncludedMimeTypes>
<ExcludedPaths>
<!--設定不啟用壓縮的頁面路徑，下面設定了nocompress目錄下的default.aspx頁面將不會啟轎行消用壓縮功能帶則,但其它頁面則正常啟用壓縮-->
<!--<add path="~/cars/Series1.aspx"/>-->
</ExcludedPaths>
</HttpCompress>
</DCWeb>

G. 什麼軟體可以批量壓縮HTML文件里的多餘空格

大家可以使用bulk rename utility ，如果沒有安裝的蔽燃話，可以網路一下。

打開中處理文件的文件夾，再打開bulk rename utility，你可以使用拖動的方法直接添加文件到bulk rename utility。這個方法在XP中不適用。

當然你可以軟體左側進行增加文件，但這個方法稍稍慢一點。

在」替換「後的文本框中輸入一個空格，在」用「後的文本框中什麼都不輸入

最後點擊」重命名「按鈕。如果初次使用這個軟體還會有一個警告框，不巧敬要管它。

這個時候我們可以發現我們刪除文件名中的多餘空格效果已宏寬虛經達到了。

H. 網頁設計師非常有用的幾個在線工具

時間戳轉換

功能簡介：Unix時間戳和北京時間互轉、獲取時間戳方法

地址：http://www.matools.com/timestamp

代碼對比/歸並

功能簡介：在線檢測/比較兩個文件文本的不同

地址：http://www.matools.com/compare

LESS編譯器

功能簡介：將LESS代碼編譯成CSS代碼，方便前端人員使用

地址：http://www.matools.com/less

crontab表達式

功能簡介：根據crontab表達式計算未來N次的執行時間

地址：http://www.matools.com/crontab

代碼格式化

功能簡介：可以對SQL、XML、JSON代碼進行格式化和美化

地址：http://www.matools.com/code-format

編碼轉換

功能簡介：URL解碼、Native轉UTF-8、Native轉ASCII

地址：http://www.matools.com/code-convert

網頁調色板

功能簡介：網頁顏色選擇器、顏色代碼查詢、RGB顏色值參考

地址：http://www.matools.com/color

正則表達式

功能簡介：正則表達式匹配和替換、多種常用正則表達式

地址：http://www.matools.com/regex

答題

功能簡介：學霸，快來做題，提升一下你的技能吧

地址：http://www.matools.com/exam

Markdown

功能簡介：將web上的文本轉換成HTML文檔

地址：http://www.matools.com/markdown

UBB編譯器

功能簡介：UBB是一種網頁中的替代HTML代碼的安全代碼

地址：http://www.matools.com/ubb

進制轉換

功能簡介：2~36進制之間任意進制轉換，支持浮點型

地址：http://www.matools.com/hex

CSV轉HTML

功能簡介：將CSV數據轉換為HTML的表格,並展示在頁面上

地址：http://www.matools.com/csv-html

HTML特殊符號

功能簡介：HTML特殊字元編碼大全

地址：http://www.matools.com/special-char

XML轉JSON

功能簡介：XML和JSON的內容和輸出互相轉換

地址：http://www.matools.com/xml-json

HTML轉JS

功能簡介：HTML和JS的內容和輸出互相轉換

地址：http://www.matools.com/html-js

js/css壓縮

功能簡介：在線壓縮Javascript和CSS代碼

地址：http://www.matools.com/compress

網頁常用字體

功能簡介：總結了各種常見的網頁字體的顯示效果

地址：http://www.matools.com/page-word

Cron生成器

功能簡介：可以在線生成任務調度Quartz的Cron表達式

地址：http://www.matools.com/cron

JSON格式化

功能簡介：Json解析、驗證、格式化、壓縮、以及Json與XML相互轉換

地址：http://www.matools.com/json

SQL格式化

功能簡介：sql在線美化、格式化、腳本壓縮

地址：http://www.matools.com/sql

埠掃描

功能簡介：掃描常用或指定的埠，查看埠是否開放

地址：http://www.matools.com/port

Base64編碼解碼

功能簡介：將字元base64編碼加密,或者將base64加密的字元還原

地址：http://www.matools.com/base64

MD5加密

功能簡介：生成32位和16位的大寫和小寫的密文

地址：http://www.matools.com/md5

摩斯電碼

功能簡介：在線摩斯電碼加密解密

地址：http://www.matools.com/morse

IP查詢

功能簡介：查詢IP或域名的地理位置和寬頻供應商、查看本機IP

地址：http://www.matools.com/ip

文字加密解密

功能簡介：支持AES、DES、RC4、Rabbit 等多種演算法

地址：http://www.matools.com/encrypt

HTTP狀態查詢

功能簡介：檢測網頁返回的HTTP狀態碼

地址：http://www.matools.com/page-status

生成htpasswd

功能簡介：生成htpasswd

地址：http://www.matools.com/htpasswd

favicon圖標製作

功能簡介：將上傳圖像剪切並生成ico格式的圖標

地址：http://www.matools.com/ico

傳圖識字

功能簡介：可以將一段含有英文文字的照片免費轉化成文字

地址：http://www.matools.com/ocr

gif圖製作

功能簡介：一鍵生成gif動態圖、閃圖和搞笑表情包

地址：http://www.matools.com/gif

生成二維碼

功能簡介：可以設置圖像格式、容錯率、大小、顏色及LOGO

地址：http://www.matools.com/qrcode

圖片轉pdf

功能簡介：在線免費將多張圖片轉成pdf文檔，一鍵生成pdf文檔

地址：http://www.matools.com/pdf

人臉識別

功能簡介：在線人臉識別，自動識別人臉批量裁剪出頭像圖片

地址：http://www.matools.com/face

DIY卡通頭像

功能簡介：免費的動漫人物製作工具，可以隨心定製男女卡通頭像

地址：http://www.matools.com/cartoon

傳圖識色

功能簡介：可以識別出遊標所在處圖片的顏色，並提取出圖片的主色調

地址：http://www.matools.com/image-color

手繪圖片

功能簡介：可以自動生成手繪風格照片，還可以改變照片的模糊度

地址：http://www.matools.com/sketch

圖片轉Base64

功能簡介：圖片和Base64編碼互轉

地址：http://www.matools.com/image-base64

衣服尺碼計算

功能簡介：輸入你的身高體重，即可計算出你需要的衣服尺寸

地址：http://www.matools.com/size

身份證信息查詢

功能簡介：輸入身份證號，查詢歸屬地、性別和出生年月

地址：http://www.matools.com/id

科學計算器

功能簡介：開方(√)、圓周率(π)、倒數(1/x)、正弦(Sin)

地址：http://www.matools.com/calculator

大小寫轉換

功能簡介：可以實現人民幣數字大寫轉換和英文大小寫轉換

地址：http://www.matools.com/upper-lower

日期間隔計算

功能簡介：一款可以計算兩個日期之間的天數的工具

地址：http://www.matools.com/date

漢字轉拼音

功能簡介：可以將漢字轉化為帶聲調的拼音

地址：http://www.matools.com/pinyin

文字去重

功能簡介：該工具可得到無重復數據的文字

地址：http://www.matools.com/repeat

單位換算器

功能簡介：長度、面積、重量、溫度等單位一鍵對等轉換

地址：http://www.matools.com/unit

中文簡繁轉換

功能簡介：將輸入的一段文字轉換為簡體或繁體

地址：http://www.matools.com/chinese-convert

陰陽歷轉換

功能簡介：支持農歷公歷互查，公歷和農歷互相轉換

地址：http://www.matools.com/lunar

郵編區號查詢

功能簡介：輸入省份、城市、區號或郵編查詢該地區號

地址：http://www.matools.com/postcode

字數統計

功能簡介：快速計算文章中漢字、標點、英文和數字的個數

地址：http://www.matools.com/count-char

I. freemaker響應生成的靜態html頁面怎麼壓縮代碼

freemarker有語法：
1 <@compress single_line=true>
2 <html>
3 freemarker template技簡派術
4 </html>
5 </@compress>
不過如果模板文件很多的話，通過這種方式有些費力，穗知可以通過在servlet中增加filter過濾器來實現攔族賀

J. html5怎麼壓縮圖片

利用canvas的drawImage方法來繪制圖片，並且設置繪制的圖片的width跟height，最後再通過canvas的toDataURL方法來生成壓縮後的dataUR

下面直接上代碼：

html:

[html]view plain

• <divclass="head_imgpr">

• <emclass="pa"></em>

• <imgsrc='../images/icon_touxiang.png'alt=""class="modify_img"/>

• <inputid="photo"type="file"accept="image/*"/>

• </div>