Асинхронная загрузка со сторонних хостов

Список разделов phpBBex 1.x (поддерживается) Пожелания 1.x

Описание: В phpBBex 1.x чего-то не хватает? Напишите об этом здесь, и мы постараемся исправиться.
Правила раздела: Одна тема — один запрос новой возможности. Обязательно формируйте внятный заголовок, максимально отражающий суть вашей идеи. Также приведите примеры, где предлагаемая вами возможность будет актуальна.
Модератор: Поддержка

Является ли асинхронная загрузка контента со сторонних ресурсов необходимой фичей?

Да
5
K--H.ru, HD321kbps, Amney, budfy, valekrus
50%
Нет
5
VEG, Andrey1990, dnHyper, Citromon, Sumanai
50%
 
Всего проголосовавших: 10

Сообщение #1 K--H.ru » 30.03.2013, 21:54

Предлагаю заменить код <img, <embed и прочий на асинхронный. Чтобы страницы форума не зависели от скорости загрузки и доступности контента со сторонних хостов. Полезно, например, при указании аватары с удалённого хоста, вставке картинок или флэша.
Условие простое: всё, что не с server_name превращается в асинхронный код.
Пример: та же яндекс.метрика через .push (в конструкции try{}catch() ).
K--H.ru M
Автор темы
Репутация: 13
С нами: 11 лет 5 месяцев

Сообщение #2 factotum » 30.03.2013, 23:21

K--H.ru, обо всем и ни о чем.
1. отзывчивость страниц. спасение утопающих дело рук самих утопающих
2. Картинки. lazy load в помощь. независимо от хоста - приятно влияет на отзывчивость. таймаут уже там.
3. Скрипты. решение тут. но для независимых скриптов. для зависимостей все немного сложней. гляньте head.js - с этим инструментом довольно легко организовать зависимости по ID. лично мне стало с ним тесно и выбор пал на yepnope - меньше свободы с организацией зависимостей и немного меньшая скорость, но в плюсах логика "если то иначе", исполнение по вызову, встроенный таймаут.
Если не заморачиваться с загрузкой jquery, то много чего можно вкидывать через jquery.ajax. снова таки, в плюсах таймут
factotum
Откуда: Люксембург
Репутация: 234
С нами: 11 лет 11 месяцев

Сообщение #3 VEG » 31.03.2013, 00:13

Не стоит вводить лишние сущности там, где это не требуется. Картинки сами по себе грузятся асинхронно. Если добавить ещё и какой-то скрипт для этого, то это только замедлит работу. Аватары с удалённых хостов стоит вообще запрещать, не зря в админке написано «Не рекомендуется!». Что касается вставленных в сообщения изображений с внешних серверов — они также грузятся браузером асинхронно. Единственное, на что может повлиять встраивание любого скрипта отложенной загрузки — это уменьшение времени индикации загрузки, при этом реальная загрузка страницы станет несколько дольше. То есть отложенная загрузка изображений только скрывает сам факт загрузки, но не делает её быстрее или лучше.

BB [media] работает асинхронно. То есть ролики начинают загружаться только после полной загрузки DOM страницы. Однако, это не добавляет странице отзывчивости — пока браузер грузит встроенные элементы, страница сильно тормозит.

Добавлено спустя 31 минуту 57 секунд:
factotum:Если не заморачиваться с загрузкой jquery
Немного поразмыслив я пришёл к выводу, что асинхронная загрузка jQuery лишена всякого смысла. Браузер ждёт загрузки jQuery только один раз, при первом заходе на сайт. Дальше файл берётся из кэша, где он сразу готов к использованию. С дополнительным кодом по асинхронной загрузке jQuery время до полной готовности страницы только увеличится. Полная готовность — это когда пользователь уже может нажимать на кнопочки, которые он увидел на экране.

Если же зависимостей много, они сложные — тогда, конечно, решения типа head.js актуальны. При этом jQuery, как основную библиотеку, всё равно эффективнее подключить напрямую. И те скрипты, которые почти всегда нужны на большинстве страниц, также эффективнее собрать в одном файле. Браузер пользователя это переварит намного быстрее, чем подключение кучи мелких файлов через head.js.

В phpBBex нет никаких сложных скриптов на JavaScript. В голову приходит объединение файлов forum_fn.js и jquery.splash.js для оптимизации. Впрочем, ощутимого прироста в скорости загрузки это не даст. Ощутимые изменения обычно бывают при объединении 5-10 и более файлов. И то, при наличии копии в кэше, это будет мало заметно.

