前端代码性能优化工具

转自:http://segmentfault.com/a/1190000002585760

Google Closure Compiler

官网:https://developers.google.com/closure/compiler/

Closure Compiler的使用方法有如下3种:

在命令行下使用一个google编译好的java程序
使用google提供的在线服务
使用google提供的RESTful API

首先需要下载compiler-latest.zip,由于可能有的用户没法FQ,所以我把它下载下来放到我的网盘上供大家下载使用。

下载下来之后,进入这个文件所在目录,以我的为例:$ cd cd /Users/trigkit4/Downloads/

然后解压该文件:$ unzip compiler-latest.zip -d ~,会出现如下文件列表:

Archive:  compiler-latest.zip
  inflating: /Users/trigkit4/compiler.jar
  inflating: /Users/trigkit4/COPYING
  inflating: /Users/trigkit4/README.md

然后压缩compiler.jar ,代码如下:

$ java -jar ~/compiler.jar –js my_source.js –js_output_file my_package.js

这样,就把 my_source.js压缩成my_package.js了。

如果想知道其他的可选参数,可以输入如下命令获得:

$ java -jar ~/compiler.jar –help

使用google提供的在线服务

链接:http://closure-compiler.appspot.com/,这种方法速度比较慢,而且貌似现在已经无法访问了

使用google提供的RESTful API

该方法缺点是无法压缩大文件,API文档见http://code.google.com/closure/compiler/docs/api-tutorial1.html 。原理大概就是将需要压缩的js内容或js文件所在url,以及必要的配置信息发送给google的服务器,然后接收google的响应,响应结果即为压缩后的内容。

CSS Lint

官网:http://csslint.net/

CSSLint 是一个用来帮你找出 CSS 代码中问题的工具,它可做基本的语法检查以及使用一套预设的规则来检查代码中的问题,规则是可以扩展的。

JSHint

JSHint是一个JavaScript的代码质量检查工具,主要用来检查代码质量以及找出一些潜在的代码缺陷。

官网:http://jshint.com/
官方文档:http://jshint.com/docs/

使用方法:进入官网首页,粘贴你的代码,你的错误和不正当的用法就会在右边实时显示了,如你所料,它是英文版本的

本地安装

在终端或者CMD里输入如下命令行,不过前提是你装了npm,时间有点长,取决于网络:

npm install jshint

如图所示:

运行JSHint

打开终端或者cmd命令窗口,使用cd切换到你对应的应用目录下,输入如下命令行:

jshint my_app.js

UglifyJS

UglifyJS是基于 NodeJS 的Javascript语法解析/压缩/格式化工具

官网:http://lisperator.net/uglifyjs/

安装

$ npm install uglify-js -g

官方githubhttps://github.com/mishoo/UglifyJS2

在线使用:http://lisperator.net/uglifyjs/#demo

例子

Mac系统打开终端,cd 到js文件所在目录,比如:

cd /Volumes/Mac/js

然后输入如下命令进行压缩一个名叫base.js的文件:

trigkit4:js trigkit4$ uglifyjs base.js -o base-min.js
trigkit4:js trigkit4$ uglifyjs base.js -m -o base.js

-m参数是把变量名变成a, b, c, d进行替换的

YUI Compressor

YUI Compressor 压缩 js 的内容包括:

移除注释
移除额外的空格
细微优化
标识符替换(Identifier Replacement)

官方github:https://github.com/yui/yuicompressor/

机器需要Java 1.4以上的环境,所以需先下载JDK,配置环境。

使用YUI Compressor压缩JS和Css

常用示例(在cmd中执行)

 java -jar D:\yuicompressor-2.4.6\build\yuicompressor-2.4.6.jar --type js --charset UTF-8 D:\my.js -o D:\my-min.js 

 java -jar D:\yuicompressor-2.4.6\build\yuicompressor-2.4.6.jar --type css --charset UTF-8 D:\my.css -o D:\my-min.css

参数说明:

`–type`指定要打包的文件类型,可选的有 `js`和`css`
`–charset` 指定字符集
`-o` 指定输出的文件名,如果不指定这个参数将会把压缩后的内容输出到命令行上
最后的my.js和my.css是要打包的debug版源文件

使用YUI CompressorDOS批处理脚本压缩JavaScriptCSS,加上IISGZIP,加起来能得到85%左右的压缩率。

三个文件:

批处理文件:yuicompressor.bat
注册表文件:yuicompressor.reg
压缩jar包:yuicompressor-2.4.6.jar
时间: 2024-10-14 01:44:42

前端代码性能优化工具的相关文章

关于前端代码性能优化问题

以下观点纯属个人看法: 对于一个刚接触前端不久的人来说,前端的代码质量是很重要的一部分,毕竟关系到性能问题.个人认为关于代码性能优化主要由这几方面:HTML.CSS.Javascript和HTTP,所以对这四个方面的优化能提高浏览器的性能.个人知识面有限,只有学到以下的知识,另外的还没涉及,不足之处还请体谅. 一. HTML 1.首先是对HTML5的充分熟悉和理解,理解标签的语义化,减少对标签的重定义. 2.命名的规范化,对id.class.name的规范命名有助于整体代码的构建,方便他人的理解

