JS、CSS合并带来的效率提升

JS合并的必要性分析

一、效率因素

一般来说,在一个WEB工程中,需要使用大量的JS,这些JS可能来自许多提供者。

而在页面访问时,每次访问资源都要发起一个http请求,因此,即使文件已经缓冲,也需要发出一次http请求来确认文件是否被改变过。如果js个数比较少,那么没有什么问题,但是当JS文件数目比较多的时候,就会导致页面访问效率下降。如果能把所有的js都合并为一个文件,那么就可以节省几百毫秒,甚至几秒的时间,视网络状况而定。如果不需要做任何人为处理,就节省下来这些时间,无疑是相当有意义的。

二、JS引入顺序问题

如果说,效率问题还只是用户体验的问题,而JS引入顺序问题,就会导致你的页面是否可以执行的问题。我们知道,如果JS如果有依赖其它JS库,则被依赖的JS库就要放在依赖的JS库的前面,否则就会发生js错误。当引用的JS库比较小的时候,问题当然不大,但是做企业应用的时候,要用到的JS非常多,甚至在开发后期或维护期还会增加新的JS,这时稍有不慎,就会出现JS引入顺序问题。

为此,Tiny框架提供了解决方案,可以把工程中所有引用的JS资源都根据依赖关系,按顺序放在一个JS引用当中,它可以保证JS的引用顺序是正确的,同时由于所有的JS都只放入一个文件,因此,只会发出一次HTTP请求;第三提供了文件压缩传输功能,所以会保证网络传输量最小。

从下图中,可以看到,引入的js只有一个文件:uiengine.uijs,总共用时609ms

再次访问,可以看到,静态资源都已经是304,全部来自缓冲了,其中js用时58ms。

实际上这里面包含的JS文件有许多个,串行用时5434ms:

第二次访问的时间:js文件都已经是在本地缓冲了,串行用时395ms

两下做下对比:

合并为一个文件时,首次加载用时609ms,未合并为一个文件时,首次加载串行用时5434,节省时间:4825ms,时间比率为1:8.92,也就是说只有原来的11%的时间。

合并为一个文件时,缓冲后加载用时58ms,未合并为一个文件时,缓冲后加载串行用时395ms,节省时间:337ms,时间比率为15.7,也就是说只有原来的15%。

单纯从js加载方面来看,效率提升明显!

加上压缩过滤器,看看情况如何?

可以看到,原本5M的传输量已经变为936KB,访问时间为352ms,较压缩之前访问时间,少了237ms,时间是的58%,因此,访问时间有一定提升,尤其是网络带宽只有原来的18%,这个提升还是非常显著的。

不同的访问,数据会有一些差异,会有一些变化,但是总体来看差异还是显著的。缓冲后再访问,加载的串行时间比率为 1:合并文件个数,也就是说与合并的文件个数成正比。

新又增加了CSS合并,解决了图片资源引用的问题,有图有真相:

从图中看到,CSS都已经被合并到uiengine.uicss文件中了。

下面还有一个css没有合并,是由于这个是皮肤样式,要用来动态切换的,如果把它也合并了,就没有办法进行皮肤动态切换了。

时间: 2024-10-03 12:56:03

JS、CSS合并带来的效率提升的相关文章

magento -- 推荐插件 -- 智能版Js和Css合并 --Lesti::Merge(Smart Merging of Js and Css)

名称:   Lesti::Merge(Smart Merging of Js and Css) Extension Key:http://connect20.magentocommerce.com/community/Lesti_Merge 网址:    http://www.magentocommerce.com/magento-connect/lesti-merge-2265.html 介绍:   基于Magento原生的合并JS和CSS功能,提供更聪明更智能的JS和CSS合并方案,可以根据

物联网技术浪潮将给IT职位与工作效率提升带来哪些深远影响

在北卡罗来纳州凯里市通过安装水表系统以自动化方式将用水情况发布给公共事业部门之后,其十个相关抄表岗位旋即遭到裁撤.而日前水资源集团亦凭借着物联网技术对内部工作岗位进行了削减. 过去工作人员每月需要检查总计约六万块水表,如今新的水表记录系统能够每小时检查水资源使用情况,并将使用量数据通过无线方式以每天四次的频率向总部报告. 能够每小时掌握水资源使用情况使得相关部门得以及时发现异常问题.相较于由现场检测人员带来的高额运营成本,该水资源部门如今已经可以主动联系客户,提醒其厕所及花园可能存在的漏水现象.

