0 Пользователей и 1 Гость просматривают эту тему.
  • 10 Ответов
  • 23072 Просмотров
*

staticlight

  • Завсегдатай
  • 1086
  • 65 / 0
  • Staticlight
Приветствую, друзья.
Давайте порассуждаем, проконсультируемся и покажем буржуйскому Google, что мы его выше, быстрее, сильнее и, главное, умнее!

К примеру, возьмем один из моих сайтов. Использую плагин JCH_Optimize.
Несмотря на то, что скорость загрузки по Google Speed - 90 из 100, немного напрягает результат теста, а именно строка:
Цитировать
При начальной загрузке страницы выполняется синтаксический анализ JavaScript в объеме 485.1Кб. Чтобы ускорить отображение страницы, отложите синтаксический анализ JavaScript.




Итак, начем разбираться. Погуглив, первое, на что наткнулся:

Код
<script type="text/javascript">
         function onLoadScript () {
             var scri = document.createElement('script');
             scri.src = 'jq.js';
             document.body.appendChild(scri);
         }
         window.onload = function () {setTimeout(onLoadScript, 2000)}
</script>

Обрадовался я, скрипт скопировал в head и добавил в его код путь:

сайт/plugins/system/JCH_Optimize/jscss.php?f=9768a194e86e1cab591a533643550e17&amp;type=css&amp;gz=gz

Гугл тоже обрадовался моей находчивости и написал:
Цитировать
При начальной загрузке страницы выполняется синтаксический анализ JavaScript в объеме 485.1Кб. Чтобы ускорить отображение страницы, отложите синтаксический анализ JavaScript.

Окей, ищем дальше. Нашел такой вариант:
Код
var addScript = function(path) {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.async = true;
    script.src = path;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(script, s);
};
$(document).ready(function() {
    addScript('path-to-script1.js');
    addScript('path-to-script2.js');
    addScript('path-to-script3.js');
});

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


Сам Google ссылается на https://developers.google.com/speed/docs/best-practices/mobile?hl=ru#DeferParsingJS

Скрипт "Defer loading of JavaScript"
Код
<script type="text/javascript">

 // Add a script element as a child of the body
 function downloadJSAtOnload() {
 var element = document.createElement("script");
 element.src = "deferredfunctions.js";
 document.body.appendChild(element);
 }

 // Check for browser support of event handling capability
 if (window.addEventListener)
 window.addEventListener("load", downloadJSAtOnload, false);
 else if (window.attachEvent)
 window.attachEvent("onload", downloadJSAtOnload);
 else window.onload = downloadJSAtOnload;

</script>


Скрипт "Prefer asynchronous resources"

Код
<script>
var node = document.createElement('script');
node.type = 'text/javascript';
node.async = true;
node.src = 'example.js';
// Now insert the node into the DOM, perhaps using insertBefore()
</script>

И на статью: http://googlecode.blogspot.com/2009/09/gmail-for-mobile-html5-series-reducing.html

Есть умельцы, которые решали данную проблему?
UPD: умельцы-то точно есть, например, гиганты вроде read.ру и амазон.com решили данную задачу, странно, что озон не решил.
« Последнее редактирование: 05.05.2012, 11:57:30 от staticlight »
Руководитель отдела сервисного обслуживания систем безопасности.
Устали от com_content - поставьте com_k2.
TRIPLE "F" POWER: Firefox+FireShot+Firebug. Chrome + Ctrl+Shift+I
*

userxp

  • Живу я здесь
  • 2019
  • 403 / 6
  • Злой и ужасный бармалей
лично у меня мнение на этот счет совершенно противоположное - в топку.
объясню причину:
для чего всем нам нужен МТ или JQ? в большинстве случаев, для украшательств и всяких разных "прикольных примочек", ибо вызовы через AJAX и передачу данных формы можно реализовать и независимо, меньшим числом кода.
так вот теперь, собссно, вопрос - если "отложить" парсинг JS на "после" загрузки HTML кода, то что увидит пользователь? сначала непонятно отформатированную страницу, которая потом "вдруг" начнет во что-то "превращаться"?
никому не кажется это несколько ... ненормальным?

я всегда ЗА оптимизацию, но она должна быть рациональной и обоснованной.

p.s. кстати, если кому интересно, рекомендую проанализировать startup latency самой джумлы (ядра). я уверен, что задержка при загрузке фреймворка (каждый раз, кстати) будет значительней, нежели парсинг JS в браузере (понятно, что с оговорками насчет быстродействия компьютера и т.д.)
Как правильно задавать вопрос службе технической поддержки  yes!
SGA CM 7.2.0 RC0 KANG Build GWK74 + s95allinonescript + CWM 5.0.2.6 + Modem XWKT3
*

userxp

  • Живу я здесь
  • 2019
  • 403 / 6
  • Злой и ужасный бармалей
p.s. а чтобы ускорить отображение страницы, лучше уберите с сайта нахрен скрипты от VK.com (он же "вконтакте")  ;D