Поскольку некоторые жаловались на недоступность серверов Google CDN в локалках, в будущем копия jQuery будет распространяться вместе с phpBBex. Возможно, сделаем опцию, как и в phpBB 3.1, чтобы пользователь мог выбрать между CDN и локальной копией. Так что аргумент, мол если Google CDN недоступен, при асинхронной загрузке jQuery страница всё равно отобразится быстро, не считается :) С загрузкой локальной копии файла проблем не будет.

Достаточно проверить, как поступают гиганты типа Yandex и Google. Там люди не занимаются реализацией фишек «ради самих фишек». Скрипты подключаются напрямую. Не знаю как в Google, но в Яндекс сильно заморачиваются по поводу скорости отображения страницы. Например, использование каких-то сложных селекторов в CSS замедляет отрисовку страницы. Они сочинили свой БЭМ, где совершенно не используется «каскадность» каскадных таблиц стилей (CSS). На одной из конференций Яндекса, где я побывал, они очень хвалились, что подобная линейная структура отрисовывается очень быстро во всех браузерах.

Писал пост не по порядку, поэтому получилось сумбурно.
VEG M
Администратор
Аватара
Откуда: Finland
Репутация: 1653
С нами: 11 лет 11 месяцев

Сообщение #4 factotum » 31.03.2013, 01:01

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

Ок, пример с картинками: на странице 10 картинок. в экране 3. вместо десяти одновременных запросов 3. Семь растягиваются с вьюпортом.
на десяти страницах это 70 отложенных запросов, плавно растягивающихся во времени. Как же может быть связано количество одновременных запросов к серверу и отзывчивость?

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

Добавлено спустя 6 минут 59 секунд:
VEG:В phpBBex нет никаких сложных скриптов на JavaScript
спартанский функционал любого ванильного движка не подразумевает, что тот же лайтбокс никому не нужен

Добавлено спустя 12 минут 28 секунд:
VEG:Достаточно проверить, как поступают гиганты типа Yandex и Google. Там люди не занимаются реализацией фишек «ради самих фишек». Скрипты подключаются напрямую
откройте сырец казалось бы пустой страницы google.com. Вы очень удивитесь
factotum
Откуда: Люксембург
Репутация: 234
С нами: 11 лет 11 месяцев

Сообщение #5 VEG » 31.03.2013, 10:22

factotum:откройте сырец казалось бы пустой страницы google.com. Вы очень удивитесь
Откройте сырец казалось бы наполненной контентом страницы yandex.ru. Вы очень удивитесь. При этом что главная Яндекса, что главная Google — обе открываются примерно за секунду. Соглашусь, я про Google не проверив и не подумав ляпнул.

factotum:гуглом, твиттером, фейсбуком
Откройте Google Plus, Twitter, Facebook. Сравните скорость загрузки этих социалок с VK. Изучите код VK. У меня — VK загружается практически моментально. Остальные долго думают до готовности. При этом на vk.com я вижу пачку синхронно загружаемых js-файлов. Во всех случаях я сперва заходил на какую-то страницу, чтобы все необходимые данные закэшировались. Затем я копировал адрес этой страницы и открывал её в новой вкладке (F5 тут не катит, ибо он начинает проверять, не изменились ли файлы, которые уже есть в кэше). Считал время до момента, когда страница полностью готова.

factotum:использующими ленивые загрузки и для картинок
Социалки работают иначе — у них там всюду бесконечные ленты и подгрузка данных на AJAX по мере прокрутки. Совсем другая специфика. В первом посте речь шла об асинхронной загрузке картинок. То есть страница загрузилась и отобразилась — и после этого начинают загружаться картинки. Так браузер и делает, он не ждёт окончания загрузки картинок, в отличие от ожидания синхронных <script>.

factotum:Ок, пример с картинками: на странице 10 картинок. в экране 3. вместо десяти одновременных запросов 3.
У браузера есть лимит соединений на каждый хост и своя тактика по их загрузке. Изображения, на которые сейчас смотрит пользователь, браузер может загружать с повышенным приоритетом. Допустим, пятая картинка весит 1 мегабайт и отдаётся сервером со скоростью не более 100 килобайт в секунду. При прокрутке страницы пользователю не придётся ждать 10 лишних секунд — она будет загружена заранее, пока пользователь читает начало темы. Также непонятно что будет с изображениями в случае с ленивой загрузкой, если пользователь захочет сохранить страницу, не прокручивая её до конца.

