如何优化在社交网站上显示 Facebook 和 Twitter 个人资料图片？

Posted 2023-02-24

【中文标题】如何优化在社交网站上显示 Facebook 和 Twitter 个人资料图片？

【英文标题】：How to optimize displaying Facebook & Twitter profile images on a social site?

【发布时间】：2011-08-05 13:35:00

【问题描述】：

我正在开发一个社交网站，该网站显示来自 Facebook 和 Twitter 的最新 cmets/likes/tweets/etc 并在时间轴中显示它们。这很像 Facebook 新闻源，除了它还混有 Twitter、Yelp 和其他可能的来源，所以我们不能在这里使用 Facebook 的插件。

我们可以缓存 cmets/etc，但配置文件图像在这里是一个真正的挑战，因为它们不断变化。非常感谢您对以下两点的意见：

1) 如果我们直接在 cmets 框中使用图像 url（例如<img src="https://graph.facebook.com/user/picture />），那么这将意味着可能有 100 个图像 url 导致 100 个 HTTP 连接和一个非常慢的加载页面。有人有什么建议可以避免这种情况吗？

2) 如果我们要缓存这些图像并生成 sprite 或用 JSON 对其进行 base64 编码，任何关于如何最好地将它们存储在 MongoDB 或 Amazon S3 中的指针都会很棒。我对两者都是新手，但有些事情告诉我 1000 多个小文件会导致碎片。此时，我正在考虑将它们放在 Mongo 表中，因为 50x50 图像不应该很大（小于 5k）。有人看到它有什么问题吗？

【参考方案1】：

利用选项 1) 的活跃性和简洁性，我最近看到许多网站“推迟”加载图像。例如，如果您访问this site，您将看到图像在用户滚动内容进入视图时“淡入”。在这种情况下，网站开发人员使用Lazy Load jQuery plugin 延迟加载图像。

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>

...

$("img.profileImage").lazyload();

这里的想法是，浏览器只在必要时（即图像实际在屏幕上时）发出图像请求，而不是在页面加载时立即发出请求。有许多 javascript 框架插件可以实现这一点，我并不是在建议一个优于另一个（事实上，我链接到的那个声称被破坏），我只是在向你指出沿着这些思路的方向。

【讨论】：

谢谢 ckittle。这绝对比尝试一次加载所有图像要好。

@Karan 不客气。如果它符合您的要求，请不要忘记接受此答案。