FB + кнопки обмена Twitter + кнопка FB Like === огромные проблемы с производительностью - PullRequest
4 голосов
/ 07 апреля 2011

Моя новая работа полна чудесных и ужасных сюрпризов. одна из самых интересных частей этой работы - желание улучшить, ускорить, сделать все масштабируемым. И сегодня первая настоящая проблема. Вот в чем дело: мы получаем до 20 элементов списка, каждый из которых отображает свой собственный общий ресурс Facebook, общий ресурс Twitter и кнопку «Нравится» в Facebook. Как вы можете себе представить, открытие 60 фреймов - это просто боль для пользователя. Мой вопрос: кто-нибудь уже сталкивался с такими проблемами, и что бы вы порекомендовали для решения этих проблем с производительностью?

Пока я думаю о реализации AddThis, я надеюсь, что есть и другие решения, которые я мог бы рассмотреть.

1 Ответ

2 голосов
/ 15 июля 2011

Лучший способ повысить производительность - это не копировать и не вставлять код из плагинов Facebook.

Код Facebook «Мне нравится» выглядит следующим образом:

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#appId=127702313984818&amp;xfbml=1"></script>
<fb:like href="example.com" send="true" width="450" show_faces="true" font=""></fb:like>

Проблема в том, что еслиимеет 20 одинаковых кнопок, затем создается 20 Div с id = "fb-root" и вызывается 20 раз скрипт для all.js.Лучший способ - переместить

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#appId=127702313984818&amp;xfbml=1"></script>

в верхний колонтитул страницы, и всякий раз, когда вам нужна кнопка «Мне нравится», используйте только

<fb:like href="example.com" send="true" width="450" show_faces="true" font=""></fb:like>

То же самое касается комментариев на Facebook и других плагинов.

Кроме того, для некоторых плагинов Facebook предоставляет возможность использовать код xfmbl или iframe.Всегда выбирайте код iframe, потому что js Facebook должен анализировать весь код xfbml и преобразовывать его в iframe.Это вызывает много DOM-вставок и замедляет страницу.

Надеюсь, это поможет!

...