p.s.s. туда же твиттер

p.s.s.s. и почему получается так, что каунтер от рамблера грузится раньше "вконтактного" скрипта?


имхо, мусор на сайте, а вы занимаетесь оптимизацией не известно чего
« Последнее редактирование: 05.05.2012, 12:06:48 от userxp »
Как правильно задавать вопрос службе технической поддержки  yes!
SGA CM 7.2.0 RC0 KANG Build GWK74 + s95allinonescript + CWM 5.0.2.6 + Modem XWKT3
*

staticlight

  • Завсегдатай
  • 1086
  • 65 / 0
  • Staticlight
Если бы ПС забили на соцсети - убрал бы =) Если честно, напрягает скрипт +1 от Google и периодически тупит твиттер.

Но суть темы - помочь пользователям, а не разбирать один из моих сайтов, я просто его как пример привел.

А так я полностью согласен с первым комментарием: в топку. Но тема полезная, я, допустим, не согласен с:

если "отложить" парсинг JS на "после" загрузки HTML кода, то что увидит пользователь? сначала непонятно отформатированную страницу, которая потом "вдруг" начнет во что-то "превращаться"?

Я стараюсь макет верстать так, чтобы зависимость от JS была минимальной и с отключенным JS мои сайты выглядят почти так же, как с включенным (естессно, пользователь не увидит JS-счетчики и не сможет "лайкнуть Сосо" понравившуюся страницу).
К тому же я не вижу ничего страшного в том, чтобы пользователь при загрузке страницы, допустим, магазина, сначала видел товары с описанием, а через пару секунд у него подгружалась кнопка "купить".

P.S.: почему счетчик грузится раньше "вконтактного" скрипта - не знаю, тут не раньше, скорее, а быстрее, потому что VK использует, скорее всего, асинхронную загрузку скрипта.
« Последнее редактирование: 05.05.2012, 12:19:53 от staticlight »
Руководитель отдела сервисного обслуживания систем безопасности.
Устали от com_content - поставьте com_k2.
TRIPLE "F" POWER: Firefox+FireShot+Firebug. Chrome + Ctrl+Shift+I
*

Fedor Vlasenko

  • Живу я здесь
  • 3844
  • 730 / 7
  • Все начинается с Value
Недавно об этом вспоминал
Сам же использую такой вызов <script async="async" src="/templates/web-design/js/js.php" type="text/javascript"></body>
Файл js.php из-за хостинга
Цитировать
Пока конфигурационный файл nginx для клиентов не редактируется.
Начало файла
Код: php-brief
<?php
header('Content-type: text/javascript; charset: UTF-8');
header('Expires: ' . gmdate('D, d M Y H:i:s', time() + 2592000). ' GMT');
header("Content-Encoding: gzip");
header('Last-Modified: '.gmdate('D, d M Y H:i:s',filemtime(__FILE__)).' GMT');
?>
Далее тело скрипта.
Ну и ссылки по теме на литературу
Ускоряем загрузку сайта (руководства и инструменты)
*

danik.html

  • Живу я здесь
  • 2650
  • 353 / 4
для чего всем нам нужен МТ или JQ? в большинстве случаев, для украшательств и всяких разных "прикольных примочек", ибо вызовы через AJAX и передачу данных формы можно реализовать и независимо, меньшим числом кода.
так вот теперь, собссно, вопрос - если "отложить" парсинг JS на "после" загрузки HTML кода, то что увидит пользователь? сначала непонятно отформатированную страницу, которая потом "вдруг" начнет во что-то "превращаться"?

Ну не знаю. Лично я всегда делаю чтобы сайт работал с отключенным js без перекосов. Включая всякие карусели, слайдеры и прочее. Поэтому я без проблем могу отложить выполнение js-кода. Страница загружается моментально, а уже после подгрузки скриптов активизируются контролы, обрабатываемые js.

Кстати, выполение скриптов откладывается элементарно: просто опускаем свои скрипты вниз страницы, перед закрывающим </body> - вот и все )
【Мегапак Virtuemart:
 • метатеги (description,keywords)
 • заголовки (title)
 • красивые алиасы (чпу) без тормозов и дублей!
*

ShamilHan

  • Захожу иногда
  • 196
  • 5 / 0
Цитировать
Кстати, выполение скриптов откладывается элементарно: просто опускаем свои скрипты вниз страницы, перед закрывающим </body> - вот и все )
не могли бы вы объяснить на примерах, как и в каком файле вносить изменения? где файл находится и так далее...
Заранее спасибо
*

danik.html

  • Живу я здесь
  • 2650
  • 353 / 4
Это не сделать простой правкой файла. Набор скриптов динамический, и подставляется движком автоматически. Однако есть например плагин типа Script Down или что-то в этом роде (требует DOMDocument). Однако при использовании плагина могут возникнуть ошибки. Вобще эта тема достаточно глухая, так как что дилетантам, что разработчикам (в том числе и ядерной команде) похрен на такие "мелочи", как подключение ненужных либ, да еще в неправильном месте.
【Мегапак Virtuemart:
 • метатеги (description,keywords)
 • заголовки (title)
 • красивые алиасы (чпу) без тормозов и дублей!

