Nén HTML và tối ưu hóa JavaScript cho website Asp.net

Mã giảm giá AZDIGI

Hiện nay có khá nhiều phương pháp và công cụ hỗ trợ các lập trình viên làm điều này. Hôm nay mình xin giới thiệu một phương pháp khá đơn giản để giảm ...

5 thủ thuật chọn từ khóa Google Adwords mang lại hiệu quả cao
Tặng ngay theme Javo Home cho bạn đọc ThichChiaSe.com
Những quyển sách học Web Design hay nhất 2017 – Front-End Books

Hiện nay có khá nhiều phương pháp và công cụ hỗ trợ các lập trình viên làm điều này. Hôm nay mình xin giới thiệu một phương pháp khá đơn giản để giảm dung lượng trang và tối ưu hóa mã javascript trên trang website Asp.net.

1. Tối ưu hóa javascript và css.

Bản chất của việc tối ưu hóa javascript và css là tiến hành loại bỏ các khoảng trống (whilespace) và các dòng chú thích không cần thiết trong file javascript và css để giảm dung lượng file, tăng tốc độ tải.

Hiện tại đối với vấn đề này có rất nhiều công cụ hỗ trợ, với javascript có thể dùng công cụ: javascriptcompressor.com

Công cụ javascriptcompressor.com

Công cụ javascriptcompressor.com

Còn đối với css, các bạn có thể dùng công cụ: csscompressor.net

Còn đối với css, các bạn có thể dùng công cụ: csscompressor.com

Còn đối với css, các bạn có thể dùng công cụ: csscompressor.com

2. Tối ưu hóa mã HTML trả về client.

Cũng tương tự với việc tối ưu hóa javascript và CSS ở trên, bản chất của việc tối ưu hóa mã HTML cũng vậy. Tuy nhiên mã HTML ở các website asp.net do phía server sinh ra nên chúng ta cần một hàm nhỏ để thực hiện công việc này.

Code:

protected override void Render(HtmlTextWriter writer)
{
    //html minifier & JS at bottom
    // not tested
    if (this.Request.Headers["X-MicrosoftAjax"] != "Delta=true")
    {
        System.Text.RegularExpressions.Regex reg = new System.Text.RegularExpressions.Regex(@"<script[^>]*>[\w|\t|\r|\W]*?</script>");
        System.Text.StringBuilder sb = new System.Text.StringBuilder();
        System.IO.StringWriter sw = new System.IO.StringWriter(sb);
        HtmlTextWriter hw = new HtmlTextWriter(sw);
        base.Render(hw);
        string html = sb.ToString();
        System.Text.RegularExpressions.MatchCollection mymatch = reg.Matches(html);
        html = reg.Replace(html, string.Empty);
        reg = new System.Text.RegularExpressions.Regex(@"(?<=[^])\t{2,}|(?<=[>])\s{2,}(?=[<])|(?<=[>])\s{2,11}(?=[<])|(?=[\n])\s{2,}|(?=[\r])\s{2,}");
        html = reg.Replace(html, string.Empty);
        reg = new System.Text.RegularExpressions.Regex(@"</body>");
        string str = string.Empty;
        foreach (System.Text.RegularExpressions.Match match in mymatch)
        {
            str += match.ToString();
        }
        html = reg.Replace(html, str + "</body>");
        writer.Write(html);
    }
    else
        base.Render(writer);
}

Để thực hiện nén HTML của 1 trang bạn muốn, ví dụ như Default.aspx chẳng hạn, bạn chỉ việc copy hàm này phía trên sự kiện Page_Load của trang là được, trong trường hợp muốn thực hiện tối ưu website (nhiều trang) bạn nên bỏ hàm này ở trang trang MasterPage của bạn.

Để dễ hình dung cách thức làm việc của hàm trên và những gì nó đem lại, bạn xem hình dưới

Trước khi nén

Trước khi nén

Sau khi nén

Sau khi nén

Đối với những website ít nội dung, việc này có thể không mấy tác dụng, nhưng xét với các website có nội dung lớn, mã HTML trả về nhiều thì nó có thể giúp bạn giảm từ 30 – 50% dung lượng HTML, tăng tốc độ tải trang lên đáng kể.

3. Chuyển mã javascript xuống cuối trang

Bên cạnh việc nén mã HMTL, hàm còn có chức năng chuyển các mã javascript trên trang xuống cuối trang. Đây là một mẹo nhỏ rất hay tăng đáng kể tốc độ tải web. Người xem website không cần thiết phải chờ để tải hết toàn bộ mã javascript đặt ở đầu trang, cái họ cần nhìn thấy trước tiên là bố cụ trang (mã html và css) của bạn, sau đó mới đến các sự kiện phía client của javascript, vì vậy cách tối ưu nhất là hãy để chúng ở cuối trang web của bạn. và hàm này đã giúp bạn thực hiện diều đó.

Asp.net Asp.net Asp.net via Thuy.vk’s blog

Chia sẻ bài viết với:

COMMENTS

WORDPRESS: 2
  • comment-avatar

    csscompressor.com die rồi
    Giờ đổi sang https://csscompressor.net rồi nhé

  • Sunwah PearlHồ Tràm CoastarCoastar Hồ TràmCoastar EstatesKhu dân cư Nguyễn BìnhKDC Nguyễn BìnhDự án Nguyễn BìnhNam Việt ÁNine SouthĐất Hòa XuânĐất nền Hòa XuânDat Hoa XuanDat nen Hoa Xuan