ASP.NET MVC 應用提速的十種方法

【編者按】本文作者為 DZone 社群的最具價值博主(MVB) Jonathan Danylko，主要介紹為 ASP.NET MVC 應用提速的十種方法。由國內 ITOM 管理平臺 OneAPM 編譯呈現，以下為正文。

每個人都想快速掌握最新訊息。

我是說，人們恨不得預知第二天的頭條。沒有人喜歡等待。

排隊等待，遇到紅燈要等待，開個網頁要等待，等等等。

理所當然，沒有人喜歡等待網頁慢吞吞地載入，尤其是在移動端訪問網站時。其實，Web 開發者敏感的神經決定了我們等待與否。

現在，快速響應不僅是來自使用者的要求，還是決定 Google 搜尋排名的主要因素。除此之外，Google 還大力推行 Google AMP 計劃，以使網站載入更加快速。

考慮到大多數網站都存在速度方面的問題，筆者想通過此文幫助 Microsoft 開發者優化他們的網站。

在本文中，筆者將介紹十種為 ASP.NET MVC 應用提速的方法。

1. 應用程式快取

快取一直都是優化應用時屢試不爽的最後絕招。只要使用得當，快取絕對可以有效加速應用。

在進行資料庫呼叫以檢索記錄時，正是實現應用程式快取的最佳時機。

譬如說，你搭建了一個部落格。當訪客請求某一篇博文時，你將其從資料庫中檢索出來，儲存在快取中。當下一個訪客通過 ID 請求同一篇博文時，應用程式會首先根據 ID 在快取中尋找博文，如果找到，就將之返回給訪客，而無需訪問資料庫。

這節省了資料庫呼叫的高昂開支。

延伸閱讀：通過新增簡單的快取層以實現高效快速的網站

2. 優化圖片

之前，筆者從未了解過圖片在一篇博文中會佔據多大比重。有時候，取決於文章內容的不同，圖片可能會是一篇博文中最大的資源。

你應該壓縮這些龐大的資源。圖片越小，網頁渲染的速度越快。

Image Optimizer（圖片優化）外掛是很有用的 Visual Studio 外掛。選定你的所有影像，再選擇無損(Lossless)或者有損(Lossy)圖片優化模式，每張圖片都會根據一定的比率壓縮大小。

此外，如果你掌握了 Grunt 或 Gulp 之類的前端客戶端工具，就可以在建立應用或者部署應用時自動實現圖片優化。

延伸閱讀：Visual Studio 2015 圖片優化外掛

3. 使用 Sprites

每個網站都有圖片。圖片幾乎是必不可少的網站元素。

但是，如果你有很多小圖片，該如何處理呢？假設有20張小圖片，那就是20次圖片檢索請求，每張圖片一次。

這時候，Sprites 就能派上用場啦。

Sprites 是由眾多小圖片集合而成的一張大圖。瀏覽器可以直接請求這張大圖，你再通過 CSS 技術抓取其中的小圖片，並將其展示在網頁的不同位置上。

我知道，很多開發者並不熟悉 CSS。因此，建議大家找點資料好好學習一下。CSS 真的非常有用。

此外，還有許多線上 sprite 生成器，可以協助這一過程。（Piskel, Sprite Cow, 或者谷歌搜尋：“線上 Sprite 生成器”）

延伸閱讀：ASP.NET MVC：資料驅動 CSS Sprites

4. ETags

有些讀者可能不知道 ETags 為何物。其實，ETags 是用於 Web 快取驗證的工具，允許有條件的客戶端請求。

通過 ETags，瀏覽器可以判斷某項資源是否被需要。如果不需要，瀏覽器就不會向 Web 伺服器傳送請求，從而最小化請求數量。

筆者甚至將 ETag ActionFilter 類列為最喜歡的 ActionFilter 類，因為 ETags 的確能最小化網站向 Web 伺服器傳送的請求數量。

延伸閱讀：我最喜歡的五個 ASP.NET MVC ActionFilters

5. 捆綁或最小化 JavaScript/CSS 程式碼

捆綁與最小化早已不是什麼新鮮的概念了。

捆綁是指將所有 JavaScript 與 CSS 程式碼打包為一個 JavaScript 或 CSS 檔案的過程。這與 Sprite 技術相似，不過處理的是 JavaScript 與 CSS 檔案。捆綁可以減少針對單獨 JavaScript 與 CSS 檔案的請求，從而減少成本。

JavaScript 與 CSS 檔案充滿了空格，這些空格佔用了不少的空間。最小化就是移除 JavaScript 或 CSS 檔案裡的大量空格的過程。

在 ASP.NET MVC 專案中， App_Start 資料夾下有一個 BundleConfig.cs 檔案。你可以在該檔案中定義 JavaScript 與 CSS 檔案的捆綁或最小化設定。

延伸閱讀：捆綁與最小化

