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

2013-10-01  来源:本站原创  分类:Tiny框架  人气:2 

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

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

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

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

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

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

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

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

两下做下对比:

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

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

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

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

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

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

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

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

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

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

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

相关文章
  • JS.CSS合并带来的效率提升 2013-10-01

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

  • 高性能WEB开发 JS.CSS的合并.压缩.缓存管理 2014-04-26

    本篇文章主要讨论下目前JS,CSS 合并.压缩.缓存管理存在的一些问题,然后分享下自己项目中用到的1个处理方案,并提供1个实例下载. 存在的问题: 合并.压缩文件主要有2方面的问题: 1. 每次发布的时候需要运行一下自己写的bat文件或者其他程序把文件按照自己的配置合并和压缩. 2. 因生产环境和开发环境需要加载的文件不一样,生产环境为了需要加载合并.压缩后的文件,而开发环境为了修改.调试方便,需要加载非合并.压缩的文件,所以我们常常需要在JSP中类似与下面的判断代码: <c:if test=&qu

  • Windows下使用apache模块实现合并多个js.css提高网页加载速度 2013-11-14

    这篇文章主要介绍了Windows下使用apache模块实现合并多个js.css提高网页加载速度,本文使用的模块是基于mod_concat自己修改的,需要的朋友可以参考下 现在的网站表现力越来越丰富,页面加载的js和css自然也越来越多.当网站页面上的js和css太多,浏览器打开页面的速度就会很慢,明显降低了用户的体验.使用mod_concatx, 可以合并多个文件在一个http响应报文中,可以有效提高js/css的加载速度. 示例效果如下: mod_concatx模块是在mod_concat基础

  • 使用BAT一句话命令实现快速合并JS.CSS 2014-07-15

    这篇文章主要介绍了使用BAT一句话命令实现快速合并JS.CSS,本文使用CMD中的copy命令实现文件的合并,然后写成一个批处理文件执行,更加的方便,需要的朋友可以参考下 在项目开发环境下,我们会把 JS 代码尽可能模块化,方便管理和修改,这就避免不了会出现一个项目自身 JS 文件数量达到 10 个或者更多. 而项目上线后,会要求将所有 JS 文件合并为 1 个或者几个,手动的操作虽然也不是问题,但每次修改更新都要手动操作合并一遍,这就肯定是个噩梦了. 这种情况下,一些工具也就随之产生,比如在线

  • 高性能WEB开发之JS.CSS的合并压缩 2015-03-17

    存在的问题: 合并.压缩文件主要有2方面的问题: 1. 每次发布的时候需要运行一下自己写的bat文件或者其他程序把文件按照自己的配置合并和压缩. 2. 因生产环境和开发环境需要加载的文件不一样,生产环境为了需要加载合并.压缩后的文件,而开发环境为了修改.调试方便,需要加载非合并.压缩的文件,所以我们常常需要在JSP中类似与下面的判断代码: <c:if test="${env=='prod'}"> <script type="text/javascript&q

  • Asp.net程序优化js.css实现合并与压缩的方法 2015-02-12

    这篇文章主要介绍了Asp.net程序优化js.css实现合并与压缩的方法,使用第三方组件实现访问时将js与css文件压缩并缓存在客户端的效果,非常具有实用价值,需要的朋友可以参考下 本文实例讲述了Asp.net程序优化js.css实现合并与压缩的方法.分享给大家供大家参考.具体实现方法如下: 访问时将js和css压缩并且缓存在客户端, 采用的是Yahoo.Yui.Compressor组件来完成的,用户可以点击此处本站下载. 创建一个IHttpHandler来处理文件 public class C

  • nginx js.css多个请求合并为一个请求(concat模块) 2013-10-17

    模块介绍 mod_concat模块由淘宝开发,目前已经包含在tengine中,并且淘宝已经在使用这个nginx模块.不过塔暂时没有包含在nginx中.这个模块类似于apache中的modconcat.如果需要使用它,需要使用两个"?"问号. 来个范例: http://example.com/??style1.css,style2.css,foo/style3.css 以上将原先3个请求合并为1个请求 如果你担心文件被用户的浏览器缓存而没有及时更新,你依旧可以带上一个版本号的参数,如下:

  • JS CSS文章查看系统 2013-12-10

    自己写了个JS+CSS的小东西,用来看提升用户体验的. Name:WindowsTextShow: 做成一个连接:点击后执行JavaScript函数: Function: WindowsTextShow(Id div.id); div.id 为要展示文本的div的ID: 代码如下: Untitled Page <跑跑卡丁车>国内运营商裁员超30% 看文字 卡丁车"熄火" 网游冬意渐增 本报记者 刘方远 毕业生小王(化名)近日陷入了找工作的奔波之中.不久前,他还以为投身号称&

  • php压缩HTML函数轻松实现压缩html/js/Css及注意事项 2014-02-14

    如何提高网页加载速度需要对网页怎样的优化等等,都是站长们所关心的问题,其实压缩网页的方法很多,本文将讲解一下php压缩HTML函数轻松实现压缩html/js/Css,感兴趣的朋友可以了解下,希望本文对你有所帮助 压缩HTML的起因 如何提高网页加载速度 ,需要怎么对html页面优化相信是每个拟提高建站技术站长曾想到的问题,其实网页优化的方法还是很多. 有童鞋询问higrid如何 压缩HTML,也就是说能不能 把所有的html.js.Css在运行前都压缩成一行,清除注释标记.换行符.空格.制表符等

  • NO.91 禅道使用分享第十三期:按流程分工协作,工作效率提升. 2013-07-15

    关于禅道使用经验分享 禅道使用经验分享,欢迎大家一起来探讨关于禅道项目管理软件使用方面的问题.我们广泛的收集对禅道的看法和建议,充分了解广大用户使用禅道的具体情况和要求,进而不断完善禅道的功能和服务. 本期禅道使用经验分享来自于上海乘风企业管理咨询有限公司的测试经理宁红举先生.该公司主业务是物流企业管理的技术支持,以及物流行业所需的管理系统的软件研发等.非常感谢他百忙之中接受禅道的采访,分享他和工作团队使用禅道的经验和心得. 分享嘉宾 宁红举.测试经理.主要负责需求管理.流程监控.测试计划及测试

  • Ant and the YUI Compressor using the compressed js css 2009-07-17

    Use two jar package Download YUIAnt.jar http://www.ubik-ingenierie.com/miscellanous/YUIAnt/ Download yuicompressor-2.4.2.jar http://www.julienlecomte.net/yuicompressor/ enough to build the ant script <property name="context" value="${bas

  • YUI Compressor js / css compression tools 2009-07-17

    YUI Compressor is provided by Julien Lecomte a Javascript compression tools. YUI Compressor using the Java language. Therefore needed for the operation of its Java Runtime Environment (version 1.4 or above) support. Usage: / / Compression JS java-jar

  • Great web / js / css code website tools 2009-08-24

    Great web / js / css code website tools

  • YUI compression JS, CSS 2009-12-16

    YUI Compression: Quote http://www.javaeye.com/topic/368724 Use two jar package YUIAnt.jar Download http://www.ubik-ingenierie.com/miscellanous/YUIAnt/ yuicompressor-2.4.2.jar Download http://www.julienlecomte.net/yuicompressor/ 1. <property name="

  • Js css achieved with some of the methods of operation, set to facilitate the need to control the css js friend 2010-06-01

    Quoted from: http://myext.cn/Article/1169.html Js css achieved with some of the methods of operation, set to facilitate the need to control the css js friend / / Get the real elements, the final value of the function of CSS style attributes function

  • Dynamic load JS / CSS files 2010-06-17

    Dynamic load JS / CSS file, you can determine whether loaded. function loadScript(url, callback) { var script = document.createElement("script") script.type = "text/javascript"; if (script.readyState) { // IE script.onreadystatechange

  • Access to Web pages with JavaScript js.css.Flash and other documents 2010-06-22

    Contents I. Introduction II E books or web pages from the files of the general steps to get three, from E to get the book or web page links to four incoming css files, books or web pages from E to get the js file link came in the five, from the E boo

  • Access to Web pages with JavaScript and other documents js.css.Flash 2010-06-22

    Contents I. Introduction II E books or web pages from the files of the general steps to get three, from E to get the book or web page links to four incoming css files, books or web pages from E to get the js file link came in five books from the E Ge

  • WEB development of high-performance (7) - JS.CSS merger. Compression. Cache management 2010-06-23

    This article focuses on under the current JS, CSS consolidation, compression, cache management some problems, and then share my project used a treatment program, and provides an example of download. Problems: Combined, compressed files are mainly two

  • TBCompressor 2.4.2 Taobao team with the js css compression tool Wandering Drifter 2010-07-09

    TBCompressor 2.4.2 Taobao team with the js css compression tool Wandering Drifter Today, the quest for a beautiful website, more and more powerful functionality JavaScript css with the credit contributed to the content of the website or the special e