歐洲 Linux 基金會的管理下，Servo 網頁引擎（Servo Web Engine）在 Igalia 和其他開發者的不斷貢獻下，今年繼續保持著旺盛的生命力。參與其中的開源開發人員仍在忙于使這個由 Rust 編寫的網頁布局引擎進入良好狀態，以便為其他軟件提供嵌入式友好解決方案。

Servo 項目今天發布了 2024 年 3 月的月度狀態更新，重點介紹了過去一個月的所有進展。對于這個前 Mozilla 軟件項目來說，3 月份的一些亮點包括：

- 在整個網絡平臺測試套件中，Servo 已經超越了傳統的布局引擎。

- 支持 WOFF2 網絡字體。

- CSS 支持框陰影、文本陰影、圓錐梯度、重復圓錐梯度和其他功能，參數分別為box-shadow, text-shadow, conic-gradient, repeating-conic-gradient。

- Servo 默認已啟用 HTML 表格支持。

- 各種 2D 畫布改進。

- WebRender、Stylo、SpiderMoney 和 GStreamer 已全部升級。

- 更新了開發工具，以確保對 WebM 和 AV1 內容的支持。

- 繼續努力使 Servo 引擎便于嵌入。

- Servo 參與了 Outreachy 項目，并對代碼進行了改進，還修復了剪切錯誤，這些工作都要歸功于這些貢獻者。

有關 2024 年 3 月期間 Servo 網絡引擎進展的更多詳細信息，請訪問 Servo.org 博客：

https://servo.org/blog/2024/03/30/tables-woff2-outreachy/

近一次移動端Vue應用的上線，導致某些用戶使用某些功能時出現問題，經主動清空緩存后恢復。有時候清空微信應用的存儲空間緩存仍不能解決問題，此時安卓機可借助微信TBS調試工具 http://debugx5.qq.com （微信中打開頁面，勾選最下面四個選項清除緩存），但該工具目前只支持安卓手機，蘋果機就比較麻煩了。為了找到問題的本質，從根本上避免問題，最近瀏覽了一些文章，其中有一篇對瀏覽器緩存的分析及在Nginx中對應的處理策略總結的比較好，這里分享給大家。

• 原文標題：http常用緩存策略及vue-cli單頁面應用服務器端(nginx)如何設置緩存
• 原文地址：http://www.shanhuxueyuan.com/news/detail/125.html

以下為原文。

關于http或者是瀏覽器緩存策略，我認為可以分為這三種：

• 不使用緩存
• 強制使用緩存
• 協商使用緩存

不使用緩存

有時，我們希望瀏覽器永遠都不要使用緩存，全部到服務器拉取數據，此時即為不使用緩存，我們可以在服務端通過Cache-Control為 no-store實現。

服務器端針對上面文件設置了no-store，可以看到在請求的時候，無論怎么刷新，都是返回200，不會顯示304，也不會顯示“memory cache”或“disk cache”，說明真的都是從服務器重新拉取數據。

比如我們想設置html文件不緩存，可以在域名的解析配置中如下設置，當文件后綴為html或htm時add_header Cache-Control "no-store"

server {
listen 80;
server_name yourdomain.com;
location / {
    try_files $uri $uri/ /index.html;
    root /yourdir/;
    index index.html index.htm;

    if ($request_filename ~* .*\.(?:htm|html)$)
    {
        add_header Cache-Control "no-store";  //對html文件設置永遠不緩存
    }  
  }
}

這種方式缺點就是每次都要去服務端拉取文件，即使文件沒有更新，很明顯這樣增加了不必要的帶寬消耗。

如果文件沒有更新，我們就使用緩存，只有更新了才去拉取最新文件，這樣多好，這就是協商緩存。

協商緩存

協商緩存就是瀏覽器攜帶文件緩存標識（如Last-Modified或ETag），向服務器發送請求，由服務器根據文件緩存標識來決定是否使用緩存，如果文件沒有更新，則告訴瀏覽器使用本地緩存，如果文件更新了，則直接返回新文件內容。

