第十八章 提升用户体验 之 减少带宽占用

1. 概述

　　作为开发者，我们总是需要尽量的减少传递的数据量来优化带宽使用。

　　具体方式包括 清理不用的Js脚本、删除css文件中不用的或者冗余的样式，

　　还可以使用JS和ASP.NET MVC的绑定和精简特性来删除脚本中的无关信息，然后合并到一个单独的脚本文件供下载。

　　如果尺寸还是大，还可以考虑使用数据压缩。

　　优化尺寸以后，还需要考虑最小化网络的影响。最明显的方式就是尽量减少服务端和客户端的交互次数。content delivery network (CDN)会很有帮助。

　　本章内容包括：整理和优化脚本(CSS and JavaScript)、压缩和解压数据(使用 gip/deflate;storage)、尝试计划CDN策略(比如 Windows Azure CDN)。

2. 主要内容

　　2.1 整理和优化脚本(CSS and JavaScript)

　　　　整理和优化脚本的主要目的就是在下载脚本文件到客户端时，尽量减少带宽和连接的占用。

　　　　大部分的常用浏览器都把同一域的连接数限制到了6个。这样的话，尽量减少需要下载的文件数量就可以在这方面改善性能。

　　　　同时，对文件进行瘦身（清理空白字符、备注信息、换行符，简化变量名）也是提高性能的一种显著方式。同时还可以混淆文件。

　　　　2.1.1 Bundling

　　　　　　ASP.NET MVC 的Bundling特性可以把多个文件绑定到一起下载，用于减少同时的连接数。

　　　　　　这种方式的弊端就是 影响了浏览器的缓存机制，使用时需要权衡。

bundles.Add(new ScriptBundle("~/bundles/myBundle").Include("~/Scripts/myScript1.js", 
                                                           "~/Scripts/myScript2.js", 
                                                           "~/Scripts/myScript3.js"));

@BundleTable.Bundles.ResolveBundleUrl(("~/bundles/myBundle")

　　　　　　上面代码还可以为脚本生成hashtag，这样浏览器就会将这个脚本保存更长的时间。

　　　　2.1.2 Minifying

　　　　　　Minifying就是精简JS以及CSS文件的大小。

　　　　　　可以通过配置compilation节点的debug属性为false，

　　　　　　或者 在App_Start/BundleConfig.cs文件的 RegisterBundles方法中添加 BundleTable.EnableOptimizations = true 来允许精简操作。

　　2.2 压缩和解压数据(使用 gip/deflate;storage)

　　　　对传递的数据进行压缩也是一种提高性能的方法。header中的Accept-Encoding节点指出了可接受的编码类型。

　　　　比如 Accept-Encoding: gzip, deflate ， 说明当前浏览器可以处理 gzip和deflate格式的压缩。

　　　　最简单的方式是在IIS中配置压缩选项。

　　　　

　　　　如果使用ASP.NET MVC来压缩文件，有几种action result可以选择。

using (FileStream oFileStream = article.LocalFile.OpenRead()) 
        { 
            using (FileStream cFileStream = File.Create( 
                Guid.NewGuid().ToString() + ".gz")) 
            { 
                using (GZipStream compressionStream =  
                              new GZipStream(cFileStream, CompressionMode.Compress))  
                { 
                    oFileStream.CopyTo(compressionStream);  
                    StreamReader reader = new StreamReader(compressionStream);  
                    results = reader.ReadToEnd(); 
                } 
            } 
        }

　　2.3 尝试计划CDN策略(比如 Windows Azure CDN)

　　　　CDNs提供了把内容分布到服务器之外的其他地方的一种方式。

　　　　引入CDNs的几个目的：

　　　　　　① 把图片、CSS文件、JS文件 等静态文件分出去，减轻主服务器的压力。

　　　　　　② CDNs可以更快速的提供内容给客户端。许多大型CDNs是遍布全球的，可以就近提供服务。

3. 总结

　　① 当带宽资源不富裕时，可以通过精简文件的大小来提高用户体验。

　　② 精简文件有几种方式：ASP.NET MVC 4 通过 删除备注、空白 及其他多余字符来精简，还可以通过绑定合并文件来减少链接，提高效率。

　　③ IIS可以配置Web服务器发送压缩内容到客户端。可以配置只压缩静态文件，或者压缩所有文件。还可以设置一个阈值来启动压缩。

　　④ CDNs可以把内容分发到更广阔的网络上，分担服务器的压力。CDNs距离客户端更近，用户体验更好。