背景

  作为web开发人员大家大多了解一些网站的性能优化方法,其实大部分方法都不复杂,例如针对前端js和css的压缩来减少请求大小,通过合并来减少请求次数。这里站在.Net后端程序员的角度来看一下如何最简单快捷的处理这一类需求。

  全文分3节 combres,mvc4的Bundle,以及2者的对比和个人的意见观点。


Combres

  Combres是一个.NET程序库,能够缩小,压缩,合并,以及缓存的JavaScript和CSS资源,ASP.NET和ASP.NET MVC的Web应用程序。简单地说,它可以帮助您的应用程序更好的页面加载速度​​。

  源代码存在 https://github.com/buunguyen/combres

  通过nuget添加combres非常简单

  

  加载完成后 .Net3.5的同学需要按照combres.readme的指导,首先删除掉AppStart_Combres.cs然后在global.asax中添加Combres引用,然后在RegisterRoutes() 或者 Application_Start()添加方法RouteTable.Routes.AddCombresRoute("Combres")

  .Net4.0的同学可以忽略这一步,你们会在发现nuget包安装程序(下面简称包管理)已经自动帮你们生成了这样一段代码

    public static class Combres {
public static void PreStart() {
RouteTable.Routes.AddCombresRoute("Combres");
}
}

  下面最主要的就是就是配置combres.xml,至于webconfig的配置包管理已经帮大家设置完成。

  为了方便测试,我们建个白板页面,然后添加最简单的js文件和css文件。

  

  那么下面来看测试效果,我们先建一个简单的测试页面。

@{
ViewBag.Title = "Home Page";
}
<script src="~/Scripts/Demo/JScript1.js" type="text/javascript"></script>
<script src="~/Scripts/Demo/JScript2.js" type="text/javascript"></script>
<script src="~/Scripts/Demo/JScript3.js" type="text/javascript"></script>
<link href="~/Content/Demo/StyleSheet1.css" rel="stylesheet" type="text/css" />
<link href="~/Content/Demo/StyleSheet2.css" rel="stylesheet" type="text/css" />
<link href="~/Content/Demo/StyleSheet3.css" rel="stylesheet" type="text/css" />

  打开fiddler查看页面请求。

  

  然后我们使用combres修改页面代码

  mvc: 

 @using Combres.Mvc
@{
ViewBag.Title = "Home Page";
}
@Url.CombresLink("siteCss")
@Url.CombresLink("siteJs")

  webform:

 <%= WebExtensions.CombresLink("siteJs") %>
<%= WebExtensions.CombresLink("siteCss") %>

  再来查看页面请求

  

  请求次数变为了2次,大小也被压缩的非常低。

  Combres的实现原理不复杂,服务器端先加载配置缓存起来,根据配置节点生成hash值,具体实现如下 

         public string Generate(ResourceSet rs)
{
if (Log.IsDebugEnabled)
Log.Debug("Computing hash for set " + rs.Name + ". Current hash: " + rs.Hash); var contributingFactors = new List<object> {rs.DebugEnabled};
rs.Filters.ToList().ForEach(contributingFactors.Add);
rs.CacheVaryProviders.ToList().ForEach(contributingFactors.Add);
rs.Resources.ToList().ForEach(r =>
{
contributingFactors.Add(r.ReadFromCache(true));
contributingFactors.Add(r.ForwardCookie);
contributingFactors.Add(r.Mode);
contributingFactors.Add(r.Minifier);
});
var hash = contributingFactors.Select(f => f.GetHashCode())
.Aggregate(, (accum, element) => * accum + element)
.ToString(); if (Log.IsDebugEnabled)
Log.Debug("New hash: " + hash);
return hash;
}

  得出来的值就是我们上面看到的combres.xsd/setname/hashvalue中的hashvalue,当我们请求产生的时候会由一个CombresHandler根据hashvalue来获取对应的资源并且进行合并压缩。

  处理流程首先判断你的浏览器是否支持压缩,通过Context.Request.Headers["Accept-Encoding"]。

  如果判断为接受combres会对资源进行2层压缩,我们这里简单称只为minifier和gzip。

  如果浏览器不支持压缩那么gzip这一层会被忽略,minifier的压缩方法使用YuiJSMinifier和YuiCssMinifier,方法依赖雅虎的开源组件Yahoo.Yui.Compressor

  

  handler会为新的请求生成一个cachekey:“Combres/Combres.RequestProcessor/siteJs/1342767128/gzip”

  和etag key“Combres/Combres.RequestProcessor/siteJs/1342767128/gzip/@etag”(实际上真正存于Context.Response.Cache的ETag是"1342767128")

  分别对应服务器端缓存和浏览器缓存,当下次请求已经发现有key存在,便从缓存中直接获取资源或者直接304。

  根据结果图来看,combres确实是一款很不错的工具。


