扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这个站点里面有四个压缩引擎,一个YUI压缩,一个UglifyJS压缩,一个JSPacker压缩,和一个新的JsMin压缩。
成都创新互联公司基于分布式IDC数据中心构建的平台为众多户提供成都服务器托管 四川大带宽租用 成都机柜租用 成都服务器租用。
一般用UglifyJS引擎压缩就可以。jQuery和好些其他的前端项目就是用他压缩的。
另外给个建议,你把你的JS文件用匿名函数的方式封装起来,对外只给一个接口。这样JS压缩引擎就可以把你匿名函数中不对外开放的内部变量名称都给替换成a,b,c,d这样的单字符,很能节省体积。
主要用了两个html5的 API,一个file,一个canvas,压缩主要使用cnavas做的,file是读取文件,之后把压缩好的照片放入内存,最后内存转入表单下img.src,随着表单提交。
照片是自己用单反拍的,5M多,压缩下面3张分别是600多kb,400多kb,300kb的最后那张失真度很大了,压缩效率蛮高的。
!DOCTYPE html
htmlhead meta charset="utf-8"/ titleFile API Test/title script type="text/javascript" src="js/jquery-1.11.0.min.js"/script script type="text/javascript" src="js/JIC.js"/script style #test{ display: none; } /style/headbodyinput type="file" id="fileImg" form img src="" id="test" alt=""/formscript function handleFileSelect (evt) { // var filebtn = document.getElementById(id); // console.log(filebtn); // var files = filebtn.target.files; // console.log(filebtn.target); // console.log(files); var files = evt.target.files; for (var i = 0, f; f = files[i]; i++) { // Only process image files. if (!f.type.match('image.*')) { continue; } var reader = new FileReader(); // Closure to capture the file information. reader.onload = (function(theFile) { return function(e) { // Render thumbnail. // console.log(evt.target.files[0]); // console.log(e.target); console.log(e.target.result); var i = document.getElementById("test"); i.src = event.target.result; console.log($(i).width()); console.log($(i).height()); $(i).css('width',$(i).width()/10+'px'); //$(i).css('height',$(i).height()/10+'px'); console.log($(i).width()); console.log($(i).height()); var quality = 50; i.src = jic.compress(i,quality).src; console.log(i.src); i.style.display = "block"; }; })(f); // Read in the image file as a data URL. reader.readAsDataURL(f); } } document.getElementById('fileImg').addEventListener('change', handleFileSelect, false);/script/body/html
var jic = { /** * Receives an Image Object (can be JPG OR PNG) and returns a new Image Object compressed * @param {Image} source_img_obj The source Image Object * @param {Integer} quality The output quality of Image Object * @return {Image} result_image_obj The compressed Image Object */ compress: function(source_img_obj, quality, output_format){ var mime_type = "image/jpeg"; if(output_format!=undefined output_format=="png"){ mime_type = "image/png"; } var cvs = document.createElement('canvas'); //naturalWidth真实图片的宽度 cvs.width = source_img_obj.naturalWidth; cvs.height = source_img_obj.naturalHeight; var ctx = cvs.getContext("2d").drawImage(source_img_obj, 0, 0); var newImageData = cvs.toDataURL(mime_type, quality/100); var result_image_obj = new Image(); result_image_obj.src = newImageData; return result_image_obj; }, function ****(***)
简单的压缩一般是:删除注释和空白符,替换变量名。
更激进点的做法还包括:删除无用代码,内联函数,等价语句替换等。
有些开发者出于保护代码的原因,还可能会对代码进行混淆处理。
通常深度压缩JS都必须要做的一步就是尽量地缩短变量名,因为一份体积巨大的JS代码,其中的变量名会占去不少空间。
压缩js必须要注意:
1、压缩前的代码格式要标准。因为去掉换行与空格时,所有语句就变成一行,如果你的代码有瑕疵(比如某行少了个分号),那就会导致整个文件报错。当然,现在有的压缩工具已经比较智能了。
2、备份原文件。压缩很可能不会一次成功,一般要多试,多改。
js压缩工具:
1. YUI Compressor
2. Google Closure Compiler
就是将标准的javascript按照一定方式进行体积压缩,但是功能不变,体积变小了,便于传输
HTML
HEAD
TITLEDecision Helper/TITLE
META http-equiv=Content-Type content="text/html; charset=gb2312"
SCRIPT LANGUAGE="JavaScript"
!--
function Compress(strNormalString)
{
alert("压缩前长度:" + strNormalString.length);
var strCompressedString = "";
var ht = new HashTable;
for(i = 0; i 128; i++) {
var e = new HashTableElement;
e.key = i;
e.code = i;
ht.Insert(e);
}
var used = 128;
var intLeftOver = 0;
var intOutputCode = 0;
var pcode = 0;
var ccode = 0;
var k = 0;
for(var i=0; istrNormalString.length; i++) {
ccode = strNormalString.charCodeAt(i);
k = (pcode 8) | ccode;
if((intSearch = ht.Search(k)) != null) {
pcode = intSearch;
} else {
intLeftOver += 12;
intOutputCode = 12;
intOutputCode |= pcode;
pcode = ccode;
if(intLeftOver = 16) {
strCompressedString += String.fromCharCode( intOutputCode ( intLeftOver - 16 ) );
intOutputCode = (Math.pow(2,(intLeftOver - 16)) - 1);
intLeftOver -= 16;
}
if(used 4096) {
used ++;
var e = new HashTableElement;
e.key = k;
e.code = used - 1;
ht.Insert(e);
}
}
}
if(pcode != 0) {
intLeftOver += 12;
intOutputCode = 12;
intOutputCode |= pcode;
}
if(intLeftOver = 16) {
strCompressedString += String.fromCharCode( intOutputCode ( intLeftOver - 16 ) );
intOutputCode = (Math.pow(2,(intLeftOver - 16)) - 1);
intLeftOver -= 16;
}
if( intLeftOver 0) {
intOutputCode = (16 - intLeftOver);
strCompressedString += String.fromCharCode( intOutputCode );
}
alert("压缩后长度:" + strCompressedString.length);
return strCompressedString;
}
function Decompress(strCompressedString)
{
var strNormalString = "";
var ht = new Array;
for(i = 0; i 128; i++)
{
ht[i] = String.fromCharCode(i);
}
var used = 128;
var intLeftOver = 0;
var intOutputCode = 0;
var ccode = 0;
var pcode = 0;
var key = 0;
for(var i=0; istrCompressedString.length; i++) {
intLeftOver += 16;
intOutputCode = 16;
intOutputCode |= strCompressedString.charCodeAt(i);
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流