6. 壓縮

你發覺我們的套路了麼？

實現壓縮的方式有兩種：一是通過 IIS 啟用壓縮，二是通過 ActionFilter 類。

壓縮啟用後，Web 伺服器會將資源壓縮成包，再傳給客戶端。後者會先解壓縮，然後再展示內容。

這能有效提高資源傳送的速度。

筆者還為此寫了一個 CompressFilter 類。通過 Action 方法呼叫該類，就能實現對網頁的壓縮。

延伸閱讀：我最喜歡的五個 ASP.NET MVC ActionFilters

7. 最小化 HTML

在前文討論最小化時，筆者不禁想到，你的 HTML 頁面肯定也存在了許多空格。

HTML 檔案越小，它傳送到瀏覽器的速度就越快。取決於 HTML 頁面大小的差異，移除其中的空格能夠縮減 20%到50%的大小。

為此，筆者寫了一個 Whitespace ActionFilter 類，也是筆者最喜歡的 ActionFilter 類之一。

延伸閱讀：我最喜歡的五個 ASP.NET MVC ActionFilters

8. 儘量使用 AJAX

AJAX 早已推出，而且好處多多。它模糊了桌面應用與 Web 應用間的界限。

它也絕對可以加速網站中的一些任務。

例如，筆者在自己的網站中建立了一個儀表盤。

在具體實現時，我可以先讓頁面載入一個儀表盤骨架。在頁面載入完畢之後，開始執行 JavaScript 方法，請求小部件的載入。在之後會出現小部件的地方，可以先放置等待載入的圖示。當部件載入完畢之後，再以部件的內容替換等待載入的圖示。

這能使使用者的瀏覽體驗更加流暢。

延伸閱讀：為什麼說 AJAX 如同胡椒粉

9. 最小化資料庫呼叫

諸如 Entity Framework 及 NHibernate 之類的物件關係對映(Object-Relational Mapping, ORM)資料庫能夠進行隱式呼叫(hidden calls)，即便你從未要求過此類呼叫。

每一種 ORM 資料庫都有許多鮮為人知的“陷阱”。但是，你可以做到的是：確保在自己的程式碼中，每次檢索資料都只發起一次資料庫呼叫。

當筆者剛開始使用 Entity Framework 資料庫時，曾吃過不少虧。比如，為了檢索一條特定的記錄，我發起了一次資料庫呼叫。在檢索該記錄時，程式發現了該記錄的子物件，於是決定檢索這些子物件，為此，針對每個實體，又都發起了一次資料庫呼叫（有時候，為了一條特定記錄，居然會產生200次資料庫呼叫，真是可怕！）……

現在，筆者的經驗法則是：

• 確定需要一條記錄，還是多組記錄。
• 如果只需要一條記錄，則使用儲存庫(repository)獲取此記錄。
• 如果需要不止一條或多組記錄，則使用 sproc(儲存過程，Stored Procedure)。

如果你不太確定如何獲取多個結果集，可以閱讀有關使用 Entity Framework 檢索多個結果集的帖子。

延伸閱讀：ASP.NET MVC: 使用 Entity Framework 從泛型儲存庫中返回多個結果集

10. 儘可能使用靠譜的第三方服務

記得在前文中我說的儘量使用 AJAX 麼？

基於同樣的理由，我決定放棄建立自定義的評論系統，轉而使用 Disqus。

為什麼呢？理由有五個：

• Disqus 是免費的。
• Disqus 只需要一小段 JavaScript 程式碼和基本存取方法(Basic Access Method, BAM)，就能立即實現一個評論系統。
• 部署成功後，網頁會優先載入，而 Disqus 在後臺載入。通常，由於評論部分往往位於頁面底部，使用者剛開啟頁面時還不會看到評論部分。
• Disqus 在移動端載入時也很友好。
• Disqus 帶有一些社交網路屬性，允許使用者看到關於 Disqus 網站上的文章評論。

這類第三方服務不僅能為我的網站提供常見的基本功能，還藉助 AJAX 為我的讀者實現了流暢的閱讀體驗。

延伸閱讀：Disqus

結論

本文介紹的絕大部分速度提升方法都需要特定的程式設計技巧。一旦掌握了這些技巧，你就能輕易實現高效快速的網站。

以上所有技術都應用在筆者的網站中。

你不信？

右鍵單擊以檢視本文原始碼。

OneAPM 能助您輕鬆鎖定 .NET 應用效能瓶頸，通過強大的 Trace 記錄逐層分析，直至鎖定行級問題程式碼。以使用者角度展示系統響應速度，以地域和瀏覽器維度統計使用者使用情況。想閱讀更多技術文章，請訪問 OneAPM 官方部落格。 本文轉自 OneAPM 官方部落格 原文地址：https://dzone.com/articles/10-ways-to-speed-up-your-aspnet-mvc-application