Как стать автором
Обновить

Комментарии 64

Для гугло плюса вынес в ready, без этого он продолжал тормозить общую загрузку

$(document).ready(function(){
(function() {
window.___gcfg = {lang: 'ru'};
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
});
А есть ли функция в jquery, которая асинхроннно грузит скрипт? Или хотя бы делает getElementsByTagName / insertBefore?
вроде именно так работает функция $.getScript() в кроссдоменном варианте
head.insertBefore( script, head.firstChild );

Barman, я правильно понял, что асинхронный код по каким то причинам не будет блокироваться?
Он будет блокироваться, но не будет мешать загрузки сайта.
Я что-то не совсем понял, почему отказ в загрузке одного из скриптов должен приводить к отказу в загрузке сайта? Вы сами пробовали ставить блокировку средствами того же Adblock plus, например?
Зависит от способа блокировки. Если будет тупо резаться и запрос к vkontakte.ru/js/api/share.js будет висеть, то пока не отвалится по таймауту, страница не покажется.
Понял, что вы имеете в виду. Да, вы правы, это зависит от способа блокировки. Но, даже в случае отсутствия режектов, это не отказ загрузки сайта, а сильное замедление этой самой загрузки.
А можно как-то настроить этот таймаут? На их стороне или у себя?
Таймаут браузер устанавливает, но я ни для одного не знаю, чтобы легко это изменить.
А вообще это неправильный способ блокировки. Раз уж блокируют, пусть на подобные запросы 403 сразу отдаётся.
Такое возникает у горе-админов, которые банят все пакеты, в которых встречаются строчки с упоминанием домена. Вот куча примеров (1, 2 в общем, их таких много)
Не могу себе представить полезный пример урла вида *vkontakte.ru*, как в первом примере.
Поясните мне пожалуйста о чем говорится в этой статье?
У меня в голове все спуталось.
Кнопки социальных сетей вставлены в большое количество ресурсов. Когда социальные сети с работы прикрыты, браузер тупит при открытии страницы, так как не хочет двигаться дальше пока не прочитает код кнопки.
Кстати в Беларуси во время «молчаливых акций», пару раз прикрывали вконтакте. У нас была проблема недоступности некоторых ресурсов по всей стране.
Автор как то не так выразился.
По его словам, если работодатель закрыл доступ к сайте vk.com,vkontakte.ru и т.д. то пользователь если заходит с рабочего сайта на сайт из списка «Примеры c посещаемостью больше 50к в день:» то такой сайт не будет грузиться, т.к. на этих сайтах установлены кнопки поделится и т.д. Смысл такой, автор считает что если не загружается скрипт с заблокированного домена, то сайт не работает.(Это как я понял прочитав статью)
Но это имхо бред :) ну не подгружается код с сервера контакта, и что с этого, все остальные то скрипты работают на ура и без этого скрипта, он как никак отвечает всего то за кнопку поделиться или мне нравится.

Если я не прав, поправьте, но 3 раза перечитав пост я его так понял :(
Смотря как настроена прокся. Может просто останавливать загрузку при упоминании ресурса из блэклиста.
Даже параноидально настроенная прокся (покосился на свою) такого делать не будет.
Я не про параноидальную, а про криво настроенную :)
именно так — если контакт закрыт запретом пакетов на vkontakte.ru или yandex.ru — страница не начнет рендерица, пока запрос к контакту не отвалится по тайм ауту
Потихоньку складывается ситуация. Посмотрел статистику переходов из социалок, всего до 10 человек при 10к уникальных. Скрыл их, посмотрю на динамику по статистике. Оставил только share от яндекса и +1 гугла.
Тут главная опасность вот в чем.
Если криво режется какой-то источник (вконтакте, например) то сайт загрузиться — загрузится.
Но, броузер будет ждать, пока загрузится подключаемый скрипт и все это время не произойдет событие onload.
А в таком случае скрипты, которые ждут этого события (для jquery — $(document).ready(), равносильно $(function(){}) ) просто не отработают (точнее отработают, когда закроется соединение по таймауту).

У меня когда google analytics упал, не грузилось вообще половина интернета, загрузка сайтов надолго зависала пытаясь получить google-analytics.com/ga.js. Сейчас эту ситуацию исправили, и скрипт загружается асинхронно.
У меня такое было на работе. Сайт не рендерился 2 минуты, пока не сработает таймаут у фаерфокса. Лечил кастом noscript на социальные кнопки.
Сайт 1 (в контакте), сайт 2 (скажем хабрхабр). Предположим что хабрхабр использует кросс-рекламу с 'в контакте' (это все именно про кросс-рекламу).

Если для этой рекламы, хабрхабр использует ссылку на ресурс из сайта 'в контакте', и если этот ресурс загружается как синхронная часть страницы (то есть просто ссылка на этот ресурс, например ссылка на js file из кода страницы хабрхабр), то в зависимости от настройки firewall и того, как браузер работает, страница может не вырисовываться, а ожидать возврата запроса к этому ресурсу на 'в контакте'.

Если же этот ресурс загружать асинхронно (ну например в отдельной frame или используя XMLHttpRequest), то тогда хотя этот ресурс и будет тормозиться и не вернется из-за блокировки firewall, но остальная страница загрузиться и браузер ее отобразит без задержки.
Это я понял, просто подача текста была таковой что у меня все смешалось. Мне кажется что если в начале статьи сказать что проблемы с не асинхронной загрузкой то вопросов было меньше, а так получилось что упоминание про асинхронность только в последнем предложении.
ниасилил =/
А что мешает в iframe загонять социалки? Пускай себе фреймы не грузятся, где заблокировано, не в ущерб остальному контенту.
А пояснить за что минуса?
Не все сразу гениями рождаются :)
Представьте себе на странице список постов. У каждого есть кнопка like. Под каждую кнопку делать отдельный iframe?
В таком аспекте согласен.
Не бейте тряпками, я только учусь :)
Удивлю вас, но действительно в результате работы скриптов лайков вставляются айфреймы.
скрипты комментариев, кнопочек и прочего должны надохиться не во фрейме. Правильное решение — асинхронный вызов, как и указано в статье.
Правильное решение — загрузка скриптов всех этих социальных сетей только по требованию.
Т.е. открываешь сайт, там есть кнопочки facebook, twitter и т.п., но никакого кода с этих сайтов не загружено, загружены только картинки, причём локально. Загрузка, собственно, кода должна происходить по нажатию на соответствующую кнопку — так пользователь будет ограждён от трекинга пока он этого не захочет (мы же уважаем частную сферу пользователя), и от тормозов при загрузке.
От тормозов при загрузке можно избавится, если загружать код кнопок после рендеринга страницы.

