1. 程式人生 > >細說ASP.NET Core靜態檔案的快取方式

細說ASP.NET Core靜態檔案的快取方式

一、前言

  我們在優化Web服務的時候,對於靜態的資原始檔,通常都是通過客戶端快取伺服器快取CDN快取,這三種方式來緩解客戶端對於Web伺服器的連線請求壓力的。

  本文指在這三個方面,在ASP.NET Core中靜態檔案的實現過程和使用方法進行闡述。當然也可以考慮使用反向代理的方式(例如IIS或Nginx),這些不是本文討論的內容。

  本文重點展示如何通過StaticFileMiddleware中介軟體,提高網站的效能。雖然這不是唯一快取檔案的方式,我們還可以通過ResponseCacheAttribute特性為ASP.NET Core Mvc的Controller和Action進行快取的設定。

二、StaticFileMiddleware

  1.檔案服務與預設快取規則

  當建立一個ASP.NET Core的專案時,檢視Startup.Configure方法,就會看到預設模板生成的新增StaticFileMiddleware中介軟體的方法。

  1. publicvoidConfigure(IApplicationBuilder app)

  2. {

  3. // looging and exception handler removed for clarity

  4.    app

    .UseStaticFiles();

  5.    app.UseMvc(routes =>

  6. {

  7.        routes.MapRoute(

  8.            name:"default",

  9. template:"{controller=Home}/{action=Index}/{id?}");

  10. });

  11. }

  這樣就使你的應用程式能夠處理,程式目錄下wwwroot目錄的靜態檔案內容。在我們新增檔案快取之前,我們先要看一下StaticFileMiddleware預設的策略是怎麼樣的。當第一次載入程式時,瀏覽器將開啟頁面並下載所有的資源連線。假如頁面沒有錯誤返回都是正確那麼就是返回檔案資料和Http Status為200 -OK的狀態。

 640?wx_fmt=png

  然後我們看下這個Http請求對應的Response Header,這裡會包含ETagLast-Modified兩個值。HTTP內容如下:

  1. HTTP/1.1200 OK  

  2. Date:Sat,15Oct201614:15:52 GMT  

  3. Content-Type: image/svg+xml  

  4. Last-Modified:Sat,15Oct201613:43:34 GMT  

  5. Accept-Ranges: bytes  

  6. ETag:"1d226ea1f827703"

  7. Server:Kestrel

  如果再次請求這個地址的話,瀏覽器將傳送ETagLast-Modified的值到服務端,如果兩個值沒有變化,那麼服務端會發送304狀態到瀏覽器,那麼瀏覽器將使用之前的資源而不是重新下載一份。

640?wx_fmt=png

   這樣就提高了,瀏覽器的響應效能,因為檔案都快取到了客戶端,並且通過304狀態,服務端與瀏覽器的請求流量得以減少。

  2.設定檔案快取時間

  當然我們都知道如果要設定某一請求的快取,只需要設定Header為Cache-Control的值。那麼在StaticFileMiddleware中介軟體中,我們怎麼設定這個Header呢?

  1. usingMicrosoft.Net.Http.Headers;

  2. app.UseStaticFiles(newStaticFileOptions

  3. {

  4. OnPrepareResponse= ctx =>

  5. {

  6. constint durationInSeconds =60*60*24;

  7.        ctx.Context.Response.Headers[HeaderNames.CacheControl]=

  8. "public,max-age="+ durationInSeconds;

  9. }

  10. });

  設定後每一個靜態檔案的請求都會執行這個方法,包括200和304狀態的請求;而且在這個例子裡瀏覽器會自動快取這些檔案24小時,但是在此期間並不會返回404狀態

  一旦max-age設定的時間過期,瀏覽器就不會再使用本地快取,而去直接請求伺服器端。這樣已經避免了一些額外的請求到伺服器端了。如果我們在瀏覽器與伺服器中間使用CDN快取檔案資料的話,這樣就算客戶端瀏覽器的快取過期了,但是請求也不會到我們的伺服器上,而是請求到CDN快取伺服器。

  下面我們看看檔案快取在ASP.NET Core中是如何判斷快取失效的?.NET Core開源的程式碼為我們提供了了解它的入口。核心程式碼如下:

  1. _length = _fileInfo.Length;

  2. DateTimeOffsetlast= _fileInfo.LastModified;

  3. // Truncate to the second.

  4. _lastModified =newDateTimeOffset(last.Year,last.Month,last.Day,last.Hour,last.Minute,last.Second,last.Offset).ToUniversalTime();

  5. long etagHash = _lastModified.ToFileTime()^ _length;

  6. _etag =newEntityTagHeaderValue('\"'+Convert.ToString(etagHash,16)+'\"');

  伺服器端如果檢測到檔案改變就會返回200狀態給瀏覽器,如果沒有變化則返回304狀態給瀏覽器端。

  不幸的是,一旦我們添加了快取,瀏覽器將不再向伺服器發出請求。該檔案可能已經完全改變或已被完全刪除,但如果瀏覽器不要求,伺服器將不能通知瀏覽器重新發起無快取的請求!

  3.為靜態檔案提供版本號

  通常我們都使用形如https://localhost/js/site.js?v=1 這樣的地址來解決快取的問題。通過給靜態檔案生成唯一的版本號,做為QueryString進行請求時,伺服器將重新輸出檔案內容。

  在ASP.NET Core中Tag Hepers為我們提供了這樣的API:

  1. <scriptsrc="~/js/site.js"asp-append-version="true"></script>

  這段程式碼最終在瀏覽器端會被渲染為如下Html程式碼:

  1. <scriptsrc="/js/site.js?v=Ynfdc1vuMNOWZfqTj4N3SPcebazoGXiIPgtfE-b2TO4"></script>

  如果靜態檔案發生改變,Tag Helper就是重新計算檔案的雜湊值,它採用 SHA256的雜湊值。當然以前伺服器快取的檔案版本也隨之失效了。這個asp-append-version Tag Helper可以支援Img、Script和Link元素。

  ASP.NET Core的原始碼我們來看看是怎麼計算檔案變化的:。

 三、ASP.NET Core與CDN?

  我們在使用CDN時,因為還要進行開發任務,一般我們都要有兩套地址,一套是CDN上的檔案地址,一套是本地除錯開發用的地址。ASP.NET Core中也為我們提供了Tag Helper來解決這樣的問題。直接上程式碼例項吧:

  1. <linkrel="stylesheet"href="//ajax.aspnetcdn.com/ajax/bootstrap/3.0.0/css/bootstrap.min.css"

  2. asp-fallback-href="~/lib/bootstrap/css/bootstrap.min.css"

  3. asp-fallback-test-class="hidden"

  4. asp-fallback-test-property="visibility"

  5. asp-fallback-test-value="hidden"/>

  6. <scriptsrc="//ajax.aspnetcdn.com/ajax/bootstrap/3.0.0/bootstrap.min.js"

  7. asp-fallback-src="~/lib/bootstrap/js/bootstrap.min.js"

  8. asp-fallback-test="window.jQuery">

  9. </script>

  Tag Helper:asp-fallback-* 解決開發時使用的檔案地址問題。 當然它也可以asp-append-version 兩個Tag Helper一起使用,這樣就實現了,在CDN檔案快取的同步問題。

四、寫在最後

  新的ASP.NET Core為我們提供了很多現有網際網路行業的解決方案,也給.NET開發人員引入了先進思想。

原文地址:http://www.cnblogs.com/maxzhang1985/p/6053738.html

.NET社群新聞,深度好文,微信中搜索dotNET跨平臺或掃描二維碼關注

640?wx_fmt=jpeg