面向.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:“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。
添加如下代码:
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还是部署发布都更合理没有必要再浪费后端的处理资源。
本篇先到此,希望对大家有帮助!
转载于:https://www.cnblogs.com/dubing/p/3895275.html
面向.Net程序员的前端优化相关推荐
- 好程序员web前端分享DIV+CSS3和html5+CSS3有什么区别
为什么80%的码农都做不了架构师?>>> 好程序员web前端分享DIV+CSS3和html5+CSS3有什么区别,不管是DIV+CSS3还是html5+CSS3,他们都是我们对 ...
- 好程序员web前端干货之web前端开发框架汇总
好程序员web前端干货之web前端开发框架汇总,其实一个前端开发框架其实就是一系列产品化的HTML/CSS/JavaScript组件的集合,我们可以在设计中使用它们.前端开发框架有很多,其中有一些写得 ...
- 好程序员web前端培训分享做H5页面需要学什么
好程序员web前端培训分享做H5页面需要学什么,很多人问过我这个问题,而问这个问题的人基本上都是刚听说过h5,处在懵懂的阶段,他们往往会被一些网上炫酷页面所吸引,开始的目的也很简单,能通过自己的努力做 ...
- 好程序员web前端分享CSS3实现全景图特效
本篇文章好程序员web前端将给大家带来一个css3的黑-科技:如何仅仅使用css来实现全景图的效果? 首先定义一些基本的样式和动画 .panorama { width: 300px; height: ...
- 好程序员大前端送干货Web前端开发框架汇总
好程序员大前端送干货Web前端开发框架汇总,其实一个前端开发框架其实就是一系列产品化的HTML/CSS/JavaScript组件的集合,我们可以在设计中使用它们.前端开发框架有很多,其中有一些写得很棒 ...
- 好程序员web前端教程分享web前端入门基础知识
好程序员web前端教程分享web前端入门基础知识,作为合格的Web前端工程师必须得掌握HTML.CSS和JavaScript.只懂其中一两个还不行,必须对这三门语言都要熟悉.下面我们一起来看一看吧! ...
- 好程序员web前端技术分享媒体查询
为什么80%的码农都做不了架构师?>>> 好程序员web前端技术分享媒体查询 什么是媒体查询 媒体查询可以让我们根据设备显示器的特性(如视口宽度.屏幕比例.设备方向:横向或纵向 ...
- 好程序员web前端分享值得参考的css理论:OOCSS、SMACSS与BEM
为什么80%的码农都做不了架构师?>>> 好程序员web前端分享值得参考的css理论:OOCSS.SMACSS与BEM 最近在The Sass Way里看到了Modular C ...
- 前后端解析_好程序员Web前端教程分享前后端分离接口
随着互联网的高速发展以及IT开发技术的升级,前后端分离已成为互联网项目开发的业界标准使用方式.在实际工作中,前后端的接口联调对接工作量占Web前端人员日常工作的30%-50%,甚至会更高.接下来的好程 ...
最新文章
- bert模型图解 很详细的与其他模型对比实验
- iOS 13 绕过锁屏密码查看通讯录、照片、短信
- Part7 继承与派生 7.4派生类的构造和析构
- 数字滤波器(五)--设计IIR滤波器
- Python学习笔记之函数(四)
- ubuntu 安装vnc_vnc4server arm架构
- 计算机组成原理硬件设计,计算机组成原理硬件设计报告..doc
- 常用Windows 运行命令
- 软件测试 边界值法的实例,边界值分析法实例
- 用鲁棒学习提升无监督图像聚类
- iconfont字体图标以及css字体图标在线制作和使用(推荐)
- python通过调用百度天气API接口获取天气信息
- sql注入bypass方法
- if语句判断真假的几种情况
- 三国系列:何进为什么要斩杀十常侍?
- 全球与中国生物气溶胶监测仪市场深度研究分析报告
- C语言实现栈(附带题目讲解)
- GitlabCI与JenkinsCI对比
- 洛谷P7724 远古档案馆(Ancient Archive)
- 关于两个超级计算机的电影,又一部十级烧脑悬疑大片,两个连接的神秘世界,无路可走的空间...
热门文章
- html audio播放本地语音文件,HTML5+ - audio音频播放及网络音频文件播放
- c语言图像浏览器,单片机采用浏览器进行监控将给软件的编程带来极大的便利...
- quit推不出mysql_cmd下使用mysql插入中文出现无法退出语句的情况!终极解决办法! 安装mysql详细教程。...
- python 类和对象 atm_Python 类和对象
- 谭浩强课后题之----水仙花数
- 腾讯云【人脸识别】服务的一次尝试(JAVA)
- 2021-04-21--中标麒麟-yum源修改
- 《系统集成项目管理工程师》必背100个知识点-12项目整体管理的过程
- SpringBoot打成jra包启动时读取外部配置文件实现动态配置
- AndroidStudio中将项目运行在模拟器中提示:The currently selected variant “debug“ uses split APKs, but none of the 1