爲什麼網站用圖像替換unicode字符？

Question

最近我在firefox中安裝了NoScript插件來控制javascript的執行。我注意到一些網站使用一些奇特的unicode charaters作爲圖像的佔位符，一旦我允許使用javascript，圖像將替換爲圖像。一個示例網站是github.com，請參閱在啓用javascript之前拍攝的屏幕截圖。

這個優點是什麼，而不是直接將圖像放在html或css中？

Answer 1

的站點使用的圖標的字體（或多於一個）。

圖標字體是包含圖像的常規字體文件。這是一種減少HTTP請求並啓用一些其他功能的技術。

現在，怎麼或爲什麼這被NoScript插件擊敗，我不知道。 （編輯 —它顯然是一個可配置的NoScript的選項，這是默認選擇。所有@font-face規則被封鎖，表面上是出於安全考慮。）

在您的GitHub的樣品，快速去到開發工具表明，有一個字體稱爲「octicons」。

Answer 2

簡單而簡單 - 這些奇怪的符號是應該放置圖像而不是字符符號的標記（顯然，迄今爲止）。如果啓用JavaScript，則在加載過程中會觸發特定的JS函數，並且所有這些標記都將被圖像替換。

現在，棘手的部分 - 如果瀏覽器無法加載/執行JavaScript，則JavaScript已被禁用（情況1），或者存在嚴重的網絡延遲（情況2），並且瀏覽請求已超時。

在第二種情況下，我們不希望給用戶增加額外的圖像，因爲這些圖像很可能會永久加載。因此，我們逐步執行此過程：

1. 我們使用圖像標記而不是真實圖像加載基本網頁。
2. JavaScript鉤子被觸發後基本網頁已被完全加載。此時，所有非關鍵圖像都是通過JavaScript調用在幕後請求的。
3. 所有這些圖像都是異步加載的，並且由於基本網頁已被加載，即使一個或多個圖像加載失敗，用戶也不會遇到任何延遲。

嗯，就是這樣！