`
seomine
  • 浏览: 43598 次
  • 性别: Icon_minigender_1
社区版块
存档分类

Packer,你对我的JS做了什么!

阅读更多

 

Packer,你对我的JS做了什么!

最近在看JQuery作者John Resig 写的Pro JavaScript Techniques,虽说书是06年的,但是其中很多内容拿到现在的JS开发中来也依然适用。

其中说到源代码压缩方面,jsMin只是简单的去除注释和空白字符,JS大牛Dean Edwards写的Packer,压缩率很高,但是压缩完以后的代码不好阅读,看到这里,我很想知道Packer压缩完以后的代码到底成什么样了,于是稍微使用了一下Packer。

以下是压缩前的一段源代码:

//注释:很简单的一段代码,利用原型链实现了简单的继承

var A = function() {};

A.prototype.key = 1;

var B = function() {};

B.prototype = new A();

var b = new B();

console.log(b.key); // 1

Packer官方网站(http://dean.edwards.name/packer/)中提供了两种压缩方式,一 种是Shrink variables(常规压缩~~),另一种是Base62 encode(比较变态的压缩~~)。利用Shrink variables进行压缩,得到的结果是:

var A=function(){};A.prototype.key=1;var B=function(){};B.prototype=new A();var b=new B();console.log(b.key);

看上去是简单的清理了一下注释、空格等内容。

利用Base62 encode进行压缩,得到的结果看起来有点费劲:

eval(function(p,a,c,k,e,r){e=function(c){return c.toString(a)};if(!”.replace(/^/,String)){while(c–)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return’\\w+’};c=1};while(c–)if(k[c])p=p.replace(new RegExp(‘\\b’+e(c)+’\\b’,'g’),k[c]);return p}(’0 2=4(){};2.5.6=1;0 3=4(){};3.5=7 2();0 8=7 3();a.9(8.6);’,11,11,’var||A|B|function|prototype|key|new|b|log|console’.split(‘|’),0,{}))

确实不太好阅读!为了搞清楚压缩以后的这一段代码到底是干什么的,我把代码格式化了一下,再加上了部分注释,并没有对功能性代码进行任何调整,得到的代码是:

 

eval(

function(p,a,c,k,e,r){

// 替换了e,此方法用于获取高位进制以后的字符,例如:Number(10).toString(11) = ‘a’;

e=function(c){return c.toString(a)};

// 如果浏览器正则表达式不靠谱,则不能依赖正则表达式,只能老老实实一个一个替换了

if(!”.replace(/^/,String)){

while(c–)  // 遍历常量字符串数组元素

//把下标与字符串的对应存在r里,k已经使用完毕

r[e(c)]=k[c] || e(c);

// k被替换,用来返回e对应的字符串,k[0]为function,用于replace,作为第二个参数

k=[function(e){return r[e]}];

// e是正则表达式,用于字符串替换

e=function(){return’\\w+’};

// 因为是replace正则表达式,所以c=1,replace一次就可以了

c=1

}; // end of if

while(c–)

if(k[c])

p=p.replace(new RegExp(‘\\b’+e(c)+’\\b’,'g’),k[c]);  // recover the real statement

// 还原了原来的代码,等待eval

return p

} // end of function

//function部分结束,arguments部分开始

(

// p : statement,这个语句与压缩之前的代码结构上很像

// var->0, A->2, function ->4, prototype->5, key->6, B->3, a->console, log->9

// 这里面的每一个字母都要作为索引,从第四个参数的内容中查找具体的字符串

’0 2=4(){};2.5.6=1;0 3=4(){};3.5=7 2();0 8=7 3();a.9(8.6);’

// a : k数组的长度,用于进行进制转换和寻址

,11

// c : 数组长度,跟上一个参数重复,可能是为了满足function(p,a,c,k,e,r)的参数个数

,11

// k : 字面量字符串数组

,’var||A|B|function|prototype|key|new|b|log|console’.split(‘|’)

// e : 没用,传进去就被替换了

,0

// r : 保存替换后的值与原字符串之间的映射关系

,{}

)  // end of arguments

) // end of eval

返回的结果可以分为function部分和arguments部分,这样看就清楚多了。

实际上,Packer做的工作就是混淆代码,替换单词,在代码真正需要执行的时候,再还原到原来的代码,最后执行eval。

重复了几次压缩,可以发现代码压缩完以后,function部分的内容结构基本一致,不一样的是后面传入参数arguments的部分,比如,另外一个例子:

源代码:

var doc = document.documentElement;

var div = doc.getElementsByTagName(‘div’)[0];

if(div) {

div.addEventListener(‘onclick’, function(){}, false);

}

压缩完成以后:

eval(function(p,a,c,k,e,r){e=function(c){return c.toString(a)};if(!”.replace(/^/,String)){while(c–)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return’\\w+’};c=1};while(c– )if(k[c])p=p.replace(new RegExp(‘\\b’+e(c)+’\\b’,'g’),k[c]);return p}  (

’2 3=7.4;2 1=3.6(\’1\’)[0];8(1){1.9(\’a\’,b(){},5)}’,

12,

12,

‘|div|var|doc|documentElement|false|getElementsByTagName|document|

if|addEventListener|onclick|function’.split(‘|’),

0,

{})

)

function部分的结构是一样的,不同的是传入的参数。

在传入了一个内容比较多的JS源码之后,得到的压缩结果的function部分如下:

eval(function(p,a,c,k,e,r){e=function(c){return(c<a?”:e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))} ;if(!”.replace(/^/,String)){while(c–)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return’\\w+’};c=1};while(c–)if(k[c])p=p.replace(new RegExp(‘\\b’+e(c)+’\\b’,'g’),k[c]);return p} (arguments here…))

可以看出,除了高位进制的算法不同了之外,其他内容都是一样的。高位进制的算法可以参考这篇文章

最后,我们利用Packer压缩一个真实存在的JS文件,并且将YUI压缩工具加入到对比的行列中来。对于objectjs的主文件object.js和URL解析模块urlparse.js代码的压缩结果对比如下:

Packer (Shrink variables)

Packer (Base62 encode)

YUI Compressor Online

object.js

17766/37726=0.471

12754/37726=0.338

21503/37726 = 0.57

urlparse.js

827/1833=0.4511

1154/1833=0.6296

831/1833=0.4534

可以看出,Packer的Base62 encode模式在文件较大时能够给出更高的压缩率,而且可以很好的混淆代码;Shrink variables模式在小文件的压缩方面能够提供比较好的压缩率,对大文件的压缩率不高,而且在代码的保密性方面可能要差一些。

不过,Packer的eval带来的性能损耗,应该是Packer无法抹去的痛~~~

 

http://fed.renren.com/archives/350

分享到:
评论

相关推荐

    jspacker压缩与解码

    在Web开发中,尤其是对于大型项目或者对性能有高要求的应用,使用jspacker对JavaScript进行处理是提升用户体验和保障代码安全的一种常见策略。 **二、jspacker的压缩原理** 1. **删除空白字符**:jspacker会移除...

    js加密压缩工具jspacker

    **jspacker** 是一个专门针对JavaScript进行压缩和加密的工具,它结合了加密和压缩的功能,可以对JavaScript代码进行深度处理,以达到最佳的压缩效果。使用jspacker,开发者可以一键将原始JavaScript代码转换为更...

    JS压缩工具JsPacker

    但JS不好调试,代码多了也会严重影响速度,当你在为提高了用户体验,做出了很绚丽的效果而欣喜的时候,是否想过优化一下JS的效率,大网站的JS都做了压缩处理。JS的速度分为两种,下载速度和执行速度。要想JS的下载...

    jspacker压缩与解码工具

    **jspacker:JavaScript压缩与编码工具** `jspacker` 是一款专为jQuery设计的压缩工具,它的主要功能是高效地压缩JavaScript脚本文件,以减少网页加载时间和提高页面性能。在网页开发中,脚本文件的大小直接影响了...

    js packer压缩工具

    4. "点我更新此软件.URL":这是一个快捷方式,点击后可能跳转到JS Packer的最新版本下载页面,方便用户保持软件的更新,获取最新的功能和修复。 在实际使用JS Packer时,开发者需要注意,虽然压缩和混淆可以增强...

    js packer PHP版,加密js源代码文件

    JavaScript Packer 是一款用于保护JavaScript源代码的工具,尤其在PHP环境下,它可以将JavaScript代码进行压缩和加密,以防止他人轻易阅读和理解你的代码。这个压缩包包含了实现这一功能的相关文件,下面我们将深入...

    jspacker js压缩专家v1.0

    但JS不好调试,代码多了也会严重影响速度,当你在为提高了用户体验,做出了很绚丽的效果而欣喜的时候,是否想过优化一下JS的效率,大网站的JS都做了压缩处理。JS的速度分为两种,下载速度和执行速度。要想JS的下载...

    js packer php 版

    JavaScriptPacker.php、example-inline.php和example-file.php这三个文件是与"js packer php 版"相关的,这通常指的是一个用PHP实现的JavaScript代码压缩工具。JavaScript Packer 是一种流行的JavaScript混淆和压缩...

    JsPacker(JS压缩,混淆器)

    很优秀的JS工具: 一、可以高效的压缩Javascript脚本文件缩短网页显示时间; 二、可以混淆代码保护知识产权 三、还可以把多个文件合并压缩。 产生的代码兼容IE,FireFox等常用浏览器...JsPacker是相关工具中最优秀的一个

    JavaScript Packer JS 压缩包

    在JavaScript Packer JS 压缩包中,"Js Packer"很可能是这个压缩工具的主程序或核心库。使用这样的工具,开发者可以将源代码转换为更紧凑的形式,以优化网站性能。压缩过程通常包括以下几个步骤: 1. **代码压缩**...

    texture_packer.zip

    《Texture Packer与Egret TypeScript整合:优化小图资源管理》 在游戏开发或图形设计领域,处理大量小尺寸的图像是一项常见的任务。这些小图通常用于制作UI元素、精灵动画等,但由于它们大小不一,管理和加载时可能...

    node-packer windows 安装包

    《Node.js应用打包工具——Node-Packer在Windows平台的应用》 在现代的软件开发中,Node.js已经成为构建网络服务和桌面应用的重要选择。然而,如何将一个完整的Node.js应用程序打包成一个可执行文件,以便用户可以...

    THE HTML packer网页压缩工具

    它能够智能地处理各种标签和属性,如内联样式、JavaScript代码块等,确保这些元素在压缩后仍能正常工作。同时,它还支持CSS和JavaScript的压缩,通过合并和最小化这些资源,进一步减少页面加载时间。 虽然...

    前端开源库-moles-packer

    **前端开源库-Moles Packer** Moles Packer是一个专为React本地项目设计的前端构建工具,它旨在简化开发流程,提高开发效率。...无论你是React新手还是经验丰富的开发者,都能从Moles Packer中受益。

    JS Minifier / Packer - 目前最好用的(C#.net 2.0)js精简/压缩工具

    1、支持 JSMin / Packer 两种精简/压缩方法; 2、界面友好,支持拖放,方便操作; 3、既支持文件列表批量(重命名/覆盖) 精简化,又支持javascript代码字符串(多文件拖放合并) 精简化; 4、支持JS输入/输出文件编码...

    Javascript packer2

    混淆是JavaScript Packer 2 的另一大功能,它主要是为了防止他人阅读和理解你的代码。通过使用无意义的变量名、函数名和对象名,以及改变控制流结构,使得原始代码变得难以理解和逆向工程。这在保护知识产权、防止...

    packer javascript

    packer-.mhtpacker-.mht

    JsPacker(JS压缩工具)

    可以高效的压缩Javascript脚本文件缩短网页显示时间,可以混淆代码保护知识产权,还可以把多个文件合并压缩。产生的代码兼容IE,FireFox等常用浏览器

    node-packer:将Node.js应用程序打包到单个可执行文件中

    Node.js Packer 将您的Node.js应用程序打包到单个可执行文件中。 产品特点 使用node-packer编译任何项目都需要不到5分钟的时间。 只要您在纯node.js中工作,无论您如何开发,都无需在应用程序中修改任何一行代码!...

    Packer 3.0 JS压缩及混淆工具 下载

    Packer 3.0 JS压缩及混淆工具 下载

Global site tag (gtag.js) - Google Analytics