面向.Net程序员的前端优化

简介:

背景

  作为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: 

1 @using Combres.Mvc
2 @{
3     ViewBag.Title = "Home Page";
4 }
5 @Url.CombresLink("siteCss")6 @Url.CombresLink("siteJs")

  webform:

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

  再来查看页面请求

  

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

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

 1         public string Generate(ResourceSet rs) 
 2         { 
 3             if (Log.IsDebugEnabled) 
 4                 Log.Debug("Computing hash for set " + rs.Name + ".  Current hash: " + rs.Hash); 
 5  
 6             var contributingFactors = new List<object> {rs.DebugEnabled}; 
 7             rs.Filters.ToList().ForEach(contributingFactors.Add); 
 8             rs.CacheVaryProviders.ToList().ForEach(contributingFactors.Add); 
 9             rs.Resources.ToList().ForEach(r =>
 10                                   {
 11                                       contributingFactors.Add(r.ReadFromCache(true)); 12                                       contributingFactors.Add(r.ForwardCookie);
 13                                       contributingFactors.Add(r.Mode);
 14                                       contributingFactors.Add(r.Minifier);
 15                                   });
 16             var hash = contributingFactors.Select(f => f.GetHashCode())17                                           .Aggregate(
 17, (accum, element) => 31 * accum + element)
 18                                           .ToString();
 19 
 20             if (Log.IsDebugEnabled)
 21                 Log.Debug("New hash: " + hash);
 22             return hash;
 23         }

  得出来的值就是我们上面看到的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:&ldquo;Combres/Combres.RequestProcessor/siteJs/1342767128/gzip&rdquo;

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

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

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


 MVC4的Bundle

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

  添加如下代码:

 1         public static void RegisterBundles(BundleCollection bundles) 
 2         { 
 3  
 4             bundles.Add(new ScriptBundle("~/bundles/jquerydemo").Include( 
 5                 "~/Scripts/Demo/JScript1.js", 
 6                 "~/Scripts/Demo/JScript2.js", 
 7                 "~/Scripts/Demo/JScript3.js")); 
 8  
 9             bundles.Add(new StyleBundle("~/Content/cssdemo").Include(
 10                 "~/Content/Demo/StyleSheet1.css",
 11                 "~/Content/Demo/StyleSheet2.css",
 12                 "~/Content/Demo/StyleSheet3.css"));
 13         }

  页面端添加:

1 @Styles.Render("~/Content/cssdemo")2 @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还是部署发布都更合理没有必要再浪费后端的处理资源。


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

 


本文转自 熬夜的虫子  51CTO博客,原文链接:http://blog.51cto.com/dubing/1538465


相关实践学习
Serverless极速搭建Hexo博客
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
相关文章
|
6月前
|
存储 开发框架 前端开发
前端框架EXT.NET Dotnet 3.5开发的实验室信息管理系统(LIMS)成品源码 B/S架构
发展历史:实验室信息管理系统(LIMS),就是指通过计算机网络技术对实验的各种信息进行管理的计算机软、硬件系统。也就是将计算机网络技术与现代的管理思想有机结合,利用数据处理技术、海量数据存储技术、宽带传输网络技术、自动化仪器分析技术,来对实验室的信息管理和质量控制等进行全方位管理的计算机软、硬件系统,以满足实验室管理上的各种目标(计划、控制、执行)。
68 1
|
3月前
|
编解码 前端开发 JavaScript
.NET_web前端框架_layui_栅格布局
【8月更文挑战第27天】
48 4
|
3月前
|
JavaScript 前端开发 程序员
后端程序员的前端必备-jQuery核心学习笔记
后端程序员的前端必备-jQuery核心学习笔记
58 13
|
3月前
|
前端开发 JavaScript 程序员
后端程序员的前端捷径-超级容易上手使用的前端框架layUI(上)
后端程序员的前端捷径-超级容易上手使用的前端框架layUI
56 10
|
3月前
|
前端开发 JavaScript 程序员
后端程序员的前端捷径-超级容易上手使用的前端框架layUI(下)
后端程序员的前端捷径-超级容易上手使用的前端框架layUI
72 9
|
3月前
|
移动开发 前端开发 程序员
后端程序员的前端基础-前端三剑客之HTML
后端程序员的前端基础-前端三剑客之HTML
41 9
|
3月前
|
前端开发 JavaScript 程序员
后端程序员的前端基础-前端三剑客之CSS
后端程序员的前端基础-前端三剑客之CSS
43 8
|
3月前
|
存储 JavaScript 前端开发
后端程序员的前端基础-前端三剑客之JavaScript
后端程序员的前端基础-前端三剑客之JavaScript
33 4
|
3月前
|
开发框架 前端开发 JavaScript
基于Admin.NET框架的前端的一些改进和代码生成处理(2)
基于Admin.NET框架的前端的一些改进和代码生成处理(2)
|
3月前
|
开发框架 前端开发 JavaScript
基于Admin.NET框架的前端的一些改进和代码生成处理(1)
基于Admin.NET框架的前端的一些改进和代码生成处理(1)
下一篇
无影云桌面