Как мы оптимизировали социальную кнопку

[lotas]

Как всегда на самом интересном месте статья заканчивается…
Расскажите уже про код, пожалуйста. Что в итоге и как так получилось?

А то статья больше похоже на «Все ставьте наши кнопки-они самые быстрые»

[DarkDefender]

Так код то весь публично доступный, здесь есть асинхронное подключение скрипта на сайте: link
А тут код позволяющий нам обновлять кнопку независимо от того, что сделали разработчики подключившие ее к себе на страницу link

[lotas]

Да, вы правы. Можно было топик как ссылку оформить и всё :)

[DarkDefender]

Главное было понять какие есть проблемы у кнопки, а не то как эти проблемы решить. Про клиентскую оптимизацию даже на хабре очень много информации.

[lotas]

А можно тогда в двух словах, как удалось победить мультиверсионность кнопок и их ручное кэширование на серверах разработчиками?
Т.е. всем придется заново сгенерить себе кнопку и подключить новый скрипт?

[DarkDefender]

Мы отдаем только код для встраивания iframe, внутри которого отрисовывается кнопка сгенеренная нашими серверами. Т.е. если нам надо поменять ресурсы, то в этот iframe просто будет прилетать другой хтмл с другими линками на ресурсы.

[m0nstermind]

Не весь код все таки доступен ;-) Серверное хранилище классов полностью свое, рассказ о нем тут: www.slideshare.net/m0nstermind/cassandra-klassic-cassandra

[ilnarb]

Расскажите, как оптимизировали: как стал асинхронным, как принудительно обновляете, и еще много «как»?

[DarkDefender]

Оптимизировали — убрали все лишнее, всякие JQuery и т.д. Оставили только код необходимый самой кнопке, а не весь апи, как у некоторых соц. сетей.
Способов подключить скрипт асинхронно много, самый трендовый создать в хеде через document.createElement('script'); новый скрипт
Принудительное обновление: Даешь наружу только код, который формирует iframe, все остальное делает уже ваш собственный код вставляемый в этот iframe.

[Alexufo]

Вот это очень кстати, всегда бесили тяжеловесные кнопки с огромными кусками html кода iframe и куча js.

[NekR]

CSS могли бы и инлайном сделать в html документе айфрейма. Грузилось бы быстрее :)

[DarkDefender]

Да, должно стать еще лучше, и это есть в планах на ближайшее время :-)

[antonsnowy]

У меня пару вопросов:
Допустим мне на одну страницу нужно поставить несколько кнопок Класс.

1. Вставляя код из вашего виджета я получу несколько <div id="ok_shareWidget"></div> и столько же загрузки скриптов (даже если из кэша).
Вы считаете правильным использование нескольких одинаковых id? Как ваши скрипты рендерят кнопку в таком случае (или после рендера вы просто удаляете ID, я не читал код)?

2. Параметры виджета зашиты в скрипте, а не в тэге виджета <div id="ok_shareWidget"></div>. Допустим скрипты кнопок загрузились не в той последовательности, как их вызывали. Как вы обеспечиваете попадание нужных параметров в нужный тэг виджета? Вы гарантируете, что кнопки сгенерируются с нужными ссылками?

3. Зачем вы загружаете один и тот же скрипт http://connect.ok.ru/connect.js несколько раз в таком случае?

Советую прочитать статью The art and craft of the async snippet от разработчиков Facebook.

[DarkDefender]

Обратите внимание на страницу «Оптимизация» в том же разделе «Социальные виджеты»:

1) Бесспорно для корректной работы нескольких кнопок нужны разные ID для контайнеров виджетов. Код который генерит конструктор предназначен для начинающих веб мастеров как пример внедрения кнопки.

2) Именно тег контайнера служит указанием куда поместить конкретный виджет.

3) Применив знания из раздела «Оптимизация», у вас будет подгружен только 1 скрипт.

Статью Стояна я читал, но вот результат их оптимизаций все еще далек от того, что удалось добиться нам.

[antonsnowy]

У Facebook за отсуствие повторных загрузок скрипта и вызовов рендера отвечает всего одна строка кода if (d.getElementById(id)) return;, где id=«facebook-jssdk» первого ассинхронно подгруженного скрипта. В вашем же случае нет никаких оптимизаций, код скрипта не только подгружается N раз, но и столько же раз выполняется (если виджеты вставляются копипэйстом из конструктора полностью).

Тег контейнера у вас одинаков. Вы должны перенести параметры конфигурации в сам тег, в те же data-атрибуты. Тогда будет однозначная связь что где рендерить.

Говоря о результате, что он еще далек, задумайтесь: может он далеко впереди?

P.S. Смотрел код виджета. Давно я не видел определения переменных в цикле for(var a=0;a<d.length;a++){var c=d[a].split(":");… и return «error»; в функции, которая рендерит виджет. Может просто return true/false и throw new Error?

[DarkDefender]

Вы зацепились за идею доказать мне что кнопка ФБ лучше, но это не так. Если пользователь правильно все прочитал, а не просто взял код и бездумно вставил его себе на сайт 10 раз, он получит кнопку которая в 5 раз быстрее чем кнопка ФБ.