加入收藏 | 设为首页 | 会员中心 | 我要投稿 湖南网 (https://www.hunanwang.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 运营 > 正文

在处事端归并和压缩JavaScript和CSS文件

发布时间:2018-10-13 08:11:32 所属栏目:运营 来源:站长网
导读:Web机能优化最佳实践中最重要的一条是 镌汰HTTP哀求 ,它也是 YSlow 中比重最大的一条法则。镌汰HTTP哀求的方案首要有归并 Java Script和CSS文件、 CSS Sprites 、 图像映射(Image Map) 和 行使Data URI来编码图片 。CSS Sprites和图像映射此刻已经四处

好比,有两个JavaScript文件,http://localhost/example/a.js,http://localhost/example/b.js,那么行使Minify归并的URL是http://localhost/min/f=/example/a.js,/example/b.js,直接把这个URL放到页面中就可以行使了。

现实上Minify不只仅实现了归并成果,同时默认在归并的同时还会对文件举办精简压缩,假如你在当地自己就对文件举办压缩了,好比行使YUI Compressor,那么可以在config.php中举办如下配置打消Minify的压缩以晋升机能:

$min_serveOptions['minifiers']['application/x-javascript'] = '';
$min_serveOptions['minifiers']['text/css'] = '';

假如处事端支持Java,那么也可以对Minify举办简朴设置而实现操作YUI Compressor压缩JavaScript和CSS文件

直接在处事端举办归并和压缩,这很是的机动,也极大的减轻了前端开拓成就的陈设进程,真使事半功倍。更多设置请看Minify CookBookWiki

在YUI3中行使Minify

在YUI2中,归并机制只支持库自己的文件,自界说的文件会单唯逐一加载。从YUI3开始,模块变得更小,这样就导致行使归并时URL会变长,但在IE下URL的最大值是2083,Apache默认的URL最大值是8192,以是当URL在对应赏识器下超出最大值时,YUI3会自动按照赏识器判定举办拆分成多个归并的URL,而且还提供了maxURLLength来配置最大值。而从YUI3.1.0开始,不只仅支持自界说文件的归并,还支持可以行使多个提供归并处事的CDN,即可以对YUI组件行使http://yui.yahooapis.com这个CDN,别的文件行使其他支持归并的CDN,这样很是的适用、利便和机动。示例在YUI3中行使Minify就声名白这点。

因为YUI默认URL的归并情势和Minify的不沟通,以是在YUI实例化时必要操作正则替代来实现YUI3支持Minify的URL归并情势,但这种方法既不机动,且有风险,不友爱又服从低。较量简朴的方法是直接修改YUI 3的源码,如示例在修改后的YUI3中行使Minify。同时,YUI 3.1.*的版本有一个bug,即同时归并JavaScript和CSS时,较短的谁人URL末了处多一个&标记,如示例在YUI3中行使Minify中:

http://yui.yahooapis.com/combo?3.1.1/build/widget/assets/skins/sam/widget.css&
3.1.1/build/console/assets/skins/sam/console.css&

http://dancewithnet.com/min/b=yui&f=3.1.1/tabview/assets/skins/sam/tabview.css&

这两种都可以行使,固然在早期的IE赏识器版本(如IE6)中会有无法理会的风险,且影响某些特定环境下的缓存,但当行使修改后的YUI时,归并的URL酿成相同/min/b=yui&f=3.1.1/tabview/assets/skins/sam/tabview.css,的样子,就会呈现bug了。对付YUI的Combo Handler来嗣魅这是一个小bug,以是YUI3把这个bug配置为P5。但当我们改革YUI3来更好的支持Minify时,还要办理这个题目,详细方案请看示例在修改后的YUI3中行使Minify

在CDN上行使Minify

CDN的全称是Content Delivery Network,即内容分发收集。其最常应用就是通过位于差异地理位置的处事器把静态资源陈设到用户最近的边沿,这样能有用办理Web处事中大量静态资源的速率和机能题目。因为实验本钱较量高,以是在现实的应用中,大型公司一样平常会组建本身的CDN,而小型公司只能租借第三方的CDN,但不管奈何这两种方法都不会影响在处事端实验归并和压缩措施。一样平常环境下,静态资源也并不是直接上传到CDN,而是先传到一台靠山处事器,然后各地CDN的前端Cache处事器按需索取。YUI CDN的Combo Handler就是陈设在其靠山处事器上的,Minify也应云云。简朴图示如下:
在处事端归并和压缩JavaScript和CSS文件

当一个资源哀求到CDN时,CDN会先搜查当地是否存在这个资源,假若有则会直接返回该资源,假如没有则会哀求其靠山处事器,靠山处事器会依据资源URL的信息举办响应的处理赏罚,然后返回给CDN,CDN就会存储这个资源,再次呈现这个资源哀求时就无需哀求靠山处事器了。以是,固然归并出格是压缩JavaScript和CSS文件是耗损时刻的,可是因为只必要第一次,而且第一次根基上由我们本身会见掉(我们可以建设措施自动举办一次会见来担保,现实上图片优化也可以回收这种方法),以是根基上很安详。这正是今朝在口碑网实验的JavaScript和CSS归并方案,在第4届D2的《前端机能优化和自动化》中也先容了它。

(编辑:湖南网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

热点阅读