为什么网站用图像替换unicode字符？

Question

最近我在firefox中安装了NoScript插件来控制javascript的执行。我注意到有些网站使用一些花哨的unicode字符作为图像的占位符，一旦我允许javascript就会替换为图像。一个示例站点是github.com，请参阅我启用javascript之前拍摄的屏幕截图。

这样做的优点是什么，而不是简单地将图像直接放在html或css中？

Answer 1

网站使用图标字体（或多个图标）。

图标字体是包含图像的常规字体文件。这是一种减少HTTP请求并启用其他功能的技术。

现在，如何或为何被NoScript插件击败，我不知道。 （编辑 - 它显然是一个可配置的NoScript选项，默认选中。所有@font-face规则都被屏蔽，表面上是出于安全原因。）

在您的GitHub示例中，快速浏览开发人员工具会显示出一个名为＆＃34; octicons＆＃34;的字体。

Answer 2

简短而简单 - 这些奇怪的符号是放置图像而不是字符符号的标记（显然，到目前为止）。如果启用了JavaScript，则在加载过程中将触发特定的JS函数，并且所有此类标记将替换为图像。

现在是棘手的部分 - 如果浏览器无法加载/执行JavaScript，那么JavaScript已被禁用（案例1），或者存在严重的网络延迟（案例2）并且浏览请求已超时。

在第二种情况下，我们不希望给用户增加额外的图像负担，因为这些图像很可能会永远加载。因此，我们逐步完成这个过程：

1. 我们使用图像标记而不是真实图像加载基本网页。
2. 在基本网页完全加载后，触发JavaScript挂钩。此时，所有非关键图像都是通过JavaScript调用在幕后请求的。
3. 所有此类图像都是异步加载的，因为基本网页已经加载，所以即使一个或多个图像无法加载，用户也不会遇到任何延迟。

嗯，就是这样！