Тенденции. 2014. 2015...

Список разделов Общие разделы Оффтопик

Описание: Здесь можно обсудить всё, что не связано с тематикой сайта.
Модератор: Поддержка

Сообщение #61 factotum » 23.07.2014, 17:59

Sumanai:Но не вижу, почему это конструкция подключения скрипта напрямую в страницу в одночасье устарела
есть два метода загрузить скрипт асинхронно. Надеюсь,понимание зачем, найдется.
1. Добавить в тег объявления скрипта атрибут async. Работает это прекрасно, но до тех пор, пока нет зависимостей. Например, в своих проектах первым объявляю Modernizr. За ним идет несколько глобальных переменных, используемых во всех скриптах, объявляемых ниже. Например:
Код: Выделить всё
// event trigger after animation/transition end.
vralle.transitionEndEventName = transitionEndEventNames[Modernizr.prefixed('transition')];
vralle.animationEndEventName  = animationEndEventNames[Modernizr.prefixed('animation')];
// click or touch event
vralle.btnPressedEvent = (Modernizr.touch) ? 'touchstart' : 'click';
при асинхронной загрузке скриптов нет гарантий того, что скрипт, например, лайтбокса загрузиться позже Modernizr и определения глобальных переменных. Для решения этого вопроса нам придется либо отказаться от асинхронной загрузки. Либо свалить все скрипты в один файл с определением зависимостей уже в нем. Либо прибегнуть к второму методу асинхронной загрузки - через соответствующие библиотеки.
2. Подгружаем загрузчик. Как правило это 2-3кб. Подгружаем файл с зависимостями. Загрузчик загружает необходимые скрипты асинхронно, не блокируя рендеринг страницы. Исполняет скрипты в соответствии с объявленными зависимостями. При обильном использовании JS в проекте, выигрыш во времени загрузки может составлять 1-5 секунд.
Как-то так...
factotum
Автор темы
Откуда: Люксембург
Репутация: 234
С нами: 12 лет 7 месяцев

Сообщение #62 Sumanai » 23.07.2014, 18:31

factotum:1. Добавить в тег объявления скрипта атрибут async.

Есть же defer. Он сохраняет порядок подключения. Страдает только опера 12, но она устарела и скоро помрёт.

factotum:Например, в своих проектах первым объявляю Modernizr.

Его можно грузить синхронно, он небольшой.
Можно определить минимальное ядро приложения, и грузить его первым, а остальное- индивидуально для групп страниц, асинхронно.
Sumanai M
Аватара
Репутация: 1677
С нами: 11 лет 9 месяцев

Сообщение #63 factotum » 23.07.2014, 18:37

немного картинок:
Эта страница:
screenshot.106.jpg

Если не считать, что стили отказываются кешироваться, то данные загрузки примерно таковы:
страница была отдана на 600мс
DomContentLoader сработал сработал 1.05 ( примерно через 400мс после загрузки тела )
Полная загрузка страницы и окончательный рендеринг на 2.87 ( примерно через 2.27с после загрузки тела)
Итого тело -> загрузка страницы = 2.27с
Все это на 62 запроса и 43кб

Пример с асинхронной загрузкой:
screenshot.107.jpg

Медленный сервер отдал страницу на 1.56с (все никак не подружу мускул с ipv6)
DomContentLoader сработал сработал 1.84с ( примерно через 280мс после загрузки тела )
Полная загрузка страницы и окончательный рендеринг на 2.15с ( примерно через 0.6с после загрузки тела)
Итого тело -> загрузка страницы = 0.6с
Все это на 93 запроса и 533кб! При отдаче тела страницы на 0.6с, пользователь получает страницу через 1.2с после рефреша. В первом варианте - через 2.87с

Вот такое вот почти реальное сравнение
factotum
Автор темы
Откуда: Люксембург
Репутация: 234
С нами: 12 лет 7 месяцев

Сообщение #64 VEG » 23.07.2014, 19:27

factotum:Если не считать, что стили отказываются кешироваться
Стили отлично кэшируются. При нормальных переходах между страницами делается в среднем два запроса, один из которых — счётчик:
Изображение
VEG M
Администратор
Аватара
Откуда: Finland
Репутация: 1668
С нами: 12 лет 7 месяцев

Сообщение #65 factotum » 23.07.2014, 20:15

VEG, хром с Вами не согласен.