常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数_javascript技巧

为了方便资源管理和提升工作效率,常用的js和css文件的加载应该放在一个统一文件里面完成,也方便后续的资源维护.所以我用js写了以下方法,存放在"sourceController.js"文件内. function sourceController(){ var root = ""; var cssCount = 0; // css加载计数器 var jsCount = 0; // js加载计数器 this.callfunc = null; // 回调函数 this.

PHP动态压缩js,css

正式发布产品时,我们希望将项目里的js,css合并压缩,以减少http请求.防止轻易查看源代码. 使用 只需要在头部引入一下代码即可: <meta charset="utf-8"/> <title>demo</title> <?php //定义需要压缩的文件 $css = array( CSS_PATH . 'base.css', CSS_PATH . 'style.css', CSS_PATH . 'my.css' ); $js = arra

看零售先锋 上品折扣如何实现效率提升

本文讲的是看零售先锋 上品折扣如何实现效率提升,在零售行业我们知道有许多巨头如沃尔玛.王府井百货等,他们立足于零售行业已经很久,也为我们所熟悉,但是近几年,我们看到许多新的零售企业如上品折扣正在快速的成长起来,相比于传统零售巨头而言这些新兴的零售企业成长很快.比如上品折扣是一家典型的成长型企业,一方面它不仅拥有实体店,而且基于先进的信息技术,率先走上"线下+线上"双渠道模式,为零售行业开创了新的发展先河.在零售行业,上品折扣是零售业典型的代表,堪称零售行业成长的"先锋&quo

物联网如何为城市带来更多效率及永续?

你可以想象吗,在一个城市中的各个对象(例如:垃圾桶.停车格.空调等)可以自主传递讯息,借以通知与提醒人们改善与提升使用效率,如同具有人工智能般,这听起来似乎是电影情节中的场景,不存在于现实世界.不过,在日新月异的科技世界里,其科技演化发展的速度,已超乎众人的想象. 物联网如何为城市带来更多效率及永续? 上述提到的科技应用为物联网的概念,现在的企业和政府部门都积极寻找与思考,如何利用物联网的潜力.事实上,英国通讯公司Arqiva已与SigFox合作,提供在英国超过10个城市间的连结性,支持Bris

&amp;quot;华为全球CIO论坛&amp;quot;为企业勾画商机 促进效率提升

华为今日在CeBIT 2013(汉诺威消费电子.信息及通信博览会)上举办了"华为全球CIO论坛",吸引了来自世界各地50多个国家的CIO.合作伙伴与行业分析师,就企业ICT领域的热门话题进行互动交流与经验分享,为企业市场勾画出连接无限商机.促进效率提升的发展蓝图,帮助企业更好地应对ICT领域新趋势所带来的挑战与机遇. 本届"华为全球CIO论坛"的主题为"Connecting Business Opportunities in a Better Way&qu

当智慧遇到机器 捕捉效率提升1%的威力

全球有5万台在役的航空发动机,如果能将燃油消耗降低1%,那么就能节省300亿美元: 全球燃气轮机发电量大于1300GW,如果能将其发电效率提升1%,就能节省600亿美元: 全球拥有350万公里的输油管道,如果将油气勘探资本利用率提升1%,就能节省900亿美元: 全球拥有9万台在役的医疗设备,如果能将设备利用率提升1%,就能节约600亿美元-- 近日,在通用电气"当智慧遇上机器"数字工业大会上,GE全球高级副总裁.大中华区总裁兼首席执行官段小缨分享了这样一组数据,她表示:"当今

阿里天蝎计划 服务器部署效率提升10倍

本文讲的是阿里天蝎计划 服务器部署效率提升10倍 7月16日,由阿里巴巴自主研发的整机柜服务器解决方案(AliRack),在中国可信云大会上首次亮相.基于天蝎技术规范的AliRack产品已规模化应用于阿里巴巴的数据中心,对比传统方式,服务器部署效率提升10倍,总体拥有成本(TCO)降低5%,预计进一步优化可降低10%,且更加绿色节能. ▲AliRack正面侧视图 这是神秘的"天蝎计划"首次公布项目成果,标志着我国自建大型数据中心技术迈入新的发展阶段,也向业界证明了中国互联网企业的创新实