ASP.NET MVC 應(yīng)用提速的十種方法

【編者按】本文作者為 DZone 社區(qū)的最具價(jià)值博主(MVB) Jonathan Danylko，主要介紹為 ASP.NET MVC 應(yīng)用提速的十種方法。由國內(nèi) ITOM 管理平臺(tái) OneAPM 編譯呈現(xiàn)，以下為正文。

每個(gè)人都想快速掌握最新消息。

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

排隊(duì)等待，遇到紅燈要等待，開個(gè)網(wǎng)頁要等待，等等等。

理所當(dāng)然，沒有人喜歡等待網(wǎng)頁慢吞吞地加載，尤其是在移動(dòng)端訪問網(wǎng)站時(shí)。其實(shí)，Web 開發(fā)者敏感的神經(jīng)決定了我們等待與否。

現(xiàn)在，快速響應(yīng)不僅是來自用戶的要求，還是決定 Google 搜索排名的主要因素。除此之外，Google 還大力推行 Google AMP 計(jì)劃，以使網(wǎng)站加載更加快速。

考慮到大多數(shù)網(wǎng)站都存在速度方面的問題，筆者想通過此文幫助 Microsoft 開發(fā)者優(yōu)化他們的網(wǎng)站。

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

1. 應(yīng)用程序緩存

緩存一直都是優(yōu)化應(yīng)用時(shí)屢試不爽的最后絕招。只要使用得當(dāng)，緩存絕對(duì)可以有效加速應(yīng)用。

在進(jìn)行數(shù)據(jù)庫調(diào)用以檢索記錄時(shí)，正是實(shí)現(xiàn)應(yīng)用程序緩存的最佳時(shí)機(jī)。

譬如說，你搭建了一個(gè)博客。當(dāng)訪客請(qǐng)求某一篇博文時(shí)，你將其從數(shù)據(jù)庫中檢索出來，保存在緩存中。當(dāng)下一個(gè)訪客通過 ID 請(qǐng)求同一篇博文時(shí)，應(yīng)用程序會(huì)首先根據(jù) ID 在緩存中尋找博文，如果找到，就將之返回給訪客，而無需訪問數(shù)據(jù)庫。

這節(jié)省了數(shù)據(jù)庫調(diào)用的高昂開支。

延伸閱讀：通過添加簡單的緩存層以實(shí)現(xiàn)高效快速的網(wǎng)站

2. 優(yōu)化圖片

之前，筆者從未了解過圖片在一篇博文中會(huì)占據(jù)多大比重。有時(shí)候，取決于文章內(nèi)容的不同，圖片可能會(huì)是一篇博文中最大的資源。

你應(yīng)該壓縮這些龐大的資源。圖片越小，網(wǎng)頁渲染的速度越快。

Image Optimizer（圖片優(yōu)化）插件是很有用的 Visual Studio 插件。選定你的所有圖像，再選擇無損(Lossless)或者有損(Lossy)圖片優(yōu)化模式，每張圖片都會(huì)根據(jù)一定的比率壓縮大小。

此外，如果你掌握了 Grunt 或 Gulp 之類的前端客戶端工具，就可以在創(chuàng)建應(yīng)用或者部署應(yīng)用時(shí)自動(dòng)實(shí)現(xiàn)圖片優(yōu)化。

延伸閱讀：Visual Studio 2015 圖片優(yōu)化插件

3. 使用 Sprites

每個(gè)網(wǎng)站都有圖片。圖片幾乎是必不可少的網(wǎng)站元素。

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

這時(shí)候，Sprites 就能派上用場(chǎng)啦。

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

我知道，很多開發(fā)者并不熟悉 CSS。因此，建議大家找點(diǎn)資料好好學(xué)習(xí)一下。CSS 真的非常有用。

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

延伸閱讀：ASP.NET MVC：數(shù)據(jù)驅(qū)動(dòng) CSS Sprites

4. ETags

有些讀者可能不知道 ETags 為何物。其實(shí)，ETags 是用于 Web 緩存驗(yàn)證的工具，允許有條件的客戶端請(qǐng)求。

通過 ETags，瀏覽器可以判斷某項(xiàng)資源是否被需要。如果不需要，瀏覽器就不會(huì)向 Web 服務(wù)器發(fā)送請(qǐng)求，從而最小化請(qǐng)求數(shù)量。

筆者甚至將 ETag ActionFilter 類列為最喜歡的 ActionFilter 類，因?yàn)?ETags 的確能最小化網(wǎng)站向 Web 服務(wù)器發(fā)送的請(qǐng)求數(shù)量。

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

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

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

捆綁是指將所有 JavaScript 與 CSS 代碼打包為一個(gè) JavaScript 或 CSS 文件的過程。這與 Sprite 技術(shù)相似，不過處理的是 JavaScript 與 CSS 文件。捆綁可以減少針對(duì)單獨(dú) JavaScript 與 CSS 文件的請(qǐng)求，從而減少成本。

JavaScript 與 CSS 文件充滿了空格，這些空格占用了不少的空間。最小化就是移除 JavaScript 或 CSS 文件里的大量空格的過程。

在 ASP.NET MVC 項(xiàng)目中， App_Start 文件夾下有一個(gè) BundleConfig.cs 文件。你可以在該文件中定義 JavaScript 與 CSS 文件的捆綁或最小化設(shè)置。

延伸閱讀：捆綁與最小化

6. 壓縮

你發(fā)覺我們的套路了么？

