Оптимальный варинт загрузки скрипта Вконтакте

@tlito · Регистрация: 29.09.2014

Студворк — интернет-сервис помощи студентам

Здравствуйте, уважаемые разработчики!
Гугл Пейджспид не перестает давать новые невыполнимые задачи оптимизации. И теперь он рекомендует: сократить длину js, требующего анализа до загрузки страницы - и указывает на vk.com/js/api/openapi.js?115
то есть скрипт комментариев Вконтакте на моем сайте, который грузится в области <head>.
Я не спец в JS и пробовал несколько способов отложить загрузку, но видимо это все надо делать не только для одной этой строки, и я точно не знаю как, а найти в гугл не нашел.
Подскажите, можно ли отложить как-то загрузку скрипта комментариев в ВК и как это делается пошагово для всех элементов?
Спасибо!

@Qwertiy · 30.09.2014, 17:18

Поставить его в конец body не подходит?
И да, а при чём тут регулярные выражения?

@Totoro · 05.10.2014, 21:24

Делайте подгрузку после загрузки DOM через yepnope, requirejs and etc....

@tlito · 06.10.2014, 15:00 **[ТС]**

подскажите как это должно быть написано?

Скрипт Вк выглядит весь так (apiid изменен):

HTML5
1
2
3
4
5
6
<script type="text/javascript" src="//vk.com/js/api/openapi.js?115"></script>
<script type="text/javascript"> VK.init({apiId: 44639, onlyWidgets: true}); </script>
<div id="vk_comments"></div>
<script type="text/javascript">
VK.Widgets.Comments("vk_comments", {limit: 15, width: "600", attach: "*"});
</script>

я только знаю что можно добавить функцию, которая ждет события загрузки страницы - после чего она создаёт html код в нужном div id. но как это точно делать я не знаю. слово dom мне непонятно.

я пробовал вставлять aysnc но это дало непоявление формы комментариев:

HTML5
1
<script type="text/javascript" src="//vk.com/js/api/openapi.js?115" async></script>

еще на тему Дом я нашел http://habrahabr.ru/post/182310/

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
DOM спешит на помощь!
 
На самом деле, ответ находится в спецификации HTML5, хоть он и скрыт в низу раздела о загрузке скриптов.
The async IDL attribute controls whether the element will execute asynchronously or not. If the element's «force-async» flag is set, then, on getting, the async IDL attribute must return true, and on setting, the «force-async» flag must first be unset…
 
Давайте переведем это на «земной язык»:
[
  '//other-domain.com/1.js',
  '2.js'
].forEach(function(src) {
  var script = document.createElement('script');
  script.src = src;
  document.head.appendChild(script);
});
 
Скрипты, которые созданы и добавлены динамически, асинхронные по-умолчанию, они не блокируют отрисовку и выполняются сразу после загрузки, что означает, что они могут появиться в неверном порядке. Однако мы можем явно пометить их неасинхронными:
[
  '//other-domain.com/1.js',
  '2.js'
].forEach(function(src) {
  var script = document.createElement('script');
  script.src = src;
  script.async = false;
  document.head.appendChild(script);
});

то есть это относится только к подключаемым скриптам? вк помоему не грузится если подключаемый скрипт грузится после внедренного скрипта вызова комментариев.

Добавлено через 22 минуты
Я вообще не силен в JS и не понимаю этот язык, хотя изучал C, Pascal, и знаю PHP. js настолько разнообразен, что его трудно охватить, не владея учебником и не имея задач.

я нашел что с помощью jquery метода можно отложить запуск функции http://winchanger.narod.ru/jquery/ready.htm

JavaScript
1
$(document).ready(function(){ VK.init({apiId: 44639, onlyWidgets: true});});

Также существует сокращенная запись этого кода:

JavaScript
1
$(function(){ ... });

то есть внутрь фигурных скобок нужно переместить весь код. А как правильно тогда вызвать загрузку внешнего скрипта? он по-моему работает только при обращении к серверу вк. в код его вставлять нельзя.

то есть, учитывая выхваченные знания из двух приведенных статей это будет так (apiid изменен):

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="vk_comments"></div>
<script type="text/javascript">
[
  '//vk.com/js/api/openapi.js?115',
].forEach(function(src) {
  var script = document.createElement('script');
  script.src = src;
  script.async = false;
  document.head.appendChild(script);
});
 
$(function(){ VK.init({apiId: 44639, onlyWidgets: true});  
VK.Widgets.Comments("vk_comments", {limit: 15, width: "600", attach: "*"}); }); 
</script>

