Asp.net程序优化js、css实现合并与压缩的方法

本文实例讲述了Asp.net程序优化js、css实现合并与压缩的方法。分享给大家供大家参考。具体实现方法如下:

访问时将js和css压缩并且缓存在客户端,
采用的是Yahoo.Yui.Compressor组件来完成的,用户可以点击此处本站下载。

创建一个IHttpHandler来处理文件

代码如下:

public class CombineFiles : IHttpHandler
{
        private const string CacheKeyFormat = "_CacheKey_{0}_";

private const bool IsCompress = true; //需要压缩

public bool IsReusable
        {
            get
            {
                return false;
            }
        }

public void ProcessRequest(HttpContext context)
        {
            HttpRequest request = context.Request;
            HttpResponse response = context.Response;

string cachekey = string.Empty;

string type = request.QueryString["type"];
            if (!string.IsNullOrEmpty(type) && (type == "css" || type == "js"))
            {
                if (type == "js")
                {
                    response.ContentType = "text/javascript";

}
                else if (type == "css")
                {
                    response.ContentType = "text/css";
                }

cachekey = string.Format(CacheKeyFormat, type);

CompressCacheItem cacheItem = HttpRuntime.Cache[cachekey] as CompressCacheItem;
                if (cacheItem == null)
                {
                    string content = string.Empty;
                    string path = context.Server.MapPath("");
                    //找到这个目录下所有的js或css文件,当然也可以进行配置,需求请求压缩哪些文件
                    //这里就将所的有文件都请求压缩
                    string[] files = Directory.GetFiles(path, "*." + type);
                    StringBuilder sb = new StringBuilder();
                    foreach (string fileName in files)
                    {
                        if (File.Exists(fileName))
                        {
                            string readstr = File.ReadAllText(fileName, Encoding.UTF8);
                            sb.Append(readstr);
                        }
                    }

content = sb.ToString();

// 开始压缩文件
                    if (IsCompress)
                    {
                        if (type.Equals("js"))
                        {
                            content = JavaScriptCompressor.Compress(content);
                        }
                        else if (type.Equals("css"))
                        {
                            content = CssCompressor.Compress(content);
                        }
                    }

//输入到客户端还可以进行Gzip压缩 ,这里就省略了

cacheItem = new CompressCacheItem() { Type = type, Content = content, Expires = DateTime.Now.AddDays(30) };
                    HttpRuntime.Cache.Insert(cachekey, cacheItem, null, cacheItem.Expires, TimeSpan.Zero);
                }

string ifModifiedSince = request.Headers["If-Modified-Since"];
                if (!string.IsNullOrEmpty(ifModifiedSince)
                    && TimeSpan.FromTicks(cacheItem.Expires.Ticks - DateTime.Parse(ifModifiedSince).Ticks).Seconds < 0)
                {
                    response.StatusCode = (int)System.Net.HttpStatusCode.NotModified;
                    response.StatusDescription = "Not Modified";
                }
                else
                {
                    response.Write(cacheItem.Content);
                    SetClientCaching(response, cacheItem.Expires);
                }
            }
        }

private void SetClientCaching(HttpResponse response, DateTime expires)
        {
            response.Cache.SetETag(DateTime.Now.Ticks.ToString());
            response.Cache.SetLastModified(DateTime.Now);

//public 以指定响应能由客户端和共享(代理)缓存进行缓存。   
            response.Cache.SetCacheability(HttpCacheability.Public);

//是允许文档在被视为陈旧之前存在的最长绝对时间。
            response.Cache.SetMaxAge(TimeSpan.FromTicks(expires.Ticks));

response.Cache.SetSlidingExpiration(true);
        }
        private class CompressCacheItem
        {
            /// <summary>
            /// 类型 js 或 css
            /// </summary>
            public string Type { get; set; } // js css 
            /// <summary>
            /// 内容
            /// </summary>
            public string Content { set; get; }
            /// <summary>
            /// 过期时间
            /// </summary>
            public DateTime Expires { set; get; }
        }
}

最后在配置文件中配置一下CombineFiles.axd文件,具体配置略

引用如下

代码如下:

<script type="text/javascript" src="/js/CombineFiles.axd?type=js"></script>
<link rel="stylesheet" type="text/css" href="/css/CombineFiles.axd?type=css" />

希望本文所述对大家的asp.net程序设计有所帮助。

(0)

