FineUIPro v3.5.0发布了，减少 90% 的上行数据量，15行代码全搞定！

一切为客户着想

一切的一切还得从和一位台湾客户的沟通说起：

客户提到将ViewState保存在服务器端以减少上行数据量，从而加快页面的回发速度。

 

但是在FineUI中，控件状态都保存在FState中，并且为了减少下行数据量，FState的数据不仅用来保存状态，而且用于JavaScript的数据源。

所以FState必须写入HTTP响应，才能被JavaScript使用。我在之前的一篇文章中曾详细阐述：http://www.cnblogs.com/sanshi/archive/2013/01/08/2850459.html

 

但这的确是个问题，FState虽然能够减少下行数据量，但是页面回发时上行数据量依然很大，特别是页面中有多个下拉列表和表格时，上行的数据量可达到500K或者更多，对网速受限的环境的确是个挑战。

 

FineUI（专业版）v3.5.0将提供一种简单的方法，将FState保存在服务器端，从而大幅减少页面回发时的上行数据量。

 

注：FState仍然需要返回到页面上（以便JavaScript使用，比如作为表格和下拉列表的数据源），只不过不需要回发到服务器而已。

 

减少 90% 的上行数据

作为对比，我们以下面的表格页面为例：http://fineui.com/demo_pro/iframe/grid_iframe.aspx

 

首先选中一项，然后点击工具栏上的[删除选中行]按钮，此时会触发按钮点击事件，我们分别看下v3.3.0和v3.5.0中上传数据量。

FineUI（专业版）v3.3.0：

 

FineUI（专业版）v3.5.0：

 

FineUI（专业版）v3.3.0上行数据量：32616bytes =  31.9K

FineUI（专业版）v3.5.0上行数据量：2137bytes =  2.1K

 

从上面数据来看，FineUI（专业版）v3.5.0上行数据量减少了 90% 左右。在一个包含多个表格和下拉列表的页面，这个效果会更加明显。

 

自定义编码实现

虽然FineUI（专业版）v3.5.0提供了将FState保存到服务器端的方法，但不是默认就支持的，需要自己写点代码。因为保存到服务器有多种方法，可以保存到服务器文件中，HttpRuntime.Cache，SqlServer或者NoSQL数据库（比如Memcached，Redis）。

 

官网示例的PageBase.cs中提供了两种保存方式：文件、HttpRuntime.Cache，你可以直接拷贝代码到自己的项目中去。

现在来看下保存到服务器缓存中（HttpRuntime.Cache）的方法：

1. 启用PageManager的EnableFStatePersistence，并定义代理函数LoadFStateFromPersistenceMedium和SaveFStateToPersistenceMedium。

protected override void OnInit(EventArgs e)
{
    var pm = PageManager.Instance;
    if (pm != null)
    {
        // FState保存到服务器缓存
        pm.EnableFStatePersistence = true;
        pm.LoadFStateFromPersistenceMedium = LoadFStateFromPersistenceMedium_Cache;
        pm.SaveFStateToPersistenceMedium = SaveFStateToPersistenceMedium_Cache;
        
    }
}

页面级别的支持，方便我们控制哪些页面启用，哪些页面可以不启用。

 

2. 获取和保存FState的代理函数

private static readonly string FSTATE_CACHE_KEY = "__FSTATE_KEY";

private JObject LoadFStateFromPersistenceMedium_Cache()
{
    string cacheKey = Page.Request.Form[FSTATE_CACHE_KEY];

    var fstate = HttpRuntime.Cache[cacheKey] as JObject;

    if (fstate != null)
    {
        // 缓存使用过一次后，5s后过期（用不到了）
        HttpRuntime.Cache.Insert(cacheKey, fstate, null,
           DateTime.Now.AddSeconds(5),
           System.Web.Caching.Cache.NoSlidingExpiration,
           System.Web.Caching.CacheItemPriority.Default, null);
    }
    
    return fstate;
}