я попробовал это вставить. ЭТО НЕ РАБОТАЕТ! комментарии в ВК не появляются. и я вообще не знаю почему не работает. так как ни одну из строчек не тестировал

Добавлено через 21 минуту
ЭТО НЕ РАБОТАЕТ, Так как у меня jquery подключается в самом низу! комментарии в ВК не появляются.

все-таки я вымучил такой код и он работает, не требует jquery (apiid изменен):

JavaScript
1
2
3
4
5
6
<div id="vk_comments"></div>
<script type="text/javascript" src="//vk.com/js/api/openapi.js?115"></script>
<script type="text/javascript">
window.onload = function() {VK.init({apiId: 44639, onlyWidgets: true});  
VK.Widgets.Comments("vk_comments", {limit: 15, width: "600", attach: "*"}); }
</script>

такой код ждёт загрузки страницы, то есть события window.onload , и потом запускает отображение области комментариев вк. Мне кажется страницы стали намного быстрее грузиться!! И это уже хорошо.

А как можно вставить подгрузку внешнено скрипта в window.onload ? Подскажите?

Добавлено через 13 минут
добавил async в вызов внешнего скрипта. на удивление работает! окончательный на сегодня вариант, подгружает скрипт после загрузки старницы, отображает блок вк комментариев после загрузки страницы, не требует jquery (apiid изменен):

JavaScript
1
2
3
4
5
6
<div id="vk_comments"></div>
<script type="text/javascript" src="//vk.com/js/api/openapi.js?115" async></script>
<script type="text/javascript">
window.onload = function() {VK.init({apiId: 44639, onlyWidgets: true});  
VK.Widgets.Comments("vk_comments", {limit: 15, width: "600", attach: "*"}); }
</script>

как реально проверить насколько это эффективно не знаю, но из субъективных оценок - открываются теперь страницы мгновенно! сайт имеет текстовую направленность, мало медиа, больше мелких текстов, поэтому очень важен быстрый доступ к записям. и теперь мне кажется это у нас есть. Спасибо! сайт работает на друпал, использует модуль Boost, CDN для ускорения

@Totoro · 07.10.2014, 08:15

http://ruseller.com/lessons.php?rub=32&id=1190

так же можно сделать запуск кода после загрузки определенного элемента через метод .load().

JavaScript
1
2
3
4
5
6
7
(function($, window, document) {
    $(function() {
        $('body').on( 'load', '#element', function() {
            // load vk script
        })
    });
})(window.jQuery, window, document);

Новые блоги и статьи Все статьи Все блоги /
Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .	Вывод данных в справочнике через динамический список Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .	Функция заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .
Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .	Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем	10 пpимет, которые всегда сбываются Maks 31.03.2026 1. Чтобы, наконец, пришла маршрутка, надо закурить. Если сигарета последняя, маршрутка придет еще до второй затяжки даже вопреки расписанию. 2. Нaдоели зима и снег? Не надо переезжать. Достаточно. . .	Перемещение выделенных строк ТЧ из одного документа в другой Maks 31.03.2026 Реализация из решения ниже выполнена на примере нетипового документа "ВыдачаОборудованияНаСпецтехнику" с единственной табличной частью "ОборудованиеИКомплектующие" разработанного в конфигурации КА2. . . .

@tlito 0 / 0 / 0 Регистрация: 29.09.2014 Сообщений: 3

	Оптимальный варинт загрузки скрипта Вконтакте 30.09.2014, 14:32. Показов 7636. Ответов 4 Метки нет (Все метки) Здравствуйте, уважаемые разработчики! Гугл Пейджспид не перестает давать новые невыполнимые задачи оптимизации. И теперь он рекомендует: сократить длину js, требующего анализа до загрузки страницы - и указывает на vk.com/js/api/openapi.js?115 то есть скрипт комментариев Вконтакте на моем сайте, который грузится в области <head>. Я не спец в JS и пробовал несколько способов отложить загрузку, но видимо это все надо делать не только для одной этой строки, и я точно не знаю как, а найти в гугл не нашел. Подскажите, можно ли отложить как-то загрузку скрипта комментариев в ВК и как это делается пошагово для всех элементов? Спасибо! 0

@Qwertiy 835 / 643 / 101 Регистрация: 20.08.2013 Сообщений: 2,524
	30.09.2014, 17:18
	Поставить его в конец body не подходит? И да, а при чём тут регулярные выражения? 0

@Totoro 47 / 23 / 3 Регистрация: 28.05.2012 Сообщений: 150 Записей в блоге: 1
	05.10.2014, 21:24
	Делайте подгрузку после загрузки DOM через yepnope, requirejs and etc.... 0