А если заботится о приватности, то кнопки можно совсем не ставить.
>От тормозов при загрузке можно избавится, если загружать код кнопок после рендеринга страницы.
Об этом, собственно, написано в статье.

>А если заботится о приватности, то кнопки можно совсем не ставить.
Если кнопки совсем не ставить, то доставим неудобства пользователям, которым эти кнопки нужны.
В статье написано о том, как грузить скрипт параллельно со страницей. А я говорю о том, что начинать загрузку по событию windows.load.

IMHO если пользователь видит кнопку с большим числом на счетчике, то подсознательно считает статью более интересной.
1. Понял, согласен. Грузить после всего рендеринга, включая программный.

2. Не учёл, так как не пользовался этими кнопками ни разу. Как вариант, можно инициализировать счётчик на сервере. Заодно и большое число пририсовать, если опрашивать соц.сети лень :)
Ну, при загрузке по нажатию, пользователю нужно нажимать 2 раза. Если пользователи очень беспокоятся о приватности, зачем им автологин в соц сетях?
Как отличить пользователей, которые беспокоятся о приватности, от пользователей, которые хотят использовать фэйсбук?
Я как-то упустил это из виду много раз. И теперь мне стыдно, довольно много проектов работают с такой миной.
По просьбе руководства приходится закрывать.
Открываем только тем, кому согласует их руководство и безопасники.
С одной стороны хорошо, люди хоть работать будут… А с другой — свобода действий.
закрывать можно по разному — хоть на локалхост их заводить или google.com
Подождите, в статье какая то ошибка!

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