可以看出，相比不使用緩存，協商緩存是會大大減少帶寬消耗的。

• 協商緩存生效，返回304 和 Not Modified

• 協商緩存無效，返回200和請求文件

我們在瀏覽器調試頁面，可以看到有304的，即是使用了協商緩存

服務器返回的header中會有Last-Modified和ETag標識，而瀏覽器請求header中會包含If-Modified-Since和If-None-Match

Last-Modified和If-Modified-Since

在 http 1.0 版本中，第一次請求資源時服務器通過 Last-Modified 來設置響應頭的緩存標識，并且把資源最后修改的時間作為值填入，然后將資源返回給瀏覽器。在第二次請求時，瀏覽器會首先帶上 If-Modified-Since 請求頭去訪問服務器，服務器會將 If-Modified-Since 中攜帶的時間與資源修改的時間匹配，如果時間不一致，服務器會返回新的資源，并且將 Last-Modified 值更新，作為響應頭返回給瀏覽器。如果時間一致，表示資源沒有更新，服務器返回 304 狀態碼，瀏覽器拿到響應狀態碼后從本地緩存數據庫中讀取緩存資源。

這種方式有2個弊端，第一個就是當服務器中的資源增加了一個字符，后來又把這個字符刪掉，本身資源文件并沒有發生變化，但修改時間發生了變化。當下次請求過來時，服務器也會把這個本來沒有變化的資源重新返回給瀏覽器；第二個就是修改時間的單位為秒，所以存在1s的間隙，即使更新了，也會認為沒有更新。

ETag和If-None-Match

在 http 1.1 版本中，服務器通過 Etag 來設置響應頭緩存標識。Etag 的值由服務端生成，可以認為是文件內容的hash值。在第一次請求時，服務器會將資源和 Etag 一并返回給瀏覽器，瀏覽器將兩者緩存到本地緩存數據庫。在第二次請求時，瀏覽器會將 Etag 信息放到 If-None-Match 請求頭去訪問服務器，服務器收到請求后，會將服務器中的文件標識與瀏覽器發來的標識進行對比，如果不相同，服務器返回更新的資源和新的 Etag ，如果相同，服務器返回 304 狀態碼，瀏覽器讀取緩存。

兩者對比

• 首先在精確度上，Etag要優于Last-Modified。Last-Modified的時間單位是秒，如果某個文件在1秒內改變了多次，那么他們的Last-Modified其實并沒有體現出來修改，但是Etag每次都會改變確保了精度；如果是負載均衡的服務器，各個服務器生成的Last-Modified也有可能不一致。
• 第二在性能上，Etag要遜于Last-Modified，畢竟Last-Modified只需要記錄時間，而Etag需要服務器通過算法來計算出一個hash值。
• 第三在優先級上，服務器校驗優先考慮Etag

協商緩存服務端配置

可以在服務端通過設置Cache-Control為 no-cache或者max-age=0來實現

強制緩存

有時我們希望文件強制使用緩存，比如通過vue-cli產生的js和css，文件名上帶有hash值，所以如果文件名沒有變的時候，我們希望文件永久緩存，這樣可以減少網絡請求。

強制緩存整體流程比較簡單，就是在第一次訪問服務器取到數據之后，在過期時間之內不會再去重復請求。實現這個流程的核心就是如何知道當前時間是否超過了過期時間。

強制緩存的過期時間通過第一次訪問服務器時返回的響應頭獲取。在 http 1.0 和 http 1.1 版本中通過不同的響應頭字段實現。

在 http 1.0 版本中，強制緩存通過 Expires 響應頭來實現。 expires 表示未來資源會過期的時間。也就是說，當發起請求的時間超過了 expires 設定的時間，即表示資源緩存時間到期，會發送請求到服務器重新獲取資源。而如果發起請求的時間在 expires 限定的時間之內，瀏覽器會直接讀取本地緩存數據庫中的信息（from memory or from disk），兩種方式根據瀏覽器的策略隨機獲取。