實(shí)現(xiàn)壓縮的方式有兩種：一是通過 IIS 激活壓縮，二是通過 ActionFilter 類。

壓縮啟用后，Web 服務(wù)器會(huì)將資源壓縮成包，再傳給客戶端。后者會(huì)先解壓縮，然后再展示內(nèi)容。

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

筆者還為此寫了一個(gè) CompressFilter 類。通過 Action 方法調(diào)用該類，就能實(shí)現(xiàn)對(duì)網(wǎng)頁的壓縮。

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

7. 最小化 HTML

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

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

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

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

8. 盡量使用 AJAX

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

它也絕對(duì)可以加速網(wǎng)站中的一些任務(wù)。

例如，筆者在自己的網(wǎng)站中建立了一個(gè)儀表盤。

在具體實(shí)現(xiàn)時(shí)，我可以先讓頁面加載一個(gè)儀表盤骨架。在頁面加載完畢之后，開始運(yùn)行 JavaScript 方法，請(qǐng)求小部件的加載。在之后會(huì)出現(xiàn)小部件的地方，可以先放置等待加載的圖標(biāo)。當(dāng)部件加載完畢之后，再以部件的內(nèi)容替換等待加載的圖標(biāo)。

這能使用戶的瀏覽體驗(yàn)更加流暢。

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

9. 最小化數(shù)據(jù)庫調(diào)用

諸如 Entity Framework 及 NHibernate 之類的對(duì)象關(guān)系映射(Object-Relational Mapping, ORM)數(shù)據(jù)庫能夠進(jìn)行隱式調(diào)用(hidden calls)，即便你從未要求過此類調(diào)用。

每一種 ORM 數(shù)據(jù)庫都有許多鮮為人知的“陷阱”。但是，你可以做到的是：確保在自己的代碼中，每次檢索數(shù)據(jù)都只發(fā)起一次數(shù)據(jù)庫調(diào)用。

當(dāng)筆者剛開始使用 Entity Framework 數(shù)據(jù)庫時(shí)，曾吃過不少虧。比如，為了檢索一條特定的記錄，我發(fā)起了一次數(shù)據(jù)庫調(diào)用。在檢索該記錄時(shí)，程序發(fā)現(xiàn)了該記錄的子對(duì)象，于是決定檢索這些子對(duì)象，為此，針對(duì)每個(gè)實(shí)體，又都發(fā)起了一次數(shù)據(jù)庫調(diào)用（有時(shí)候，為了一條特定記錄，居然會(huì)產(chǎn)生200次數(shù)據(jù)庫調(diào)用，真是可怕！）……

現(xiàn)在，筆者的經(jīng)驗(yàn)法則是：

• 確定需要一條記錄，還是多組記錄。

• 如果只需要一條記錄，則使用存儲(chǔ)庫(repository)獲取此記錄。

• 如果需要不止一條或多組記錄，則使用 sproc(存儲(chǔ)過程，Stored Procedure)。

如果你不太確定如何獲取多個(gè)結(jié)果集，可以閱讀有關(guān)使用 Entity Framework 檢索多個(gè)結(jié)果集的帖子。

延伸閱讀：ASP.NET MVC: 使用 Entity Framework 從泛型存儲(chǔ)庫中返回多個(gè)結(jié)果集

10. 盡可能使用靠譜的第三方服務(wù)

記得在前文中我說的盡量使用 AJAX 么？

基于同樣的理由，我決定放棄創(chuàng)建自定義的評(píng)論系統(tǒng)，轉(zhuǎn)而使用 Disqus。

為什么呢？理由有五個(gè)：

• Disqus 是免費(fèi)的。

• Disqus 只需要一小段 JavaScript 代碼和基本存取方法(Basic Access Method, 
  BAM)，就能立即實(shí)現(xiàn)一個(gè)評(píng)論系統(tǒng)。

• 部署成功后，網(wǎng)頁會(huì)優(yōu)先加載，而 Disqus 在后臺(tái)加載。通常，由于評(píng)論部分往往位于頁面底部，用戶剛打開頁面時(shí)還不會(huì)看到評(píng)論部分。

• Disqus 在移動(dòng)端加載時(shí)也很友好。

• Disqus 帶有一些社交網(wǎng)絡(luò)屬性，允許用戶看到關(guān)于 Disqus 網(wǎng)站上的文章評(píng)論。

這類第三方服務(wù)不僅能為我的網(wǎng)站提供常見的基本功能，還借助 AJAX 為我的讀者實(shí)現(xiàn)了流暢的閱讀體驗(yàn)。

延伸閱讀：Disqus

結(jié)論

本文介紹的絕大部分速度提升方法都需要特定的編程技巧。一旦掌握了這些技巧，你就能輕易實(shí)現(xiàn)高效快速的網(wǎng)站。

以上所有技術(shù)都應(yīng)用在筆者的網(wǎng)站中。

你不信？

右鍵單擊以查看本文源碼。

OneAPM 能助您輕松鎖定 .NET 應(yīng)用性能瓶頸，通過強(qiáng)大的 Trace 記錄逐層分析，直至鎖定行級(jí)問題代碼。以用戶角度展示系統(tǒng)響應(yīng)速度，以地域和瀏覽器維度統(tǒng)計(jì)用戶使用情況。想閱讀更多技術(shù)文章，請(qǐng)?jiān)L問 OneAPM 官方博客。 
本文轉(zhuǎn)自 OneAPM 官方博客 
原文地址：https://dzone.com/articles/10-ways-to-speed-up-your-aspnet-mvc-application