private void SaveFStateToPersistenceMedium_Cache(JObject fstate)
{
　　 // 1. 生成缓存Key = 用户会话ID+当前时间
    string cacheKey = String.Format("{0}_{1}",
            HttpContext.Current.Session.SessionID,
            DateTime.Now.Ticks.ToString());

　　 // 2. 将页面的FState保存到缓存中，指定过期时间为当前用户会话过期时间（Session.Timeout）
    // 指定时间后过期（Session.Timeout）
    HttpRuntime.Cache.Insert(cacheKey, fstate, null,
        DateTime.Now.AddMinutes(HttpContext.Current.Session.Timeout),
        System.Web.Caching.Cache.NoSlidingExpiration,
        System.Web.Caching.CacheItemPriority.Default, null);

    // 3. 将缓存Key保存到页面的一个隐藏字段中，通过PageContext.RegisterStartupScript来注册一段脚本
    PageContext.RegisterStartupScript(String.Format("F.setHidden('{0}','{1}');", FSTATE_CACHE_KEY, cacheKey));
}

 

这里面的实现方式和在服务器端保存ViewState的方式类似。

 

官网示例中也有保存到服务器端文件的实现，可以参考：

private static readonly string FSTATE_FILE_KEY = "__FSTATE_KEY";
private static readonly string FSTATE_FILE_BASE_PATH = "~/App_Data/FState/";

private JObject LoadFStateFromPersistenceMedium()
{
    string filePath = GetFStateFilePath();
    string fileContent;
    using (StreamReader sr = new StreamReader(filePath, System.Text.Encoding.UTF8))
    {
        fileContent = sr.ReadToEnd();
    }
    return JObject.Parse(fileContent);
}

private void SaveFStateToPersistenceMedium(JObject fstate)
{
    string filePath = GenerateFStateFilePath();
    using (StreamWriter streamW = new StreamWriter(filePath, false, System.Text.Encoding.UTF8))
    {
        streamW.Write(fstate.ToString(Formatting.None));
    }
}

private string GenerateFStateFilePath()
{
    DateTime now = DateTime.Now;
    string folderName = now.ToString("yyyyMMddHH");
    string fileName = String.Format("{0}_{1}",
        HttpContext.Current.Session.SessionID,
        now.Ticks.ToString());
        //Page.Request.Url.AbsolutePath.Replace(".", "_").Replace("/", "_"));

    string folderPath = Page.Server.MapPath(Path.Combine(FSTATE_FILE_BASE_PATH, folderName));
    if (!Directory.Exists(folderPath))
    {
        Directory.CreateDirectory(folderPath);
    }

    PageContext.RegisterStartupScript(String.Format("F.setHidden('{0}','{1}');", FSTATE_FILE_KEY, fileName));

    return folderPath + "/" + fileName + ".config";
}

private string GetFStateFilePath()
{
    string fileName = Request.Form[FSTATE_FILE_KEY];
    string[] fileNames = fileName.Split('_');
    string folderName = new DateTime(Convert.ToInt64(fileNames[1])).ToString("yyyyMMddHH");

    return Page.Server.MapPath(Path.Combine(FSTATE_FILE_BASE_PATH, folderName)) + "/" + fileName + ".config";
}

 

当然你也可以方便的扩展到外部数据库（SqlServer，MySql）以及NoSQL数据库（Memcached，Redis）。

 

使用建议

虽然EnableFStatePersistence可以极大的减少上行数据量，但并不适合于所有的场合。因为每个用户访问的每个页面都可能会产生大量的FState，所以在服务端保存意味着对服务器资源的极大消耗（内存、文件或者数据库）！

有一个简单的使用原则：

仅在上行带宽有限（也即是服务器成本低于网络传输成本）时使用，否则适得其反。

 

在 stackoverflow 上有一个帖子，描述了将 ViewState 保存到服务器端可能存在的问题。

启用 FineUI 的 EnableFStatePersistence 适用于同样的原则（引文中的VS指的是ViewState）：

  1. If the application recycles, the VS for all anyone using the application is lost.

  2. It increases the memory consumption of the application. This isn't an issue if there are only a few apps hosted on a server; but there are cases when there could be many websites hosted on one box.

  3. Scalability; the more active the application, the more VS needs to be stored. And you can't assume 1-1 (1 user - 1 VS). A user can have multiple tabs open, can go back, leave tabs inactive, etc... which leads to:

  4. How long do you store VS? Keeping the data encoded on the page ensures that it'll still be there if the user leaves the site open for a while.

  5. What happens if you're hosted on a web farm. We can't guarantee that the user will hit the same machine on each request.

 

 

官网示例：http://fineui.com/demo_pro/

 

 

posted @ 2017-02-26 14:45  三生石上(FineUI控件)  阅读(2119)  评论(2)  编辑  收藏  举报