Firefox 31:
Добавлено спустя 6 минут 18 секунд:
screenshot.108.jpg

Встроенная панель разработчика Firefox так же отдает вопросительные данные

firebug:
screenshot.109.jpg

screenshot.111.jpg
Последний раз редактировалось factotum 23.07.2014, 20:29, всего редактировалось 1 раз.
factotum
Автор темы
Откуда: Люксембург
Репутация: 234
С нами: 12 лет 7 месяцев

Сообщение #66 Sumanai » 23.07.2014, 20:28

factotum:Встроенная панель разработчика Firefox

У меня 3-4 раза грузит :eek: Что встроенная что файрбаг. Точно помню что раньше было всё нормально. Хотя вот только что на 31 версию обновился. Может там глюк?

Добавлено спустя 2 минуты 28 секунд:
Sumanai:Что встроенная что файрбаг.

А, нет, ситуация интереснее. Включение встроенной панели заставляет грузить стиль по несколько раз, как по показаниям встроенной панели, так по файрбагу. В файрбаге, если его включить отдельно, всё нормально.
Sumanai M
Аватара
Репутация: 1677
С нами: 11 лет 9 месяцев

Сообщение #67 factotum » 23.07.2014, 20:31

Sumanai:Может там глюк?
Тогда FF глючит в паре с Хромом. В любом случае, мои картинки сравнения сделаны в одном браузере и одинаковой настройкой
factotum
Автор темы
Откуда: Люксембург
Репутация: 234
С нами: 12 лет 7 месяцев

Сообщение #68 Sumanai » 23.07.2014, 20:33

factotum, вы видимо нажимаете F5. Если просто переходить по страницам, то перезагрузки не будет.
Но вот почему /style.php не отдаёт 304 код, это отдельный вопрос, скорее всего действительно баг.

factotum:Тогда FF глючит в паре с Хромом.

Пояснил выше.
Sumanai M
Аватара
Репутация: 1677
С нами: 11 лет 9 месяцев

Сообщение #69 VEG » 23.07.2014, 20:37

factotum, в Chrome тоже всё ок. Учитывайте, что при нажатии F5 (даже без Ctrl) браузер всегда отсылает запросы мимо кэша, просто при нажатом Ctrl серверу не даётся возможности сообщить барузеру, чтобы он использовал версию файла из кэша (If-Modified-Since не отсылается). При обычных переходах то, что лежит в кэше, он не спрашивает. То есть кликайте, например, по разным страницам темы, чтобы смотреть, какие запросы отсылаются при переходах между страницами и что отвечает сервер на это.

Добавлено спустя 2 минуты 11 секунд:
Sumanai:Но вот почему /style.php не отдаёт 304 код, это отдельный вопрос, скорее всего действительно баг.
На сколько я помню, там такой логики нет. Надо будет изучить этот вопрос.
VEG M
Администратор
Аватара
Откуда: Finland
Репутация: 1668
С нами: 12 лет 7 месяцев

Сообщение #70 factotum » 23.07.2014, 20:40

VEG:Учитывайте, что при нажатии F5
простите. чтобы следить за беседой на этой странице, мне пришлось много раз кликать F5. Я поступаю не правильно?
factotum
Автор темы
Откуда: Люксембург
Репутация: 234
С нами: 12 лет 7 месяцев

Сообщение #71 VEG » 23.07.2014, 20:42

factotum, всё-таки пользователи чаще переходят со страницы на страницу, нежели нажимают F5. Так что проблема невелика. Всё равно F5 всегда медленне, чем обычный переход, и даже 304 код для style.php не исправит это.
VEG M
Администратор
Аватара
Откуда: Finland
Репутация: 1668
С нами: 12 лет 7 месяцев

Сообщение #72 factotum » 23.07.2014, 20:45

VEG:всё-таки пользователи чаще переходят
если бы это был сугубо информационный ресурс, согласился бы. Но показалось, эта беседа с вытекающими F5- как раз то, что называют форумом :smile:

Добавлено спустя 3 минуты 31 секунду:
VEG:If-Modified-Since не отсылается
а разве вина тому не обработка запросов через php с параметрами в линке?
ок. сейчас в инете через провода. а как беседовать с мобилки? трафик, время, батарея?

