การเพิ่มประสิทธิภาพในการทำงานของเว็บเพจมีหลายวิธี หนึ่งในนั้นคือการลบ ช่องว่าง (White-spaces) หรือ Comments ต่างๆ ที่อยู่ในหน้า Html ออกให้หมดเพื่อให้ Request มีขนาดเล็กลง เพื่อช่วยให้การทำงานมีประสิทธิภาพเร็วขึ้น โดยมีหลักการคือกำหนด ActionFilter ทำการตัดช่องว่างและคอมเมนต์ต่างๆออกในจังหวะ OnResultExecuting
เร่มแรกให้สร้าง Class ชื่อ MinifiedStream.cs โดยผมจะตั้งชือ namespace นี้เป็น Web.MVC.Filter ซึ่งจะมี Code ดังนี้
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Text;
using System.Text.RegularExpressions;
using System.Web;
namespace Web.MVC.Filter
{
public class MinifiedStream : MemoryStream
{
private readonly Stream _output;
private static readonly Regex Whitespace = new Regex(@"(?<=[^])\t{2,}|(?<=[>])\s{2,}(?=[<])|(?<=[>])\s{2,11}(?=[<])|(?=[\n])\s{2,}", RegexOptions.Compiled);
private static readonly Regex htmlComments = new Regex(@"<!--(.|\\s)*?-->", RegexOptions.Compiled);
private static readonly Regex cssComments = new Regex(@"/\*.+?\*/", RegexOptions.Compiled);
public MinifiedStream(Stream stream)
{
_output = stream;
}
public override void Write(byte[] buffer, int offset, int count)
{
var html = Encoding.UTF8.GetString(buffer);
html = htmlComments.Replace(html, string.Empty);
html = cssComments.Replace(html, string.Empty);
html = Whitespace.Replace(html, string.Empty);
html = html.Trim();
_output.Write(Encoding.UTF8.GetBytes(html), offset, Encoding.UTF8.GetByteCount(html));
}
}
}
ใน Code จะทำงานโดยใช้ Regular Expression ตรวจสอบ Html จาก Buffer เพื่อไปตรวจสอบช่องว่างและ Comments ต่างๆ แล้ว Replace ด้วย String.Empty ในตัวอย่างนี้จะมี Regular Expression 3 ชุด
1. Whitespace - สำหรับลบช่องว่าง กำหนด Regular Expression ดังนี้
- @"(?<=[^])\t{2,}|(?<=[>])\s{2,}(?=[<])|(?<=[>])\s{2,11}(?=[<])|(?=[\n])\s{2,}"
2. htmlComments - สำหรับลบ Comment ใน Html กำหนด Regular Expression ดังนี้
- @"<!--(.|\\s)*?-->"
3. cssComments - สำหรับลบ Comment ใน Css กำหนด Regular Expression ดังนี้
- @"/\*.+?\*/"
จากนั้นมาสร้าง Class ชื่อ MinifyHtml.cs เืพื่อสร้าง Action Filtering โดยดังนี้
using System;
using System.Web.Mvc;
using System.Text.RegularExpressions;
namespace Web.MVC.Filter
{
public class MinifyHtml : ActionFilterAttribute
{
public override void OnResultExecuting(ResultExecutingContext filterContext)
{
var response = filterContext.HttpContext.Response;
response.Filter = new MinifiedStream(response.Filter);
}
}
}
เท่านี้ก็สามารถสร้าง Action Filtering เพื่อลบ Whitespace , Comments , CSS Comments ที่ไม่จำเป็นออกจากหน้าเว็บ ซึ่งช่วยประสิทธืภาพในการโหลดหน้าเว็บให้เร็วขึ้น
ที่นี้มาลองทดสอบกันดูนะครับว่า Code ทำงานแล้วได้ผลลัพธ์อย่างไร ผมได้ทำการสร้าง View ที่มี Comment และ White Space อยู่เยอะมาก ดังนี้
@{
ViewBag.Title = "Home Page";
}
<!-- title page -->
<h2>@ViewBag.Message</h2>
<!-- detail -->
<p>
To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.
</p>
หลังจากทดสอบ Run ออกมาแล้วจะเห็นว่า Response ที่ได้กลับมาจะไม่มี Whitespace , Comments ดังรูป
