zoukankan      html  css  js  c++  java
  • JS&CSS文件请求合并及压缩处理研究(一)

    在我们日常的网站开发工作中,一个页面难免会引用到各种样式及脚本文件。了解Web开发的朋友们都知道,页面引用的每一个:

    <link href="style.css" rel="stylesheet" type="text/css">

      或者:

    <script type="text/javascript" src="jquery.js"></script>

    都会由浏览器向服务器发出一个请求,服务器返回对应的内容供浏览器渲染使用。对于稍微上点规模的网站,页面中难免会嵌入大量样式及脚本文件,每个文件动辄几K,多辄几十上百K大小,严重影响了页面加载及渲染速度。再加之各低版本浏览器请求并发数量的限制,我朝蜗牛一般的网速环境,使这种情况雪上加霜。

    针对样式及脚本文件请求和加载方面的优化,常规的方式有以下几种:

    1,服务器端利用第三方库进行压缩优化处理,同时Web服务器开启Gzip压缩输出。

    该方式可以极大的减小网络传输数据量,从而缩短客户端资源加载时间。应用较广。

    参考各种第三方压缩工作压缩比及效率分析:
    http://coderjournal.com/2010/01/yahoo-yui-compressor-vs-microsoft-ajax-minifier-vs-google-closure-compiler/

    2,将页面中次优先级的脚本文件置于页面底部。

    我们知道,位于<head></head>区域的样式及脚本文件请求,会阻塞接下来页面的加载,而很多时候,该区域的部分资源文件并不是在页面首次呈现时就用的上的。比如页面中一些按钮的点击处理、图像特效、提交验证及异步请求等。将这些“低优先级”的脚本文件移到底部,避免了一些非必要阻塞,从而改善页面的加载速度。这也是现在绝大多数站点使用的方法。

    3,利用类似requirejs等第三方库,实现脚本文件的按需加载。

    比如现在有一个页面,首次加载的时候,我们只下载jquery文件,只有当用户点击了页面中的某一个按钮,或者发起了一次异步请求,我们才加载另外一个function.js文件。这就是所谓的按需加载。相关文章可以参考:

    http://www.cnblogs.com/chenxizhang/archive/2013/05/16/3081941.html
    该方法的缺点是需要对页面资源文件进行较高程度的模块化,对开发人员要求较高。

    4,利用内容分发网络(CDN)加速

    由于主流浏览器对于同一个域所允许保持的连接数都是有限制的,那么,我们采用CDN的做法来将某些内容放在不同的域里面,从一定意义上可以增加下载的并行度。比如我们可以设置一台独立的样式或脚本文件服务器,与页面文件的域相区分,则可以利用CDN带来的好处提高页面加载速度。又比如页面引用Google提供的jquery地址:
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>,
    同样可以缩短页面加载时间,减少服务器网络流量。当然,利用CDN的缺点也是显而易见的,硬件成本提升,请求节点增多导致网络出错机率提升等。该方法常被一些大型网站采用。

    5,人工将样式或脚本文件合并,辅以相关的优化压缩手段输出至页面。

    致命的缺点是多个独立的功能文件揉合成一个整体之后,不便于功能维护,同时非智能的处理方式费时费力。该方法仅存在于理论的象牙塔中,无实际作用。


     大道一条,功法千万。本文在代码层面提供了以下处理方式。以ASP.NET MVC框架为例:

    (1),假如服务器端存在资源文件:A.js、B.js;A.css、B.css

    (2),在View层。在需要添加脚本的地方,调用Html辅助方法:

    Html.AppendFile(ResourceType.Script,"[A.js]"); //添加脚本文件A.js
    Html.AppendFile(ResourceType.Script,"[B.js]"); //添加脚本文件B.js

    或者:

    Html.AppendFile(ResourceType.StyleSheet,"[A.css]"); //添加样式文件A.css
    Html.AppendFile(ResourceType.StyleSheet,"[A.css]"); //添加样式文件B.css

      另外,结合分组、优先级等手段,可以对资源文件进行更加精准的控制。

    (3),最终输出的html文件中,资源文件请求格式为:

    <script src="resource/style?href=[A,B]&compress" type="text/javascript"></script>

      其中,最后的compress参数用来标识是否进行压缩。

    (4),在 resource/style[script] 处理程序中,我们提取A,B脚本文件内容,合并压缩后输出至客户端。

    以上方法带来的好处是显而易见的:
    (1),自动实现了资源文件的请求合并。未损失各个文件的功能独立性。
    (2),我们在编写服务器端View层代码的时候,其实与平常并无二致。唯一的区别在于现在调用的是Html辅助方法。
    (3),辅以服务器端代码压缩,CDN等手段,可以极大的改善客户端页面加载速度。

    接下来,鄙人将在ASP.NET MVC框架下,从零开始一步一步实现上述处理流程,最终给出一套完整的代码方案以供各位参考。

  • 相关阅读:
    ::在c++中的应用
    VS2008工程一些操作
    vs2008添加链接库
    从服务器 (PC 端 ) 发送图片到客户端 (android 手机端 ) [转]
    Android PowerImageView实现,可以播放动画的强大ImageView[转]
    INI文件读写
    关于超链接伪类的使用,:link,:visited,:hover
    关于div的居中显示
    常见公告栏信息效果的实现
    利用ul,li,span,position:relative实现文本的居中显示
  • 原文地址:https://www.cnblogs.com/mcmurphy/p/3341136.html
Copyright © 2011-2022 走看看