Документ описывает проблемы с производительностью внешних виджетов и скриптов, приводящие к зависанию страницы при парсинге. Предложенные решения включают добавление виджетов через DOM, использование onload/onreadystatechange и загрузку в скрытые iframe для улучшения работы страницы. Также перечислены преимущества подхода, такие как предотвращение зависания страницы и централизованное управление виджетами.

1. External widgets
performance

2. Проблема - внешние
виджеты и скрипты
Страница виснет на парсинге.

3. Решение
• Добавление через DOM
• Связывание через
onload/onreadystatechange
• document.write()
o Делаем свой document.write()
o Выносим виджет в отдельный
невидимый элемент
o Загружаем в скрытый iframe,
по onload копируем на страницу

4. Google Analytics Async
Snippet
var ga = document.createElement(‘script’);
ga.type = ‘text/javascript’;
ga.async = true;
ga.src = (‘https:’ == document.location.protocol ?
‘https://ssl’ : ‘http://www’) + ‘.google-
analytics.com/ga.js’;var s =
document.getElementsByTagName(‘script’)[0];
s.parentNode.insertBefore(ga, s);

5. Рабочая модификация
<script>(function(d, s) {
var js, fjs = d.getElementsByTagName(s)[0], load =
function(url, id) {
if (d.getElementById(id)) {return;}
js = d.createElement(s);
js.src = url; js.id = id;
fjs.parentNode.insertBefore(js, fjs);
};
load('widget1.js', 'fbjssdk');
load('widget2.js', 'gplus1js');
load('widget3.js', 'tweetjs');
}(document, 'script'));</script>

6. Преимущества подхода
• Страница не виснет из-за сторонних виджетов
• Управление всеми сторонними
виджетами из одного места
• Гарантия подключения узла
всего один раз
(благодаря присвоению идентификатора)