在 http 1.1 版本中，可以設置Cache-Control中的 max-age=xxx ，來表示緩存的資源將在 xxx 秒后過期。一般來說，為了兼容，兩個版本的強制緩存都會被實現。

為什么有了Expires，后來又增加了max-age呢，這是因為Expires是一個絕對時間，有可能客戶端的時間和服務器不一致，導致緩存不能按照預期進行，而max-age則是個相對時間，比如3600s，自瀏覽器請求后3600s之內，都使用本地緩存，和客戶端的時間沒關系。

vue-cli緩存策略

由于打包后的js、css和圖片，一般名稱都帶有hash值，名稱中的hash變了，自然會拉取新文件，所以我們可以將這類文件設置為強制緩存，只要文件名不變，就一直緩存，比如緩存100天或者一年。

而html文件則不能設為強制緩存，一般html名稱是沒法帶hash值的，所以html如果設置了強制緩存，則永遠也沒法更新，html不更新，其引用的js、css等名稱也不會更新，則整個服務都沒有更新，只能讓用戶清除緩存了。所以針對html文件，我們可以設置協商緩存或者直接不使用緩存，本身html文件都比較小，我是直接使用了不緩存，nginx配置如下。

server {
listen 80;
server_name yourdomain.com;
location / {
    try_files $uri $uri/ /index.html;
    root /yourdir/;
    index index.html index.htm;

    if ($request_filename ~* .*\.(js|css|woff|png|jpg|jpeg)$)
    {
        expires    100d;  //js、css、圖片緩存100天
        #add_header Cache-Control "max-age = 8640000"; //或者設置max-age
    }

    if ($request_filename ~* .*\.(?:htm|html)$)
    {
        add_header Cache-Control "no-store";  //html不緩存
    }
  }
}

歡迎微信搜索關注公眾號：半路雨歌，查看更多技術干貨文章

前，瀏覽器只能展示本地安裝的字體。如果字體未安裝，網頁顯示效果會大打折扣。

為了解決這個問題，CSS 引入 web 字體，允許瀏覽器從服務器下載字體，下載完成后再重新渲染字體。

字體文件格式

使用 web 字體前，需要了解常用的字體文件格式。

TTF 字體文件，即 TrueType 字體，是由蘋果和微軟在 20 世紀 80 年代末開發的字體標準。它是 macOS 和 Windows 操作系統使用最廣泛的字體格式。

OTF 字體文件，即 OpenType 字體，是一種可縮放的計算機字體格式。它建立在 TrueType 基礎上，是微軟的注冊商標。OpenType 字體目前在主要的計算機平臺上廣泛使用。

WOFF 字體文件，即 The Web Open Font Format 字體，是一種用于網頁的字體格式，2009 年開發，如今是 W3C（萬維網聯盟）的推薦標準。WOFF 本質是 OpenType 或 TrueType 字體，但是經過壓縮并附加額外的元數據。在帶寬受限的網絡中，WOFF 能更好的支持從服務器到客戶端的字體傳輸。

WOFF 2.0 字體文件，相比于 WOFF，提供了更高的壓縮效率。

SVG 字體，將 SVG 用作顯示文本時的字形。SVG 1.1 規范定義了一個字體規范，允許在 SVG 文檔中創建字體。

EOT 字體文件，即 Embedded OpenType Fonts 文件，是微軟設計的一種用于網頁的嵌入式字體，它是 OpenType 字體的緊湊形式。

不同字體格式的瀏覽器兼容性下圖所示：

使用自定義字體

使用 @font-face CSS 指令定義自定義字體。使用前需要把字體文件放在服務器目錄，然后定義新的字體名稱，并指向字體所在位置。

以京華老宋體為例，這是一款可以免費商用的中文字體。下載字體文件后，放到和 index.html 同級的目錄，重命名為 jh-song.ttf。

在 @font-face 指令內，使用 font-family 定義字體名稱，src 屬性定義字體文件路徑。

然后，像使用普通字體一樣，使用自定義字體樣式：

完