相关推荐

  • Asp.net MVC下使用Bundle合并、压缩js与css文件详解

    前言 介绍本文的正式内容之前先引用<淘宝技术这十年>中一段话,对Web前端稍微有点常识的人都应该知道,浏览器下一步会加载页面中用到的CSS.JS(JavaScript).图片等样式.脚本和资源文件.但是可能相对较少的人才会知道,你的浏览器在同一个域名下并发加载的资源数量是有限的,例如IE 6和IE 7是两个,IE 8是6个,chrome各版本不大一样,一般是4-6个.Bundle是ASP.NET 4.5中的一个新特性,可 用来将js和css进行压缩(多个文件可以打包成一个文件,也可以说是合并多

  • ASP.NET MVC Bundles 用法和说明(打包javascript和css)

    在网页中,我们经常需要引用大量的javascript和css文件,在加上许多javascript库都包含debug版和经过压缩的release版(比如jquery),不仅麻烦还很容易引起混乱,所以ASP.NET MVC4引入了Bundles特性,使得我们可以方便的管理javascript和css文件. 原来,我们引用css和javascript文件我们需要这样一个一个的引用: 复制代码 代码如下: <scriptsrc="~/Scripts/jquery-1.8.2.js">

  • asp.net Bundle功能扩展

    前言 新建Asp.net MVC4项目的时候,在Global.asax.cs里面发现多了一句代码 BundleConfig.RegisterBundles(BundleTable.Bundles) google了以后终于弄清楚了这个的作用,发现这个东西确实非常实用,且功能强大,能够压缩合并js和CSS,但是目前的使用起来不是特别好,如果添加js或者css文件的话,需要修改BundleConfig的代码. 这里我自己简单修改了BundleConfig,对这个进行简单的扩展. 下面贴出代码: 先贴配

  • ASP.NET MVC中使用Bundle打包压缩js和css的方法

    在ASP.NET MVC4中(在WebForm中应该也有),有一个叫做Bundle的东西,它用来将js和css进行压缩(多个文件可以打包成一个文件),并且可以区分调试和非调试,在调试时不进行压缩,以原始方式显示出来,以方便查找问题. 具体优势可自行百度或参看官方介绍:http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification 这里仅简单记录下如何使用. 首先,如果是使用的ASP.NET MVC4基本或者其他内容更丰富的模板,B

  • 使用asp.net MVC4中的Bundle遇到的问题及解决办法分享

    背景    之前有过使用MVC3的经验,也建过MVC4的基本样例看过,知道有bundle这么一个方法. 近日想建个网站使用MVC4,但是我觉得在基本样例上改不好,有太多无用的东西,所以就建了一个空白的MVC的程序,然后自己写需要的东西, 将程序的目标框架从4.5降到了4.0(我使用的是VS2013),问题就来了. 问题及解决办法 1.降了目标框架之后,vs报一个警告:NuGet程序包是使用不同于当前目标框架的目标框架安装的,需要更新System.Web.Http,之前有用过NuGet, 但是只是

  • 浅谈ASP.NET中MVC 4 的JS/CSS打包压缩功能

    今天在使用MVC4打包压缩功能@Scripts.Render("~/bundles/jquery") 的时候产生了一些疑惑,问什么在App_Start文件夹下BundleConfig.cs文件内 bundles.Add(new ScriptBundle("~/bundles/jquery").Include( "~/Scripts/jquery-{version}.js", "~/Scripts/jquery.unobtrusive-a

  • 基于Asp.Net MVC4 Bundle捆绑压缩技术的介绍

    很高兴,最近项目用到了Asp.Net MVC4 + Entity Framework5,发现mvc4加入了Bundle.Web API等技术,着实让我兴奋,以前是用第三方的,这里主要说说Bundle技术. 很多大网站都没有用Bundle技术造成很多资源浪费与性能的牺牲,别小瞧 用上了你会发现他的好处: 将多个请求捆绑为一个请求,减少服务器请求数 没有使用Bundle技术,debug下看到的是实际的请求数与路径 使用Bundle技术,并且拥有缓存功能调试设置为Release模式并按F5或修改web

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

    本文实例讲述了Asp.net程序优化js.css实现合并与压缩的方法.分享给大家供大家参考.具体实现方法如下: 访问时将js和css压缩并且缓存在客户端, 采用的是Yahoo.Yui.Compressor组件来完成的,用户可以点击此处本站下载. 创建一个IHttpHandler来处理文件 复制代码 代码如下: public class CombineFiles : IHttpHandler {         private const string CacheKeyFormat = "_Cac

  • ASP.NET MVC4之js css文件合并功能(3)

    MVC4增加了一些新功能,接下来,我们来研究下MVC4中的新增功能,我们在新建一个MVC4项目的时候,会发现在项目下多出了一个App_Start文件夹,文件夹下面有4个文件,BundleConfig.cs,FilterConfig.cs,RouteConfig.cs,WebApiConfig.cs,其中BundleConfig.cs文件就是我们这一节要讲的的文件. 众所周知,浏览器在向服务器发送请求的时候,请求的文件连接数量是有限制的.使用BundleConfig可以将多个文件请求和并成一个请求

  • python2.7的flask框架之引用js&css等静态文件的实现方法

    动态 web 应用也会需要静态文件,通常是 CSS 和 JavaScript 文件.理想状况下, 我们已经配置好 Web 服务器来提供静态文件,但是在开发中,Flask 也可以做到. 只要在我们的包中或是模块的所在目录中创建一个名为 static 的文件夹,在应用中使用 /static 即可访问.我们要给静态文件生成 URL ,需要使用特殊的 'static' 端点名: url_for('static', filename='style.css') 这个css文件应该存储在文件系统上的 stat

  • 高性能WEB开发 JS、CSS的合并、压缩、缓存管理

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

  • asp.net 程序优化精选第1/2页

    1.数据库访问性能优化 数据库的连接和关闭        访问数据库资源需要创建连接.打开连接和关闭连接几个操作.这些过程需要多次与数据库交换信息以通过身份验证,比较耗费服务器资源.ASP.NET中提供了连接池(Connection Pool)改善打开和关闭数据库对性能的影响.系统将用户的数据库连接放在连接池中,需要时取出,关闭时收回连接,等待下一次的连接请求.连接池的大小是有限的,如果在连接池达到最大限度后仍要求创建连接,必然大大影响性能.因此,在建立数据库连接后只有在真正需要操作时才打开连接

  • asp.net程序优化 尽量减少数据库连接操作

    项目以我自己的设计编码完成,并整合测试.初始化数据时,问题出现了.刚开始体现在客户端接受数据很慢.测试环境环境下,数据库服务器部署在国外,网站部署在公司内部,而且我一直认为我的程序在数据库数据处理这里已经做了足够的优化,包括索引和主键已经做到了合理使用.综上所述,起初的速度问题一直没有引起我的关注. 然而最后问题的关键恰恰出在数据库连接查询方面,频繁查询导致数据初始化速度很慢.刚开始我采取的方法是即用即查:需要数据的时候就从数据库查,有比较多的单表查询返回单个字段的情况.假如我有大概3000条左

  • ASP.NET 程序优化 小结

    一.SqlDataRead和Dataset的选择 Sqldataread优点:读取数据非常快.如果对返回的数据不需做大量处理的情况下,建议使用SqlDataReader,其性能要比datset好很多.缺点:直到数据读完才可close掉于数据库的连接 (SqlDataReader 读数据是快速向前的.SqlDataReader 类提供了一种读取从 SQL Server 数据库检索的只进数据流的方法.它使用 SQL Server 的本机网络数据传输格式从数据库连接直接读取数据.DataReader需

  • ASP.NET性能优化之让浏览器缓存动态网页的方法

    OutputCache是针对所有访问服务器资源的用户,本篇要介绍的浏览器缓存则是针对单个用户,让浏览器在我们的控制下彻底不持续访问服务器上的动态内容,也就是我们要让浏览器变成我们的缓存机制中的一部分,在某些特定的场景下最大化地提升ASP.NET站点的性能.如果说OutputCache是从广度上提升并发效率,则浏览器缓存是从深度上提升效率. 一:HTTP头简介 1.1浏览器第一次请求 假设我们请求一个URL地址,譬如我服务器上的一个静态页面http://192.168.0.77/luminji2/

  • CSS代码格式化和压缩的方法与技巧

    第一步:需要掌握css的缩写技巧参考下面的文章即可CSS缩写优化CSS文件的体积CSS常用属性缩写实例[推荐]第二步:用css在线格式化与压缩工具第三步:测试,看看经过压缩后的css文件,会不会导致页面变形等问题,一般情况下不会,不排除特殊情况.别忘了备份样式文件啊. 下面是一般用于css压缩的代码,一般情况下,喜欢脚本的朋友看下.具体的应用上面的两部即可. CSS代码格式化和加密化 CSS代码格式化和加密化 /*请将CSS代码复制到这里,下面是示例*/ input,button{ height

  • JS+CSS实现的拖动分页效果实例

    本文实例讲述了JS+CSS实现拖动分页效果的方法.分享给大家供大家参考.具体实现方法如下: <html> <head> <title>拖动分页</title> <meta http-equiv=Content-Type content="text/html; charset=utf-8"> <style> body{ border:0px; margin:0px; overflow:hidden; backgrou

随机推荐