前端代码性能优化

1.display:none;优于visibility:hidden;前者隐藏不占用物理空间,后者会占用.2.合并margin,padding,border的-top,-left,-right,-bottom的设置,简短简洁.3.选择器在满足效果的基础上,尽量简单,减少嵌套,查询的消耗.4.如若值为0,则去掉单位,如border-right:0px;可以写为border-right:0;5.没有边框,用border:none;优于border;0;6.在保持代码解耦的前提下,尽量合并重复的代码.

[转] Python 代码性能优化技巧

选择了脚本语言就要忍受其速度,这句话在某种程度上说明了 python 作为脚本的一个不足之处,那就是执行效率和性能不够理想,特别是在 performance 较差的机器上,因此有必要进行一定的代码优化来提高程序的执行效率.如何进行 Python 性能优化,是本文探讨的主要问题.本文会涉及常见的代码优化方法,性能优化工具的使用以及如何诊断代码的性能瓶颈等内容,希望可以给 Python 开发人员一定的参考. Python 代码优化常见技巧 代码优化能够让程序运行更快,它是在不改变程序运行结果的情况下

Visual Studio代码性能分析工具

AMD CodeXL 2011年发布的AMD CodeAnalyst Performance Analyzer 现在已经被AMD CodeXL所替代.AMD CodeXL的主要目的是帮助开发者更好利用CPU, GPU和APU的计算性能,具有强大的GPU调试.CPU和GPU代码分析.及静态的OpenCL内核性能分析等能力. AMD提供了支持Windows 7.Windows 8和Linux系统的单机版CodeXL分析工具.在Visual Studio 2010,2012和2013上也有AMD Co

Java 代码性能优化总结

35 个 Java 代码性能优化总结 前言 代码优化,一个很重要的课题.可能有些人觉得没用,一些细小的地方有什么好修改的,改与不改对于代码的运行效率有什么影响呢?这个问题我是这么考虑的,就像大海里面的鲸鱼一样,它吃一条小虾米有用吗?没用,但是,吃的小虾米一多之后,鲸鱼就被喂饱了.代码优化也是一样,如果项目着眼于尽快无BUG上线,那么此时可以抓大放小,代码的细节可以不精打细磨:但是如果有足够的时间开发.维护代码,这时候就必须考虑每个可以优化的细节了,一个一个细小的优化点累积起来,对于代码的运行效率

11个Visual Studio代码性能分析工具

软件开发中的性能优化对程序员来说是一个非常重要的问题.一个小问题可能成为一个大的系统的瓶颈.但是对于程序员来说,通过自身去优化代码是十分困难的.幸运的是,有一些非常棒的工具可以帮助程序员进行代码分析和性能测试,从而大大简化程序员进行代码性能优化的过程.MSDN杂志2011年7月份曾发布主题为“.NET代码分析工具和技术”的那一期,让广大程序员收获颇丰.四年过去之后,这些工具又进一步做出了很多改进,同时也出现了更多的选择.本文对当前主流的一些Visual Studio代码性能分析工具进行简单的梳理

Python 代码性能优化技巧(转)

原文:Python 代码性能优化技巧 Python 代码优化常见技巧 代码优化能够让程序运行更快,它是在不改变程序运行结果的情况下使得程序的运行效率更高,根据 80/20 原则,实现程序的重构.优化.扩展以及文档相关的事情通常需要消耗 80% 的工作量.优化通常包含两方面的内容:减小代码的体积,提高代码的运行效率. 改进算法,选择合适的数据结构 一个良好的算法能够对性能起到关键作用,因此性能改进的首要点是对算法的改进.在算法的时间复杂度排序上依次是: O(1) -> O(lg n) -> O(

11 个 Visual Studio 代码性能分析工具

软件开发中的性能优化对程序猿来说是一个很重要的问题. 一个小问题可能成为一个大的系统的瓶颈. 可是对于程序猿来说.通过自身去优化代码是十分困难的.幸运的是.有一些很棒的工具能够帮助程序猿进行代码分析和性能測试,从而大大简化程序猿进行代码性能优化的过程.MSDN 杂志 2011 年 7 月份曾公布主题为".NET 代码分析工具和技术"的那一期.让广大程序猿收获颇丰.四年过去之后,这些工具又进一步做出了非常多改进,同一时候也出现了很多其它的选择.很多其它应用代码安全工具请点击:http:/

Android性能优化——工具篇

Android性能优化是Android开发中经常遇见的一个问题,接下来将对Android性能优化方面的知识点做一个简单的梳理和总结,将从工具和代码两方面进行梳理.所谓工欲善其事必先利其器,本文首先来看一下Android性能优化有哪些得力的工具. TraceView traceview是Android SDK中自带的一个工具,可以对应用中方法调用耗时进行统计分析,是Android性能优化和分析时一个很重要的工具.traceview位于SDK下的tools目录中,使用时可以在cmd窗口运行trace