Добавлено спустя 4 минуты 5 секунд:
возвращаясь к повести выше: /viewtopic.php?p=13822#p13822
Один браузер. Оба скрина по F5. Оба в одном браузере. Разная организация загрузки ресурсов = Разное поведение. О чем и была повесть :)
Последний раз редактировалось factotum 23.07.2014, 20:54, всего редактировалось 1 раз.
factotum
Автор темы
Откуда: Люксембург
Репутация: 234
С нами: 12 лет 7 месяцев

Сообщение #73 Sumanai » 23.07.2014, 20:54

VEG:и даже 304 код для style.php не исправит это.

Исправит загрузку 18 кб и трату ресурсов на сжатие :smile:

Добавлено спустя 1 минуту 37 секунд:
factotum:а разве вина тому не обработка запросов через php с параметрами в линке?

Да нет. Я где- то видел 304 ответ от файла стилей, но там явно кастомный код.

factotum:Разная организация загрузки ресурсов. Поведение разное.

Как и сами скрипты разные. Там всё разное, и сравнивать их нельзя.
Вот перепишите phpBBex под асинхронный код, тогда и сравним :toothless:
Sumanai M
Аватара
Репутация: 1677
С нами: 11 лет 9 месяцев

Сообщение #74 factotum » 23.07.2014, 21:04

Sumanai:Вот перепишите phpBBex под асинхронный код, тогда и сравним
мне есть что переписывать. и переписанное работает :)
factotum
Автор темы
Откуда: Люксембург
Репутация: 234
С нами: 12 лет 7 месяцев

Сообщение #75 VEG » 23.07.2014, 21:10

Всё, теперь style.php умеет отдавать 304 ответ :)
VEG M
Администратор
Аватара
Откуда: Finland
Репутация: 1668
С нами: 12 лет 7 месяцев

Сообщение #76 factotum » 23.07.2014, 21:22

VEG:Всё, теперь style.php умеет отдавать 304 ответ :)
подтверждаю. 304 для стилей и в хроме, и в фф.
screenshot.112.jpg

время срабатывания таймера DCL сократилось с 400мс до 250мс. Соответственно и таймер загрузки страницы. Еще немного в этом направлении и можно будет получить страницу через 0.7-0.8с :)
factotum
Автор темы
Откуда: Люксембург
Репутация: 234
С нами: 12 лет 7 месяцев

Сообщение #77 factotum » 24.07.2014, 08:01

http://wptavern.com/hashcash-io-reveals-strategy-for-capitalizing-on-spammers
Hashcash.io Reveals Strategy for Capitalizing on Spammers

Добавлено спустя 1 час 12 минут:
скорее для phpbbex при использовании Google CDN:
Код: Выделить всё
<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="//ajax.googleapis.com">
при отсутствии в кеше DNS, позволяет убрать задержки на поиск хоста

Добавлено спустя 31 минуту 48 секунд:
подытоживая вчерашний разговор о распараллеливании загрузки ресурсов, уже давно не новая статья Михаила Давыдова, подробно освящающая данный вопрос: http://habrahabr.ru/post/145269/
factotum
Автор темы
Откуда: Люксембург
Репутация: 234
С нами: 12 лет 7 месяцев

Сообщение #78 factotum » 25.07.2014, 16:15

factotum:Привет require.js, Webpack, browserify, LMD
пообщался с browserify. Это счастье! (с). Проект собирается проще простого.
factotum
Автор темы
Откуда: Люксембург
Репутация: 234
С нами: 12 лет 7 месяцев

Сообщение #79 Sumanai » 25.07.2014, 17:56

factotum:при отсутствии в кеше DNS, позволяет убрать задержки на поиск хоста

Сейчас это не даст результата, так как джейквери подключается почти в самом верху. А вот для 3.1, где скрипты подключаются в конце body, это актуально.
Sumanai M
Аватара
Репутация: 1677
С нами: 11 лет 9 месяцев

Сообщение #80 factotum » 25.07.2014, 19:11

Sumanai:где скрипты подключаются в конце body
Вроде тысяча и один раз доказано, что загрузка jQ в хиде менее болезнена, чем ниже. Может что-то изменилось? :spy:
Последний раз редактировалось factotum 25.07.2014, 19:13, всего редактировалось 1 раз.
factotum
Автор темы
Откуда: Люксембург
Репутация: 234
С нами: 12 лет 7 месяцев

Пред.След.

Вернуться в Оффтопик