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>