ASP.NET - 拿掉那些沒有用的空白

拿掉那些沒有用的空白

05 八月
2006

拿掉那些沒有用的空白

0.0 (0 人評價)

由 admin 在 23:56 發表

你是否時常用瀏覽器欣賞自己寫出來的Web應用程式，並且暗中讚嘆自己是如此富有創造力，這些花花綠綠的網頁可不只是外表好看而已，它更帶給無數人們方便的新應用與驚奇，如果你看著自己的作品會有一點感動，非常好，你不只是一個會寫Code的程式工人，你跟本就是一個程式藝術家，不過我想談的不是如何讓網頁變的更漂亮這些太主觀的議題，今天就讓我們來看看漂亮網頁後面的原始碼。

打開你最滿意的網站並且檢視由程式執行過後的原始碼，通常會在左邊的部份挾帶大量的空白與Tab字元，而且在每行的右邊會跟著一個換行的符號，這會依照你編寫的習慣而有所不同。

這其實沒什麼大不了的，反正瀏覽器會自動略過它們然後顯示出正確的結果，但是這些沒有用處的泛空白字元依然存在不會憑空消失，於是就在每次的HTTP要求中一點一滴的消耗網路的頻寬，如果能去除掉這些泛空白字元我還可以把省下來的字元數多開幾個控制項的ViewState隱藏欄位，至少ViewState比沒有任何用處的空白好用多了。

我們現在正需要一個過濾器，在每次伺服器將網頁資料送出去之前把所有廢物殘渣清乾淨，寫一個繼承Stream的物件用來替換掉原來的資料流是個很好的主意，以下是一個簡單的範例。

using System;
using System.IO;
using System.Text.RegularExpressions;

public class MyFilter : Stream
{
    private Stream m_sink;

public WhitespaceFilter(Stream baseStream)
    {
        this.m_sink = baseStream;
    }

protected Stream BaseStream { get{ return this.m_sink; } }

public override bool CanRead { get { return false; } }

public override bool CanSeek { get { return false; }}

public override bool CanWrite { get { return this.m_sink.CanWrite; } }

public override long Length { get { throw new NotSupportedException(); }}

public override long Position
    {
        get { throw new NotSupportedException(); }
        set { throw new NotSupportedException(); }
    }

public override long Seek(long offset, System.IO.SeekOrigin direction)
    {
        throw new NotSupportedException();
    }

public override void SetLength(long length)
    {
        throw new NotSupportedException();
    }
    
    public override void Close()
    {
        this.m_sink.Close();
    }

public override void Flush()
    {
        this.m_sink.Flush();
    }

public override int Read(byte[] buffer, int offset, int count)
    {
        throw new NotSupportedException();
    }

public override void Write(byte[] buffer, int offset, int count)
    {
        string outputData = System.Text.Encoding.UTF8.GetString(buffer);

outputData = Regex.Replace(outputData, "[\r\n\t]", "", RegexOptions.IgnoreCase);
        outputData = Regex.Replace(outputData, "  +", " ", RegexOptions.IgnoreCase);

byte[] outData = System.Text.Encoding.UTF8.GetBytes(outputData);
        this.m_sink.Write(outData, 0, outData.GetLength(0));

}
}

真正的重點在於Write函式中的兩行
outputData = Regex.Replace(outputData, "[\r\n\t]", "", RegexOptions.IgnoreCase);
outputData = Regex.Replace(outputData, " +", " ", RegexOptions.IgnoreCase);
第一行我把所有的換行字元及Tab字元全部清楚掉，第二行把連續的空白字串換成單一個空白，最後把清理過後的字串再轉換成Stream交給系後做後續的處理，然後我們還要在Global.asax中的Application_BeginRequest事件使用這個加強過的Stream。

大功告成了，再次打開網頁看看原始碼你會發現那些該死的空白與換行字元都消失了，全部變成一串長長的字串，如果你有注意看我示範中的圖片的話應該會發現原本的網頁有12,949個位元組，現在只有10,277個位元組，足足省了21.73%的容量，我都還沒動手去除掉網頁中的註解部份呢。

看了以上的成果展示是否想要馬上把它加到你的系統中呢？先別急我還是必需讓你了解天下沒有白吃的午餐，任何過度偏激的行為背後都會有一些後遺症。

第一，我範例只是很簡單的去除連續空白，所以還有會有少數零星的無用空白留下來，而且有些如<pre>或是<textarea> Tag中的連續空白應該被保留下來，所以正確的做法應該用更複雜的規則運算式公式去解析HTML。
第二，每次Request就會引發伺服器過慮網頁內容，這影響伺服器的效能，影響的成度取決於過慮的程式碼是否太過複雜，所以如果你的程式掃瞄整個頁面只為了找出兩個無用字元的話，我想還是算了吧。

所以當你執意要使用這項技巧，我想提醒你要多注意被過慮後的網頁內容是否會變的不正常，而且千萬不要使用太複雜的過慮算式，如果你的網站是用100M/100M光纖架設的話我甚至希望你放棄這個愚蠢的想法，因為跟本沒必要，最後願主保佑那些整日與網頁原始碼為伍的傢伙，讓他們遠離可怕又討人厭的空白。