Могу дать скрин, если кому интересно…
У вас просто админ пряморукий и режет правильно. То есть отвечает браузерам, что сюда нельзя. У многих же просто «черная дыра».
Надеюсь userapi.com никто не блочит?
Надейтесь
закрывают, под одну гребенку с vk vkontakte odnoklassniki и так далее
Зафиксил, спасибо.
Еще пара упоминаний фконтакте и я завтра с работы эту статью не перечитаю…
Настроить privoxy на вырезание всех скриптов размещённых на левых доменах и никаких проблем. Вместе со всякими лайками, плюсами и прочей хренью из полезного отваливается только recaptcha.

Да, я в курсе что статья не об этом.
Хрен прорветесь!
Вконтактики, они, видите-ли, почитывают на работе.
Не тешьте себя иллюзиями — конечно прорвемся )
такая проблема есть, сайты со вставками контакта вообще не грузятся, ни через минуту, ни через час. приходится прописывать вконтакт в хосты на локалхост
Интересно, когда г+ блочить начнут.
Сел сделать асинхронную загрузку в результате получилась готовая библиотечка — github.com/H1D/vk-async Пока только вконтакт, если интерес не пропадёт, то добавлю остальные сети и уйду от зависимости jQuery
Потестил, прикольно. jQuery нафиг )
спасибо, найдётся время уйду от него
В статье не хватает конкретных примеров кода для всех основных социалочек. Очень надеюсь на обновление поста.
с примерами их корректной «доработки»
НЛО прилетело и опубликовало эту надпись здесь
Я выше давал ссылку на свое решение
tigor.org.ua/external-java-scripts-on-site/#social

Или вам будет удобней 74 строки кода без разметки и подсветки использовать? Пожалуйста

(function() {
function async_load(){
// Twitter widget code
var twitterWidgets = document.createElement('script');
twitterWidgets.type = 'text/javascript';
twitterWidgets.async = true;
twitterWidgets.src = 'http://platform.twitter.com/widgets.js';
// Facebook Like code
var facebook = document.createElement('script');
facebook.type = 'text/javascript';
facebook.async = true;
facebook.src = 'http://connect.facebook.net/en_US/all.js';
// Google +1 code
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
// Vkontakte Like code
var vkontakte = document.createElement('script');
vkontakte.type = 'text/javascript';
vkontakte.async = true;
vkontakte.src = 'http://userapi.com/js/api/openapi.js';
// Creating scripts on page
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(twitterWidgets, x);
x.parentNode.insertBefore(po, x);
x.parentNode.insertBefore(facebook, x);
x.parentNode.insertBefore(vkontakte, x);
twitterWidgets.onload = _ga.trackTwitter;
}
if (window.attachEvent)
window.attachEvent('onload', async_load);
else
window.addEventListener('load', async_load, false);
})();
window.fbAsyncInit = function() {
FB.init({appId: '254160764598987', status: true, cookie: true,
xfbml: true});
_ga.trackFacebook();
};
window.vkAsyncInit = function(){
VK.init({apiId: 1959482, onlyWidgets: true});
VK.Widgets.Like(«vk_like», {type: «vertical»});
_ga.trackVkontakte();
};
_ga.trackVkontakte = function(opt_pageUrl, opt_trackerName, opt_targetUrl) {
var trackerName = _ga.buildTrackerName_(opt_trackerName);
try {
if (VK && VK.Observer && VK.Observer.subscribe) {
VK.Observer.subscribe('widgets.like.liked', function() {
_gaq.push([trackerName + '_trackSocial', 'vkontakte', 'like',
opt_targetUrl, opt_pageUrl]);
});
VK.Observer.subscribe('widgets.like.unliked', function() {
_gaq.push([trackerName + '_trackSocial', 'vkontakte', 'unlike',
opt_targetUrl, opt_pageUrl]);
});
}
} catch (e) {}
};

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