javascript和css压缩工具下载
‘壹’ IIS网站服务器性能应如何进行优化
1、减少HTTP请求数量
这主要是修改网站代码,减少外部图片、CSS、JS等文件数量,手动合并多个CSS/javaScript文件。IIS那里不用设置。
2、使用CDN
对于小网站来说,这个就免了吧。当然有钱人可以试试,可以从技术上解决用户访问网站响应速度慢的问题。
3、启用内容过期
对于静态文件启用内容过期可以提高访问性能。首先网站的目录要划分合理,图片、CSS、JavaScript均放在单独目录下,然后在IIS中选择目录,点属性-HTTP头,启用内容过期,可以选择30天后过去,这样,用户浏览器将比较当前日期和截止日期,以便决定是显示缓存页还是从服务器请求更新的页,由于图片、CSS、JS通常变化较少,因此基本上都从本地缓存读取,从而加快显示速度。
4、启用Gzip压缩
HTTP压缩是在Web服务器和浏览器间传输压缩文本内容的方法。HTTP压缩采用通用的压缩算法如Gzip等压缩HTML、JavaScript或 CSS文件。压缩的最大好处就是降低了网络传输的数据量,从而提高客户端浏览器的访问速度。
使用方法是,右击“网站”->“属性”,选择“服务”。在“HTTP压缩”框中选中“压缩静态文件”,“临时目录”建议单独设置另一个盘的目录下。
之后,IIS管理器中,右击“Web服务扩展”->“增加一个新的Web服务扩展”,在“扩展名”中输入“HTTPCompression”,添加“要求的文件”为C:\WINDOWS\system32\inetsrv\gzip.dll,其中Windows系统目录根据您的安装可能有所不同,选中“设置扩展状态为允许”。
最后,使用文本编辑器打开C:\Windows\System32\inetsrv\MetaBase.xml,在HcFileExtensions中增加需要压缩的静态文件后缀名,默认为HTML和TXT文件,建议再添加上js、css等,不要添加图片或ZIP等已经被压缩的文件。
5、将样式文件放在头部
这是基本的HTML代码风格,将所有的CSS文件都放在HTML页面的头部。
6、将脚本文件放在尾部
这也是基本的HTML代码风格,将所有的JavaScript文件都放在HTML页面的尾部。
7、避免CSS表达式
这点很简单,因为大多数人从来不用CSS表达式。
8、使用外部的JavaScript和CSS
将所有的JavaScript和CSS都做成外部文件的形式进行引用,这主要是为了让这些文件可以被浏览器缓存起来,参见第三点的介绍。
9、减少DNS查询
域名的DNS查询会带来额外的访问开销,减少页面内文件的主机域名数量,一个页面的主机域名保持在2-4个以内,这样就不会降低页面的装入速度。
10、压缩JavaScript文件
压缩脚本文件,删除不必要的字符,可以改善加载时间,目前有很多JavaScript文件的压缩工具,我这里有一个GUI界面的JS压缩工具供下载。
11、避免重定向
网页的重定向会带来额外的运行开销,因此要避免页面进行重定向跳转操作。
12、删除重复脚本
一个页面两次包含同一个JavaScript文件会影响加载的性能,因此需要将重复的脚本文件删除。
13、配置ETag
这是一个令人迷惑的问题。理论上说将服务器的ETag删除会提高HTTP请求的性能,但是按照微软官方提供的修改方法配置IIS 6.0,并没有实际效果,最终我使用了一个remetag,以ISAPI的方式实现了删除ETag的功能。
‘贰’ 将Js和CSS文件压缩成min文件
个人建议从几个方面入手:
1、在雹灶服务器上启用源胡扮GZIP压缩,添加css等静态文件等。
2、把主页、内容页的CSS分开写,公共部分单独用一个CSS,这样就可以减少CSS的大小。
3、优化CSS语法,并可以使用工做轿具压缩,但要注意用多个浏览器测试。
4、将一些JS调用尽量放到网页底部
‘叁’ uglify-js压缩js文件minifier压缩css文件
安装:cnpm install uglify-js –gcss
参数用法:
uglifyjs XX.js -o xx.min.js 压缩
uglifyjs XX.js -m -o xx.min.js 混淆性压缩态敬戚
uglifyjs xx.min.js –b –o xx.js 美化(反压缩) 文稿唤件
安装:
cnpm install minifier -g
用法:
minifier 是一个 nodejs 下的用于压缩 js 和 css 文件的插件。
minify index.js
则在当前文件夹下会生成一个index.min.js 的压缩的文件。css文件采用相同的命令进行压缩帆陵。
‘肆’ 前端工程师都有用哪些比较靠谱的小工具
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代码风格检查器
‘伍’ 有哪位可以发一下 UltraEdit 26破解版的安装包
前言:此版本的软件安装包附加激活教程我可以给您一份,不过仅供个人使用,切勿传播,希望可以帮助您。
UltraEdit 26破解版
全新功能
1、命令调色板
在全新的命令调色板启巧中得到了最好的体现。命令调色板是一种易于访问的搜索表单,它将软件的所有功能放在您的指尖。通过Ctrl + Shift + P(或功能区右上角的图标)打开它,然后开始输入关键字以查看软件中的所有匹配命令和设置,并实时过滤。您可以滚动查看结果,然后按Enter键执行所需的结果。
命令选项板显示每个结果的关联键盘快捷键(如果可用)。此外,顶部最近使用的列表使得回忆起您可能不记得的最后使用过的命令变得轻而易举。“ 收藏夹”列表允许您将喜爱的命令固定在顶部。
不确定要搜索什么?我们为命令添加了内部搜索标记,以便您可以查看关键字搜索中可能没有名称中的关键字的命令 - 例如,搜索“HTML”时,结果中会显示“实时预览”。此外,您可以直接从命令面板中搜索和播放自定义宏,脚本和用户/项目工具。
底线:命令面板使您能够轻松访问和发现UltraEdit的所有功能和灵活性!
2、JavaScript / CSS压缩器和deminifier
直接在程序中轻松压缩和解压缩JavaScript和CSS ... V26包含几型旁孝个新的JS和CSS工具,只需单击鼠标即可轻松编辑缩小代码。重新编写Coding功能区以包含具有这些选项的新JS / CSS下拉列表。(目前,JavaScript和CSS的压缩删除了不必要的空格和注释,但未来的迭代可能包括变量简化,条件语句优化,CSS重构等。)此外,我们还添加了原生JavaScript Lint集成,以便您可以语法检查JavaScript在飞行中。
3、重新设计代码折叠
我们已经深入探讨了这一点,添加了一个独特的专有多段编辑控件,以便在巨大的源文件中进行代码折叠 - 甚至是高达500 MB的文件!您可能遇到的先前限制已被消除。除此之外,我们还改进并增强了代码折叠的准确性,解析和性能 - 尤其是在较大的文件中。
4、宏观性能检修
V26包括对宏播放和性能的一些实质性微调和优化。除了提高宏的可靠性,特别是那些循环到文件末尾的宏,我们还大大提高了播卜稿放速度。如果您的宏可以播放大量数据,那么您应该看到运行它们所需的时间显着改善。在许多情况下,我们已经看到宏播放时间减少到三分之一。
5、双击时突出显示所有出现的字符串
询问并且您将收到...您现在可以在双击时启用所有字符串的自动突出显示,使您能够立即查看变量或函数的所有出现。要启用此功能,请转到高级»设置»搜索»高级。
6、上下文敏感的提示
在软件打开一段时间后,您可能会注意到一些新的东西。我们在应用程序的下部区域添加了一个上下文相关的,不显眼的提示栏,以帮助您升级工作流程。打开一个XML文件?提示栏可能会建议您更快地整理XML代码。或者它可能会为您提供一个您不知道的隐藏功能的提示。
7、现代化的键映射
我们更新了一些关键映射以及一个先前硬编码的键映射。
①您现在可以重新映射Ctrl + Tab和Ctrl + Shift + Tab以启用类似浏览器的选项卡切换
②文件中的替换被重新映射到Ctrl + Shift + R
③快速记录宏重新映射到Ctrl + Shift + Q
④ESC驳回了“突出显示全部”突出显示
‘陆’ 求网面下载工具,能把JS和CSS文件也下下来
推荐你裂碰物一款软件:webzip,可以下载整站。css和js都会下载下来的,css中的margin-top本身也吵举是html语言,定义的时候添加在当页而不是其他的肆液css文件里就可以显示到html页面了。不过用一个css文件统一管理样式表会更加清晰便利
‘柒’ 如何压缩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,如果没有都进行压缩的话,一定会减少很多文件大小的,其实减少文件大少并不是很重要,最重要的是,文件容量减少了,能够快速的提高网站访问的速度,给用户带来好的体验,我们尽量的把文件压缩到最小,这样才有利于用户快速的打开网站,至此我的五色旗保健品商城优化后,我的每天的访问量也增加了很多。
‘捌’ js代码压缩!
http://tools.css-js.com/compressor.html
这个站点里面有四个压缩引擎,一个YUI压缩,一个UglifyJS压缩,一个JSPacker压缩,和一个新的JsMin压缩。
一般用UglifyJS引擎压缩就可以。jQuery和好些其他的前端项目就是用他压缩的。
另外给个建议,你把你的JS文件用匿名函数的方式封装起来,对外只给一个接口。这样JS压缩引擎就可以把你匿名函数中不对外开放的内部变量名称都给替换成a,b,c,d这样的单字符,很能节省体积。