MVC4的Bundle

  MVC4以后自带了Bundling和Minification。操作也很简单,新建一个mvc4项目。在App_Start文件夹下找到BundleConfig.cs。

  添加如下代码:

         public static void RegisterBundles(BundleCollection bundles)
{ bundles.Add(new ScriptBundle("~/bundles/jquerydemo").Include(
"~/Scripts/Demo/JScript1.js",
"~/Scripts/Demo/JScript2.js",
"~/Scripts/Demo/JScript3.js")); bundles.Add(new StyleBundle("~/Content/cssdemo").Include(
"~/Content/Demo/StyleSheet1.css",
"~/Content/Demo/StyleSheet2.css",
"~/Content/Demo/StyleSheet3.css"));
}

  页面端添加:

 @Styles.Render("~/Content/cssdemo")
@Scripts.Render("~/bundles/jquerydemo")

  然后记住在BundleConfig.cs添加BundleTable.EnableOptimizations = true;不然MVC4不会启用压缩,减少请求数量和带宽。

  我们来看一下效果图:

  

  请求次数减少,也有压缩。但是比起combres效率要差了一些。但是这样未必就是说combres要更好。


对比

  2者相比较而已combres的效率要高一些,但是mvc4作为原生自带的功能,对于版本管理比较苛刻的系统还是具有优势,并且对于大型项目还要涉及到cdn问题。

  目前combres是不支持cdn的,虽然作者给出了相关的话题,但是作者本人最后还有给出了不是令人满意的答复。

  

  相对MVC4的Bundle是支持cdn的,只需要在对应节点添加 bundles.UseCdn = true即可。

  所以根据各自项目不同的场景,酌情处理吧。

  个人推荐静态资源的压缩和合并尽量在前端就做掉,例如grunt。这样不管是cdn还是部署发布都更合理没有必要再浪费后端的处理资源。


本篇先到此,希望对大家有帮助!

面向.Net程序员的前端优化的更多相关文章

  1. .Net程序员的前端优化

    面向.Net程序员的前端优化 2014-08-06 17:20 by 熬夜的虫子, 1152 阅读, 9 评论, 收藏, 编辑 背景 作为web开发人员大家大多了解一些网站的性能优化方法,其实大部分方 ...

  2. 好程序员web前端分享12个CSS高级技巧汇总

    好程序员web前端分享下面这些CSS高级技巧,一般人我可不告诉他哦. 使用 :not() 在菜单上应用/取消应用边框 给body添加行高 所有一切都垂直居中 逗号分隔的列表 使用负的 nth-chil ...

  3. 好程序员web前端分享HTML基础篇

    好程序员web前端分享HTML基础篇,最近遇到很多新手,都会问,如果要学web前端开发,需要学什么?难不难学啊?多久能入门之类的问题?那么今天好程序员就先来给大家分享一下web前端学习路线:HTML基 ...

  4. 好程序员web前端分享想要学习前端需要学那些课程

    好程序员web前端分享想要学习前端需要学那些课程,仔细思考了一下如何回答好这个话题,其实前端是一个涵盖面非常之广泛的一个职位,所需知识体系非常庞杂,与传统语言“想要精一行,必先通一门” 有很大差别, ...

  5. 好程序员web前端分享如何理解JS的单线程

    好程序员web前端分享如何理解JS单线程,JS本质是单线程的.也就是说,它并不能像JAVA语言那样,两个线程并发执行. 但我们平时看到的JS,分明是可以同时运作很多任务的,这又是怎么回事呢? 首先,J ...

  6. 好程序员web前端分享javascript关联数组用法总结

    好程序员web前端分享javascript关联数组用法总结,有需要的朋友可以参考下. Hash关联数组定义 代码如下 // 定义空数组 myhash = { } // 直接定义数组 myhash = ...

  7. 好程序员web前端分享18个用CSS制作出来的东西

    好程序员web前端分享18个用CSS制作出来的东西,与流行的看法相反,CSS不仅仅是用来提供一个WEB页面的基本风格,以使它看起来更有吸引力.还有很多其他的事情,CSS也可以做的很好.由于它创建动画和 ...

  8. 好程序员web前端开发测验之css部分

    好程序员web前端开发测验之css部分Front End Web Development Quiz CSS 部分问题与解答 Q: CSS 属性是否区分大小写? <p><font si ...

  9. 好程序员web前端分享值得参考的css理论:OOCSS、SMACSS与BEM

    好程序员web前端分享值得参考的css理论:OOCSS.SMACSS与BEM 最近在The Sass Way里看到了Modular CSS typography一文,发现文章在开头部分就提到了OOCS ...

