How can I optimize the FineUI control library performance and reduce the data upload volume by 80%!

No matter the first time I used the FineUI control library, or those who have more than three years of experience, I was very impressed with the simplicity of FineUI. Of course, "Everything For simplicity" is also a loud FineUI slogan. Not only that, if an open-source project wants to stand on and develop for a long time, it will not work with simplicity alone, but it will also have its own characteristics, this feature is innovation.

 

From the FineUI official website (http://fineui.com/) We can see that the three major features of FineUI "Everything For simplicity", "80% by heart", "innovation so unique ":

 

What we want to talk about today is the scope of "innovation.

 

XState mechanism of FineUI

We all know that ViewState is ASP. an important foundation of NET WebForms, used to maintain the server status of the Control During page sending, in this way, we can easily use the control attributes in the callback event handler function, for example, the following code:

   1:  Label1.Text = TextBox1.Text;

However, in the AJAX application environment, ViewState requires code to download data redundancy. Therefore, FineUI has long implemented an XState mechanism suitable for AJAX within it to reduce data redundancy, accelerate page rendering.

 

However, please note that the use of XState in FineUI does not enable ViewState. The traditional ASP. NET control still uses ViewState, and you can still save a small amount of data in ViewState. For example, the following code is still valid:

   1:  if (ViewState["BindGrid1"] != null && Convert.ToBoolean(ViewState["BindGrid1"]))

   2:   {

   3:          BindGrid();

   4:          ViewState["BindGrid1"] = false;

   5:  }

 

There was a detailed article comparing ViewState and XState with the impression of using the FineUI control library: http://www.cnblogs.com/sanshi/archive/2013/01/08/2850459.html

 

Here we will briefly draw a conclusion:

For the following page, we compare the data volume downloaded during the first loading and clicking the button to send back:

 

ViewState version: The first time you load the downloaded data (5068 bytes), click the button to send back the downloaded data (1251 bytes)

XState version: load and download data (4922 bytes) on the first page and click the button to send and download data (709 bytes)

 

It can be seen that XState brings a great advantage, that is, reducing the volume of data downloaded.

 

Now, we are concerned about the data upload volume.

I have always been concerned about data downloads, while ignoring the data upload volume. In fact, our network environment is an asymmetric uplink/downlink network. Generally, the uplink speed is 1/2 or even less of the downlink speed. To reference a section in an article:

Why Upload and Download Speeds Differ

• Upload speed is usually slower than download speed because Internet providers have designed their systems to optimize download speeds. this is because most Internet users spend more time downloading than uploading. in other words, Internet providers give priority to downloading since it's more frequently done than uploading.

In other words, because people are more eager to download, network providers generally allocate higher transmission speeds to downloads.

 

I have not considered this direction until some forum users raised this question: http://fineui.com/bbs/forum.php? Mod = viewthread & tid = 3166.

 

When I saw this post, I realized that FineUI was the time to make changes!

 

Because we need to persist data before the server and client, for this example, the HTML code that has been rendered in the table. The common method is to compress the data submitted by the client. However, using JavaScript on the client to compress the data similar to Gzip is just a nightmare (the browser performance cannot be satisfied )!

 

What should I do?

 

Balanced downloads and uploads

Since the compression cannot be performed on the client, the compression must be performed on the server. The idea is as follows:

1. compress the persistent state on the server during page loading and write it to the page;

2. Download the compressed persistent data when AJAX is submitted;

3. During the AJAX submission process, the New Compressed persistent data is regenerated and written to the page;

4. So proceed ....

 

Based on the following considerations, the newly added compressed data will not have a great impact on the download volume:

1. Generally, the downstream bandwidth is sufficient;

2. the compressed persistent data is generally relatively small;

3. download data is generally compressed by GZIP.

 

The specific implementation in FineUI is also very simple. First, we define the GZIP compression and decompression functions:

   1:  public static string Gzipped(string source)

   2:  {

   3:      using (var outStream = new MemoryStream())

   4:      {

   5:          using (var gzipStream = new GZipStream(outStream, CompressionMode.Compress))

   6:          {

   7:              using (var mStream = new MemoryStream(Encoding.UTF8.GetBytes(source)))

   8:              {

   9:                  mStream.WriteTo(gzipStream);

  10:              }

  11:          }

  12:   

  13:          return StringUtil.EncodeTo64(outStream.ToArray());

  14:      }

  15:  }

  16:   

  17:  public static string Ungzipped(string source)

  18:  {

  19:      byte[] bytes = Convert.FromBase64String(source);

  20:   

  21:      using (GZipStream stream = new GZipStream(new MemoryStream(bytes), CompressionMode.Decompress))

  22:      {

  23:          const int size = 512;

  24:          byte[] buffer = new byte[size];

  25:          using (MemoryStream memory = new MemoryStream())

  26:          {

  27:              int count = 0;

  28:              do

  29:              {

  30:                  count = stream.Read(buffer, 0, size);

  31:                  if (count > 0)

  32:                  {

  33:                      memory.Write(buffer, 0, count);

  34:                  }

  35:              } while (count > 0);

  36:   

  37:              return System.Text.Encoding.UTF8.GetString(memory.ToArray());

  38:          }

  39:      }

  40:  }

Add a GZIP compression attribute for the control base class:

   1:  private List<string> _gzippedAjaxProperties = new List<string>();

   2:   

   3:  internal List<string> GzippedAjaxProperties

   4:  {

   5:      get { return _gzippedAjaxProperties; }

   6:      set { _gzippedAjaxProperties = value; }

   7:  }

Finally, compress this attribute during the first page loading and AJAX process:

   1:  bool propertyGzippped = _gzippedAjaxProperties.Contains(property);

   2:  string propertyGzippedValue = String.Empty;

   3:   

   4:  object propertyValue = GetPropertyJSONValue(property);

   5:   

   6:  JToken tokenValue = propertyValue as JToken;

   7:  jo.Add(property, tokenValue);

   8:   

   9:  if (propertyGzippped)

  10:  {

  11:      propertyGzippedValue = tokenValue.ToString(Newtonsoft.Json.Formatting.None);

  12:  }

  13:   

  14:  if (propertyGzippped && !String.IsNullOrEmpty(propertyGzippedValue))

  15:  {

  16:      jo.Add(property + "_GZ", StringUtil.Gzipped( propertyGzippedValue));

  17:  }

 

Test optimization result

To perform the test, we created a table page with the following results:

 

This page contains a total of 22 rows of data. We will compare the results of the first loading and clicking "selected rows" operations before and after optimization.

 

Before optimization, the page is loaded for the first time (UP: 0 DOWN: 30684 ):

 

Before optimization, page sending back (UP: 33202 DOWN: 186 ):

 

After optimization, the page is loaded for the first time (UP: 0 DOWN: 34366 ):

 

After optimization, the page is sent back (UP: 6016 DOWN: 186 ):

 

After optimization, when the page is loaded for the first time, the downloaded data increases from 30684 bytes to 34366 bytes, increasing by 12%. This increase does not have much impact on the download.

However, the number of uploads is greatly reduced. When AJAX is sent back, the number of uploaded data is reduced from 33202 bytes to 6016, Which is 82% less. In reality, the uplink bandwidth is insufficient, the impact of this change is indeed huge!

 

Conclusion

The optimized FineUI control library will slightly increase the volume of downloaded data. However, considering that the downstream bandwidth is generally abundant and the downstream data is generally compressed by GZIP, this change will not be affected. The practical advantage is thatThe amount of uploaded data is greatly reduced by 80%.The impact of this change is indeed huge!

 

 

Note: This feature will be included in the next FineUI version (FineUI v3.3.1 ).

 

If you like this article, don't forget to click the [recommendation] button in the lower right corner of the page.