在我们日常的网站开发工作中，一个页面难免会引用到各种样式及脚本文件。了解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框架下，从零开始一步一步实现上述处理流程，最终给出一套完整的代码方案以供各位参考。

JS&CSS文件请求合并及压缩处理研究（一）的更多相关文章

  1. JS&CSS文件请求合并及压缩处理研究（五）

    接上篇.在我们最终调用 @Html.RenderResFile(ResourceType.Script) 或者 @Html.RenderResFile(ResourceType.StyleSheet) ...

  2. JS&CSS文件请求合并及压缩处理研究（三）

    上篇我们进行了一些代码方面的准备工作.接下来的逻辑是:在View页面解析时,通过 Html.AppendResFile 方法添加的资源文件,我们需要按照分组.优先级,文件名等条件,对其路径进行合并.具 ...

  3. JS&CSS文件请求合并及压缩处理研究（四）

    本篇将会尝试对之前的代码进行相关的单元测试,验证路径合并规则的覆盖率及正确性. 熟悉 ASP.NET MVC 开发的朋友应该知道,微软在MVC框架下集成了一款名为 Microsoft.VisualSt ...

  4. JS&CSS文件请求合并及压缩处理研究（二）

    上篇交待了一些理论方面的东西,并给出了另外一种解决方案的处理流程.本篇将根据该处理流程,开始代码方面的编写工作. 1,打开VS,新建ASP.NET MVC Web项目,项目类型选择空.名称为 Mcmu ...

  5. ASP.NET MVC 4 Optimization的JS/CSS文件动态合并及压缩

    JS/CSS文件的打包合并(Bundling)及压缩(Minification)是指将多个JS或CSS文件打包合并成一个文件,并在网站发布之后进行压缩,从而减少HTTP请求次数,提高网络加载速度和页面 ...

  6. 开箱即用 - Grunt合并和压缩 js,css 文件

    js,css 文件合并与压缩 Grunt 是前端自动化构建工具,类似webpack. 它究竟有多强悍,请看它的 介绍. 这里只演示如何用它的皮毛功能:文件合并与压缩. 首先说下js,css 合并与压缩 ...

  7. Web性能优化之动态合并JS/CSS文件并缓存客户端

    来源:微信公众号CodeL 在Web开发过程中,会产生很多的js/css文件,传统的引用外部文件的方式会产生多次的http请求,从而加重服务器负担且网页加载缓慢,如何在一次请求中将多个文件一次加载出来 ...

  8. 前端js,css文件合并三种方式,bat命令

    前端js,css文件合并三种方式,bat命令 前端js文件该如何合并三个方式如下:1. 一个大文件,所有js合并成一个大文件,所有页面都引用它.2. 各个页面大文件,各自页面合并生成自己所需js的大文 ...

  9. 使用PHP和GZip压缩网站JS/CSS文件加速网站访问速度

    使用PHP和GZip压缩网站JS/CSS文件加速网站访问速度 一些泛WEB 2.0网站为了追求用户体验,可能会大量使用CSS和JS文件.这就导致在服务器带宽一定的情况下,多用户并发访问速度变慢.如何加 ...

随机推荐

  1. python3 slice

    Python 3.4.3 (v3.4.3:9b73f1c3e601, Feb 24 2015, 22:43:06) [MSC v.1600 32 bit (Intel)] on win32Type & ...

  2. 使用Enitity Framework实现增删改查服务中的一些通用思路

    添加 → 方法参数中有一个有关添加视图模型类型的形参,比如vm→ 根据vm的某个属性,比如Name判断在上下文中是否存在,如果不存在就抛EntityNotFoundException异常→ 判断vm所 ...

  3. java综合

    java环境变量配置:http://jingyan.baidu.com/article/f96699bb8b38e0894e3c1bef.html 1.导入项目 当下载了包含Eclipse 项目的源代 ...

  4. ADB工具包15秒快速安装器，已集合ADB、FASTBOOT工具箱和最新的驱动程序

    http://www.cnroms.com/adb-and-fastboot-toolkit-with-google-usb-drivers.html 通过电脑管理安卓手机需要的三个最常用的工具包集合 ...

  5. Codeforces Beta Round #80 (Div. 2 Only)【ABCD】

    Codeforces Beta Round #80 (Div. 2 Only) A Blackjack1 题意 一共52张扑克,A代表1或者11,2-10表示自己的数字,其他都表示10 现在你已经有一 ...

  6. finished with non-zero exit 添加v7包报错的问题

    错误: 添加 compile 'com.android.support:appcompat-v7:22.2.0'后报错,里面有其它的jar包,但是只要添加这个v7包就报错. Error:Executi ...

  7. WPF笔记一

    笔记内容: BUG.WPF运行窗体时调用Hide()方法,然后再Show()异常的解决方案 WPF 窗体设置为无边框 选择本地文件 选择文件夹 WPF实现右下角弹出消息窗口 WPF 显示 HTTP 网 ...

  8. Python: 测试函数是否被调用

    # helper class defined elsewhere class CallLogger(object): def __init__(self, meth): self.meth = met ...

  9. 【译】Python Lex Yacc手册

    本文是PLY (Python Lex-Yacc)的中文翻译版.转载请注明出处.这里有更好的阅读体验. 如果你从事编译器或解析器的开发工作,你可能对lex和yacc不会陌生,PLY是David Beaz ...

  10. js-2

    var myarray= new Array(); var myarray= new Array(8); var myarray= new Array(66,80,60,59,70); var mya ...