随机推荐

  1. Windows下Qt5搭建Android开发环境笔记

    Windows很大的特点是配置使用几乎都可以图形化进行,和Linux比起来在很多时候配置环境也要方便很多.所以,搭建Qt for Andorid也是十分简单的.需要以下工具: 1.最方便的Qt官方包, ...

  2. haskell中的let和where

    haskell中有两种定义局部变量的方法let和where,方法分别如下 roots a b c = ((-b + det) / (a2), (-b - det) / (a2)) *a*c) a2 = ...

  3. iOS开发之组件化架构漫谈

    前段时间公司项目打算重构,准确来说应该是按之前的产品逻辑重写一个项目.在重构项目之前涉及到架构选型的问题,我和组里小伙伴一起研究了一下组件化架构,打算将项目重构为组件化架构.当然不是直接拿来照搬,还是 ...

  4. 对SQLSERVER进行性能监控

    对SQLSERVER进行性能监控 在上一篇文章<SQLSERVER性能监控级别步骤>里说到性能监控的步骤中有一步涉及到建立性能基线,但是没有说到有哪些计数器 可以用来进行监控的,这篇文章结 ...

  5. PyCharm 4.5.4 环境配置

    1.去掉“自动保存功能” pycharm默认是自动保存的,习惯自己按 ctrl + s 的可以进行如下设置: 菜单File -> Settings... -> Appearance &am ...

  6. IIS 7.5 + asp.net MVC4 设置路由处理URL请求

    使用asp.net MVC4开发的网站,在本地的VS012环境下运行,一切正常.但当发布到Windows 2008 R2(IIS7.5 + Framework4.5)上时,访问相关网页时,出现有下面的 ...

  7. Arcgis for Javascript 出现“init.js->TypeError: f is not a function”

    环境 采用离线JS包,版本为v3.8 问题描述 在为map添加了 app.map.on("pan-start", this.showHandBeignPan()); 在拖动地图的时 ...

  8. VS2010 调试不会命中当前断点

    方法1.直接把整个文件格式化了一次,断点就可以用了Ctrl + A全选菜单:编辑-〉高级-〉设置选定内容的格式 (Ctrl+K, Ctrl+F)通过比较文件发现是由于制表符Tab(0x09)引起的,原 ...

  9. JavaScript 中的 this ,看着一篇就够了

    tip 在 js 中,this 这个上下文总是变化莫测,很多时候出现 bug 总是一头雾水,其实,只要分清楚不同的情况下如何执行就 ok 了. 全局执行 首先,我们在全局环境中看看它的 this 是什 ...

  10. 如何绕过chrome的弹窗拦截机制

    如何绕过chrome的弹窗拦截机制 在chrome的安全机制里面,非用户触发的window.open方法,是会被拦截的.举个例子: var btn = $('#btn'); btn.click(fun ...