Уважаемые коллеги :)
специально зарегился, поделиться своей находкой.
уже несколько дней пытался разобраться с тем как отложить синт.анализ js
отмечу, на моем сайте абсолютно не работает JCH_Optimize(роняет весь сайт и админку :)), хз почему.
Один из вариантов правильно откладывать синт. анализ добавление в <script> тега async и/или defer, их можно использовать вместе(но нужно понимать зачем), async пришел с html5(просто для справки)

Решение Joomla 2.5.8(думаю будет работать даже на 1.6, судя по документации) срабатывает почти для всех(или всех, зависит от того как они объявляются) скриптов на сайта, сразу!

Файл
libraries\joomla\document\document.php

строка 461
Заменяем:
Код
public function addScript($url, $type = "text/javascript", $defer = false, $async = false)
На:
Код
public function addScript($url, $type = "text/javascript", $defer = true, $async = true)
т.е. правим $defer = true, $async = true или что-то конкретное, думаю понятно


это ВСЕ  :D

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

еще можно поиграться с обявлением defer и acync
в файле
libraries\joomla\document\html\renderer\head.php
строки 161
Код
$buffer .= ' defer="defer"';
и 165
Код
$buffer .= ' async="async"';

Можно попробовать сделать defer="" или просто defer (аналогично async), так же убрать лишние пробелы, короче разные комбинации. Но по факту должно работать по дефолту.
Насколько я понял правильно все же использовать defer, а не defer="defer", но работает все равно как )
Еще есть вариант использовать extsrc вместо src в том же head.php

На моем сайте, к сожалению до конца не сработало, т.е. работает через раз, похоже зависит от ширины канала и скорости загрузки, скрипты стали выполняться через раз :(
поэтому похоже придется работать с каждым объявлением скрипта отдельно...
Не сочтите за рекламу, оптимизировал сайт http://insecta.cc/


P.S. http://docs.joomla.org/JDocument::addScript/1.6 спасибо документации

P.P.S. хорошие статьи на тему:
http://www.codeproject.com/Articles/307720/The-async-and-defer-Script-Attributes-in-HTML5
http://peter.sh/experiments/asynchronous-and-deferred-javascript-execution-explained/
очень советую разобраться поподробнее с этим если есть время :https://developers.google.com/speed/docs/best-practices/payload#DeferLoadingJS
http://www.rusdigi.name/useful/asinkhronnaya-zagruzka-skriptov-atribut-async

P.P.P.S. включил кэширование на сайте, Google дает 97 из 100 сайту, думаю мне хватит  ^-^
« Последнее редактирование: 20.01.2013, 02:30:14 от Merocle »
*

danik.html

  • Живу я здесь
  • 2650
  • 353 / 4
Атрибут defer интересная штука. Важно чтобы все зависимые скрипты, вся цепочка имела этот атрибут. Нельзя чтобы скрипт jquery имел этот атрибут, а, скажем jquery.fancybox был без этого атрибута. Можно некоторым скриптам добавить async.

Насколько я понял правильно все же использовать defer, а не defer="defer", но работает все равно как )

Неверно. defer - булев атрибут. Для типа text/html достаточно писать <script src=".." defer>, для application/xhtml+xml - <script src=".." defer="defer"> либо <script src=".." defer=""> - одно из двух. Но так как в text/html разрешено использовать xml-синтаксис, то можно использовать все три варианта - они идентичны.
【Мегапак Virtuemart:
 • метатеги (description,keywords)
 • заголовки (title)
 • красивые алиасы (чпу) без тормозов и дублей!
*

Satanek

  • Новичок
  • 2
  • 0 / 0
У меня один из первых сайтов, которые 100 лет уже не трогал показывает 97 из 100. www.klondike-perm.ru/
Вообще никак не оптимизировал. Шаблон сделан в старом Artisteer.
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

JavaScript - простое удаление дублей в массиве [РЕШЕНО]

Автор dm-krv

Ответов: 6
Просмотров: 475
Последний ответ 16.05.2019, 09:25:18
от dm-krv
В каких случаях нужен OpCache и как его правильно настраивать?

Автор Филипп Сорокин

Ответов: 56
Просмотров: 45787
Последний ответ 24.10.2018, 22:13:08
от ChaosHead
Признавайтесь, кто из вас еще пишет javascript: void(0) или href="#" !

Автор danik.html

Ответов: 45
Просмотров: 30810
Последний ответ 15.08.2016, 21:53:27
от annyka
Как дописать в поле hidden формы, текущий URL через JavaScript?

Автор dremora

Ответов: 9
Просмотров: 1587
Последний ответ 09.06.2013, 19:39:25
от dremora