factotum:Про скрипты разговор не нужен, все видно в вэб-консоли.
Хорошо. Вот код:
Код: Выделить всё
<!DOCTYPE html>
<script>var start = new Date().getTime();</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
jQuery(function($)
{
   var elapsed = new Date().getTime() - start;
   document.body.innerHTML = elapsed;
});
</script>
Считает время от момента открытия страницы и до события ready в jQuery. На моей машине в Firefox (27 активных расширений) — 70мс с кэшем и 220мс без кэша; в Chrome — 20мс с кэшем и 180мс без кэша. Вы можете это ускорить? Дерзайте.

factotum:о таймаутах при блокирования хостов промолчу.
Я уже писал, если вы размещаете все свои скрипты у себя на хосте — никаких проблем с таймаутами не будет. Если ваш хост недоступен — он недоступен полностью, а не только для скриптов. И наоборот. Не высасывайте проблему из пальца.
VEG M
Администратор
Аватара
Откуда: Finland
Репутация: 1653
С нами: 11 лет 11 месяцев

Сообщение #6 factotum » 31.03.2013, 10:58

VEG, нечего ответить, потому что разговор ни о чем. позиция понятна, можно не продолжать
factotum
Откуда: Люксембург
Репутация: 234
С нами: 11 лет 11 месяцев

Сообщение #7 VEG » 31.03.2013, 11:51

factotum, нет, мне реально интересно, как вы предлагаете уменьшать задержку, накладываемую jQuery в примере кода выше. Хочу лично убедиться в том, что я живу в неправильной вселенной.
VEG M
Администратор
Аватара
Откуда: Finland
Репутация: 1653
С нами: 11 лет 11 месяцев

Сообщение #8 factotum » 31.03.2013, 12:27

VEG, можете рассказать, сколько на этом ресурсе новых пользователей в день?
хотя нет, не нужно. еще раз почитал выше. таки загляните в сурцы упомянутых. предложите решение на аджакс. хотя бы что нибудь. у меня >60% визитов новые. я не знаю, что им рассказать про кеш

Добавлено спустя 22 минуты 30 секунд:
немного фактов:
jquery lazy load. сохранить страницу - картинки на месте.

список используемых скриптов:
jquery
colorbox
facebook-jssdk
twitter-wjs
plusone
openapi.js
adsence
гугле аналитика
яндекс аналитика

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

нужно решение.
factotum
Откуда: Люксембург
Репутация: 234
С нами: 11 лет 11 месяцев

Сообщение #9 VEG » 31.03.2013, 13:08

factotum:предложите решение на аджакс. хотя бы что нибудь.
Решение для чего?

factotum:у меня >60% визитов новые. я не знаю, что им рассказать про кеш
Я не просто так указал и время до готовности страницы и без наличия jQuery в кэше:
VEG:На моей машине в Firefox (27 активных расширений) — 70мс с кэшем и 220мс без кэша; в Chrome — 20мс с кэшем и 180мс без кэша.
Сейчас задержка на грани реакции пользователя даже при отсутсвии копии jQuery в кэше. А теперь расскажите мне, как её сделать ещё меньше. Мои представления о работе браузера говорят, что любая дополнительная логика только увеличит задержку. Очень интересно посмотреть, как теория расходится с практикой.

Я понимаю, если бы выступали за полный отказ от jQuery, поскольку он вносит эту задержку в несчастные 200мс при первой загрузке и 20-70мс при наличии копии в кэше. Да, на ванильном JS не будет этой задержки, поскольку он сразу доступен в браузере, и для работы ему не нужно ждать окончания загрузки DOM. Но jQuery активно используется на всех современных сайтах и этой задержкой просто пренебрегают, поскольку это небольшая плата за удобство работы с DOM документа. Очень, очень интересно, как асинхронная загрузка jQuery поможет её уменьшить :)
VEG M
Администратор
Аватара
Откуда: Finland
Репутация: 1653
С нами: 11 лет 11 месяцев

Сообщение #10 factotum » 31.03.2013, 13:20

http://artzstudio.com/files/Boot/test/benchmarks/script.html
как то так

Добавлено спустя 1 минуту:
не забудьте о CTRL+SHIFT+R
factotum
Откуда: Люксембург
Репутация: 234
С нами: 11 лет 11 месяцев

