|
|
| | Дата |
|
| USD/RUB | 93.4409 | | BTC/USD | 64146.7347 |
|
|
|
| Скрипты, программы и технические решения Обсуждаем скрипты, программы и новые технологии. |
01.08.2014, 07:55
|
#1
|
|
автоматизирую интернеты
Регистрация: 05.07.2009
Адрес: chesser.ru
Сообщений: 3,362
Бабло: $470735
|
Как подключать jquery и другие js/css на сайте?
сабж, надо чтобы сайт не тормозил.
В данный момент использую такую схему:
PHP код:
<html>
<head>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- тут идет html или js, не использующий jquery: inline-код или async вызовы js-файлов
например, вывод adsense -->
<!-- конец html, перед закрытием </body> -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined') {
document.write(unescape("%3Cscript src='/path/to/jquery-1.11.1.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>
<script async src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://site.com/custom.css" />
<script async type="text/javascript" src="http://site.com/custom.js"></script>
</body>
</html>
Порядок загрузки примерно следующий:
1) начало загрузки html
2) загрузка css через CDN или из клиентского кеша
3) загрузка html, начало отрисовки элементов, подгрузка и запуск js-кода, который не использует DOM, асинхронный вызов js
4) синхронная загрузка jquery
5) загрузка дополнительных CSS
6) асинхронная подгрузка доп. скриптов
7) конец загрузки html
8) DOM-построен
9) выполнение всяких $(document).ready(function(){.....}) , зависящих от DOM
в этой схеме не нравится 4-ый пункт, имхо лучше грузить jquery асинхронно, но тогда начнутся "гонки" скриптов, ждущих $(document).ready
смотрю в сторону js-лоадеров, выбираю.
дык как подключать jquery?  |
|
|
|
01.08.2014, 09:13
|
#2
|
|
Senior Member
Регистрация: 24.04.2007
Адрес: Красноярск
Сообщений: 358
Бабло: $50640
|
а зачем так голову морочить, что улучшит асинхронная загрузка jquery? 
__________________
PharmCash - Лучшие условия и профит в фарме. Hold-0, Refunds-0, Commission–50%, CPU+500. Google нас любит!
|
|
|
|
|
01.08.2014, 09:23
|
#3
|
|
автоматизирую интернеты
Регистрация: 05.07.2009
Адрес: chesser.ru
Сообщений: 3,362
Бабло: $470735
-->
|
ТС
Цитата:
Сообщение от flo0
а зачем так голову морочить, что улучшит асинхронная загрузка jquery? |
тут два вопроса:
Цитата:
Сообщение от flo0
а зачем так голову морочить
|
этим занимаются многие крупные проекты, сайты-приложения и тд.
Гугл постоянно выпускает все новые и новые статьи типа такой:
https://developers.google.com/speed/...s/mobile?hl=ru - 4-ый пункт
Цитата:
Сообщение от flo0
что улучшит асинхронная загрузка jquery?
|
увеличит скорость "прогрузки" страницы и скорость появления статической картинки. Для медленного (мобильного) интернета это актуально.
а что хорошего в блокирующем javascript?  |
|
|
|
|
01.08.2014, 09:38
|
#4
|
|
Senior Member
Регистрация: 24.04.2007
Адрес: Красноярск
Сообщений: 358
Бабло: $50640
|
В примере яваскрипт загружается в конце, т.е. картинка уже будет. Jquery грузится с другого домена, т.е. уже типа параллельно + это сеть доставки и кеш валяется практически в соседнем подъезде. То есть борьба идет за доли секунд наверное?
__________________
PharmCash - Лучшие условия и профит в фарме. Hold-0, Refunds-0, Commission–50%, CPU+500. Google нас любит!
|
|
|
|
|
01.08.2014, 10:01
|
#5
|
|
я крут как root
Регистрация: 28.05.2012
Адрес: HTTPHEADER
Сообщений: 483
Бабло: $65470
|
Сначала один ресурс 600 мс, потом второй 600 мс. Параллельно, но вдруг один начнет тормозить и неважно на каком быстром сервере сайт.
Видел где-то плагины, которые собирают все скрипты и стили в одни файлы. |
|
|
|
|
01.08.2014, 10:43
|
#6
|
|
автоматизирую интернеты
Регистрация: 05.07.2009
Адрес: chesser.ru
Сообщений: 3,362
Бабло: $470735
-->
|
ТС
Цитата:
Сообщение от flo0
В примере яваскрипт загружается в конце, т.е. картинка уже будет. Jquery грузится с другого домена, т.е. уже типа параллельно + это сеть доставки и кеш валяется практически в соседнем подъезде.
|
Тот вариант, который я предложил работает нормально, не зря я с ним экспериментировал несколько дней. Время загразки страницы визуально возросло раза в 2-4 наверно, а в опере вообще раз в 20.
но т.к. в моем примере jquery грузится синхронно, то в месте ее загрузки процесс отрисовки контента остановится, все будут ждать конца загрузки и интерпретации jquery.js. Если и этот файл грузить асинхронно, то все ваще будет супер.
Цитата:
Сообщение от flo0
То есть борьба идет за доли секунд наверное?
|
конечно за доли секунды. Сайты, которые грузятся более 1 секунды, можно смело назвать говном.
Это и делают посетители медленных сайтов, выбирая более быстрые, поэтому пару лет назад началась эта гонка за доли секунды. |
|
|
|
|
01.08.2014, 11:17
|
#7
|
|
Senior Member
Регистрация: 24.04.2007
Адрес: Красноярск
Сообщений: 358
Бабло: $50640
|
Если перенести в шапку custom.css, то отрисовка контента не остановится, т.к. страница разбирается последовательно.
А если использовать загрузчик, то не потратятся ли на его разбор и исполнение те-же доли секунды, которые ранее шли на jquery.
Под долями секунд я имею ввиду максимум сотые, если ли бы десятые то и вопросов не было.
__________________
PharmCash - Лучшие условия и профит в фарме. Hold-0, Refunds-0, Commission–50%, CPU+500. Google нас любит!
|
|
|
|
|
01.08.2014, 11:35
|
#8
|
|
автоматизирую интернеты
Регистрация: 05.07.2009
Адрес: chesser.ru
Сообщений: 3,362
Бабло: $470735
-->
|
ТС
Цитата:
Сообщение от flo0
Если перенести в шапку custom.css, то отрисовка контента не остановится, т.к. страница разбирается последовательно.
|
да, можно. Но в том виде, как сейчас, мне больше понравилось, причину точную подзабыл: либо большой размер custom.css, либо я погнался за этой штукой, либо опера чудила
Цитата:
Сообщение от flo0
А если использовать загрузчик, то не потратятся ли на его разбор и исполнение те-же доли секунды, которые ранее шли на jquery.
|
загрузчики обычно занимают пару килобайт....ну я собственно и интересуюсь эффектом. Может какие-то популярные веб-фреймворки их используют? (В друпале, например, есть модули для labjs и headjs(или requirejs), я пробовал включать на одном сайте, но не сильно помогло, потому что в js скриптах темы такой бардак, что эти лоадеры почти бессильны) |
|
|
|
|
01.08.2014, 12:04
|
#9
|
|
Senior Member
Регистрация: 18.08.2010
Сообщений: 360
Бабло: $66120
|
Меня как юзера больше бесит не скорость загрузки, а когда элементы начинают перемещатся во время загрузки страницы. Или когда элемент уже отобразился, но не работает. Я так понимаю это как раз случай когда jquery грузится после основного html
> этим занимаются многие крупные проекты, сайты-приложения
У крупных проектов немного другие заботы, чем у вебмастеров  |
|
|
|
|
01.08.2014, 13:11
|
#10
|
|
Senior Member
Регистрация: 27.09.2013
Сообщений: 697
Бабло: $101520
|
Я проводил подобные эксперименты с шопом в зоне ру.
Первоначальная скорость загрузки шопа на конверт не влияет, если она в разумных пределах.
Если начинают тормозить повторные операции - открытие другой страницы шопа, нажатие на кнопку 'купить', просмотр корзины - посетители уходят, конверт падает.
Поэтому насчет подгрузки скриптов вывод следующий - не заморачиваться. Просто убедиться что они кешируются, что к ним там рэндом гет-параметром не приписывается, как это любят делать некоторые. Если подключать jquery с cdn гугла есть хороший шанс на то, что скрипт уже будет закеширован у посетителя даже при его первом хите.
Перенос css/js прямо в кол документа нецелесообразен - не будет кеширования, все это богатство будет грузиться заново при каждой перезагрузке страницы. Имеет смысл собирать js и css из нескольких файлов в один большой. Но опять же, это все мелочи по сравнению с БД и keep-alive в HTTP 1.1 сводит проблему множества мелких файлов к минимуму. Что еще там можно придумать... ну gzip на вебсервере должен быть включен чтобы соптимизировать трафик.
Оптимизировать надо в первую очередь корзину и другие операции с БД. По возможности выносить их в асинхронный ajax, чтобы не было перезагрузки страницы. Смотреть, чтобы шоп не делал 100500 запросов к БД на одну операцию обновления страницы.
|
|
|
|
|
Линейный вид
