为表情符号添加延迟加载

Personally I think it is like a good manner to always add width and height attributes to img elements on point where the img-element is generated. That is the place where I might know for sure which exact image-file I’m putting in. CSS is far away from the actual image-file.

On top the browsers use this extra info about the image size to calculate aspect-ratio before loading the image file - and before CSS parsing.

For this case the emojis are used in many different places - and sometimes defining sizes via CSS will be skipped accidentally.
E.g. see crawler view of this very same topic on PageSpeed

我个人认为,在生成 img 元素时,始终为其添加 widthheight 属性是一种良好的习惯。因为那是唯一能确切知道我将放入哪个图像文件的地方。CSS 距离实际的图像文件很远。

此外,浏览器在加载图像文件和解析 CSS 之前,会利用关于图像大小的这些额外信息来计算 aspect-ratio

在这种情况下,表情符号在许多不同的地方使用——有时会意外地跳过通过 CSS 定义大小。
例如,请参阅此关于 PageSpeed 的相同主题爬虫视图

2 个赞