2020
07-15

closure compiler代码优化,网页打开速度优化之jquery代码优化压缩

最近感觉网站打开速度变慢了,所有就想着压缩一下jquery脚本,以前也是把网页里面的图片延迟加载了,效果不是很理想,由于使用“lazyload.js”对图片懒加载,需要替换真实图片地址,对搜索引擎抓取不利,所有使用了《Qazy.js延迟加载懒加载图片》,Qazy是一个图像延迟加载程序,与库无关(没有jQuery)。Qazy移除负面SEO影响。这就是它有别于其他懒惰加载器的原因。

<body>
<img src="lazy-loading.jpg" data-qazy="true">
<br>
<img src="offline-web-apps.jpg" data-qazy="true">
<br>
<img src="random-color.jpg" data-qazy="true">
<br>
<img src="revel-scroll.jpg" data-qazy="true">
<br>
<img src="wordpress-fields-metaboxes.jpg" data-qazy="true">
</body>

Qazy应用的代码示例:不需要jquery库,只需要引用一个5K的JS即可,非常方便。

github地址:https://github.com/narayanprusty/Qazy

网页加速之jquery代码压缩 

网页打开速度优化之jquery代码优化压缩

首先想了解jquery使用什么压缩的, 网上找了半天,说法不一样,后来还是在jquery官网的最频繁问题中找到了答案,但这已经是绕了一大圈之后的事情了。

 (a)根据我看到的一些信息,jquery压缩最早是用 Dean Edwards' Packer    进行压缩的,大概是在jquery1.3版本吧(我在一本jquery的书上看到的。)。这个东西出来的比较早,作者好像也是头 大牛,目前是3.0版本,好像是在线版本,我自己把代码去他网站上压缩,无法使用,会出错误。

   (b)后面jquery换成yuicompressor     进行压缩,具体哪个版本不太清楚,有篇文章的作者说:他去jquery的svn中找了一下,发现有yuicompressor的文件,然后他特意用jQuery.js试了一下,处理过的文件和jQuery.min.js一模一样。原帖地址。

   (c) 偶滴神啊,最后我在jquery官网找到了这么一段话。How do I compress my code?

内容如下:

Generally the best way to do it is to use the Google Closure Compiler (used by jQuery) or YUI compressor. jQuery provides a pre-minified version of jQuery for your convenience.

Packing JavaScript using Dean Edwards' Packer (specifically using the base64 encode) is not recommended, as the client-side decoding has significant overhead that outweighs the file-size benefits.

大致意思是说:jquery用的是google的开源js压缩工具,Google Closure Compiler和YUI compressor 是目前最佳的js压缩方式。  Dean Edwards‘ packer 是不推荐使用的!!

Closure Compiler Service地址: https://closure-compiler.appspot.com/home

优化前:

var x=5*11;
alert(x*Math.random());

优化后:

优化时进行直接量计算,得到:

var x=55;
alert(x*Math.random());

高级模式下,甚至直接消除没有显式导出的变量 x:

alert(55*Math.random());

如无特殊说明,解压密码均为:aisoa.cn

您可能感兴趣的文章

支付宝打赏支付宝打赏微信打赏微信打赏