Как оптимизировать показ изображений профиля в Facebook и Twitter на социальном сайте?

Question

Я работаю над социальным сайтом, который показывает последние комментарии / лайки / твиты / и т. Д. Из Facebook & Twitter и отображает их на временной шкале.Это очень похоже на новостную ленту Facebook, за исключением того, что там также есть Twitter, Yelp и другие возможные источники, поэтому мы не можем использовать плагин Facebook здесь.

Мы можем кэшировать комментарии и т. Д., Но изображения профилянастоящий вызов здесь, поскольку они постоянно меняются.Буду очень признателен за ваш вклад по следующим двум пунктам:

1) Если мы будем использовать URL-адрес изображения (например, <img src="https://graph.facebook.com/{user}/picture />) непосредственно в поле для комментариев, то это потенциально будет означать 100 с URL-адресов изображений, что приведет к 100 с.HTTP-соединений и очень медленная загрузка страницы.У кого-нибудь есть какие-либо предложения, чтобы этого избежать?

2) Если бы мы кэшировали эти изображения и генерировали их спрайтом или base64-кодировкой в ​​JSON, любые указатели на то, как их лучше хранить в MongoDB или Amazon S3,будь офигенным.Я новичок в обоих, но что-то подсказывает мне, что тысячи маленьких файлов вызовут фрагментацию.На данный момент, я думаю поместить их в таблицу Монго, так как изображение 50х50 не должно быть очень большим (менее 5 Кб).Кто-нибудь видит какие-либо проблемы с этим?

Answer 1

Используя живость и гибкость варианта 1), я видел много сайтов, которые в последнее время "откладывают" загрузку изображений.Например, если вы посетите этот сайт , вы увидите, что изображения «исчезают», когда пользователь прокручивает содержимое в поле зрения.В этом случае разработчик сайта загружает изображения с помощью плагина Lazy Load jQuery .

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

...

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

Идея заключается в том, что браузер отправляет запросы на изображения только тогда, когда это необходимо.сделать это (т.е. когда изображение на самом деле на экране), а не сразу при загрузке страницы.Есть много плагинов для фреймворка javascript, чтобы выполнить это, я не предлагаю один над другим (на самом деле, тот, который я связал с намерениями быть сломанным), я просто указываю вам в направлении чего-то подобного.