zoukankan      html  css  js  c++  java
  • 第十八章 提升用户体验 之 减少带宽占用

    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距离客户端更近,用户体验更好。

  • 相关阅读:
    第一次作业
    第07组 Alpha事后诸葛亮
    2019SDN第4次作业
    第07组 Alpha冲刺(4/4)
    第07组 Alpha冲刺(3/4)
    第07组 Alpha冲刺(2/4)
    2019 SDN上机第3次作业
    2019 SDN阅读作业
    第07组 Alpha冲刺(1/4)
    2019 SDN上机第2次作业
  • 原文地址:https://www.cnblogs.com/stone_lv/p/5316471.html
Copyright © 2011-2022 走看看