Сообщение #11 VEG » 31.03.2013, 13:27

factotum:facebook-jssdk
twitter-wjs
plusone
openapi.js
adsence
гугле аналитика
яндекс аналитика
Я писал, что в некоторых случаях асинхронная загрузка оправдана. Этот ворох мусорных скриптов — как раз тот случай. Они никак не помогают работе конкретной страницы. А мы сейчас обсуждаем асинхронную загрузку jQuery и других скриптов, без которых страница не работает.

factotum:http://artzstudio.com/files/Boot/test/benchmarks/script.html
как то так
Что вы хотели сказать этим? Вы вообще читаете что я вам пишу?
VEG M
Администратор
Аватара
Откуда: Finland
Репутация: 1653
С нами: 11 лет 11 месяцев

Сообщение #12 factotum » 31.03.2013, 14:10

VEG, да попробуйте уже наконец сами
factotum
Откуда: Люксембург
Репутация: 234
С нами: 11 лет 11 месяцев

Сообщение #13 VEG » 02.04.2013, 14:25

factotum:VEG, да попробуйте уже наконец сами
К сожалению, те способы асинхронной загрузки, которые знаю я, только увеличивают задержку между началом получения браузером страницы и готовностью документа для работы. Если бы знал способ уменьшить задержку — не спрашивал бы вас.
VEG M
Администратор
Аватара
Откуда: Finland
Репутация: 1653
С нами: 11 лет 11 месяцев

Сообщение #14 factotum » 02.04.2013, 21:07

Ок, под настроение состряпаю бинчмарк.
factotum
Откуда: Люксембург
Репутация: 234
С нами: 11 лет 11 месяцев

Сообщение #15 VEG » 22.04.2013, 21:59

К слову, сейчас подбирается какое-то решение для асинхронной загрузки splash.jquery, mediaelement.js и в перспективе других скриптов, которые не нужны на каждой странице и должны подгружаться по требованию. Пока что таких скрипта всего два, но в перспективе их может стать больше. Поэтому какое-то встроенное решение для удобной загрузки зависимостей пригодится.

factotum, на данный момент, как я понимаю, head.js в этом плане самый гибкий и удобный?
VEG M
Администратор
Аватара
Откуда: Finland
Репутация: 1653
С нами: 11 лет 11 месяцев

Сообщение #16 factotum » 23.06.2013, 20:08

VEG:factotum, на данный момент, как я понимаю, head.js в этом плане самый гибкий и удобный?
небольшие заметки на полях...
удобно: yepnope.js
Фишка: тригер Тест - Да - Нет
Почему: Запросто решается вопрос с загрузкой только необходимого. Самый банальный пример тригера: d.getElementById('btn-plusone') -> true -> загрузить скрипт кнопки
В общем то сейчас стараюсь использовать подобный тригер для всех подгружаемых плагинов (соцсети, лайтбоксы, плееры, etc.).

Все бы хорошо, но с ростом скоростей сервера и каналов клиентов узким горлышком стало не время загрузки скриптов, а время DOMContentLoaded и onload. Большинством известных загрузчиков упирается в этот непреодолимый костыль - решается вопрос лишь с асинхронной загрузкой скриптов. Те же плагины соц.сетей для г+, твиттера, фб и вк отжирают около секунды. Цена загрузки слишком велика.

Решение: http://calendar.perfplanet.com/2012/the-non-blocking-script-loader-pattern/
не без костылей, но часть скриптов запросто вынести.
Philip Tellis вроде все разжевал, но для практики оказалось полезны сырцы Бумеранга
О решениях части костылей: http://www.slideshare.net/benvinegar/modern-iframe-programming-8281214
нужды в LightningJS вроде как не нашел, ибо в любом случае нужен транспорт, чтобы пробиться в основное окно. Для полноты картины дебагер: http://hirojs.com/
factotum
Откуда: Люксембург
Репутация: 234
С нами: 11 лет 11 месяцев

Сообщение #17 factotum » 24.06.2013, 18:42

в догонку стоит посмотреть концепцию быстрой загрузки и рендеринга от гугля:
http://youtu.be/jD_-r6y558o

самое интересное примерно с 16-ой минуты
factotum
Откуда: Люксембург
Репутация: 234
С нами: 11 лет 11 месяцев


Вернуться в Пожелания 1.x



cron