extsrc.js — загружаем все скрипты асинхронно и уже после отрисовки страницы (даже с document.write)

Хочу Вам рассказать о штуке, которую я изобрел сегодня, чтобы ускорить процесс загрузки сайтов. Все вы знаете, что <script src="..."></script> задерживает отрисовку страницы, пока не загрузится этот скрипт. Если их десятки — это может сереьезно замедлить работу сайта — в результате пользователь 20 секунд пялится на пустую (или недорисованную) страницу из-за какого-нибудь тупящего социального виджета (умножить на десяток этих виджетов).

Не правда ли было бы круто, если бы можно было сказать <script extsrc="..."></script> ("extsrc" = "грузи потом"), чтобы скрипты загружались после того как страница отрисована?

Все бы хорошо, но есть document.write… Сегодня я наконец решил его проблему — представляю extsrc.js — скрипт, который запустит все скрипты после отрисовки страницы (даже если они содержат document.write — и правильно отрисуется все).

Результат? Супер-быстрая загрузка страниц, даже если там море всяких внешних скриптов.

Использование:

Заменяем <script src="..."> на <script extsrc="...">.

Итого получается:

<script src="http://whiteposts.com/extsrc_js/extsrc.js"></script>
<script extsrc="..."></script>

Все самое главное на Google Code: http://code.google.com/p/extsrcjs/

Все extsrc="..." загружаются последовательно (из-за document.write), но после того как страница отрисовалась (в отличии от обычного src="...", который заставляет пользователей смотреть на пустую страницу пока не загрузится скрипт).

Не рекомендую делать AdSense асинхронным — можете потерять аккаунт за неразрешенную смену кода.

Чего это мне так src="" не понравился? Ну в свете последнего DDOSа в 100GBit (сегодня писали) у меня все страницы с виджетом от Твиттера грузились больше минуты. Пора всем переходить на асинхронную загрузку JavaScript'а, тем более что это уже возможно в существующих браузерах и даже с document.write (основной аргумент против 'async' раньше).

asyncsrc

<script asyncsrc="..."></script>

Кроме extsrc="..." есть еще asyncsrc="..." — более быстрый, но менее безопасный с точки зрения document.write. Используйте <script asyncsrc="..."></script> если уверены что в данном конкретном скрипте нет document.write.

По сути <script asyncsrc=""> это то же, что и <script defer> только работающий во всех разумных браузерах (насколько я знаю).

Все asyncsrc будут загружаться в параллель (соответственно нет гарантии какой скрипт загрузится раньше, но естественно это быстрее, чем последовательно загружающиеся extsrc). Проблема объединить эти два подхода как раз в реализации замены document.write.

В общем, не уверен насчет скрипта — пиши extsrc="...". Уверен — пиши asyncsrc="...".

Итого

То есть сначала все script src="..." делаем extsrc="...", а затем по одному меняем на asyncsrc="..." — если ничего не сломалось.

HTML-код. Исправлен.
Время начала загрузки (после картинок). Исправлен.
Баг с IE/Opera и пустым Script3. Исправлен.
Баг document.write('<script src="...">'); document.write('</script>'); тоже скорее всего пофиксен.
Грамматические баги тоже поправлены. :)

Спасибо пользователям в комментариях и сообщениях за нахождение багов.

Протестировано и работает: IE 6/8, Opera 10, Chrome 7, Firefox 3.
Сорри, что пост убирал — нужно было время привести все в порядок. Тяжело все же отлаживать в IE под виртуальной машиной. :)

Тестируйте, пробуйте, ломайте. Если кто переведет свой сайт на такой метод — отписывайтесь о результатах :) Особенно о плохих, где что-то не работает.

JQuery

JQuery скорее всего будет нормально работать как extsrc, плагины к нему вполне можно грузить как extsrc тоже, но нельзя использовать inline javascript:

<script extsrc="jquery.js"></script>
<script>
  $(document).ready(....)
</script>

Вот это — работать не будет! Потому что сначала попытается выполниться «inline script» (про document.ready), который не будет знать что такое $, а затем уже загрузится JQuery.

Решение: надо вынести $(document).ready(...) в отдельный файл и подгружать его как extsrc="...".

Update

Некто Brenden Grace провел кое-какие тесты и при последовательной (extsrc) загрузке специально замедленных скриптов страница закончила загрузку за 1.2 секунды, при этом контент показался на 300мс? (Трудно судить по картинке)

При дефолтной загрузке весь контент загрузился за 500мс (. Собственно выводы из этого сделать трудно, потому что extsrc сделан для удобства пользователя (чтобы контент появился как можно раньше, а потом уже догружайте что хотите).

Но вывод который делает Бренден — что (разумеется) подгрузка контента последовательно в итоге занимает больше времени чем параллельно. Но с другой стороны — пользователь увидел контент в полтора раза быстрее, чем при дефолте…

А Yahoo/MS уже тестировали — что чем раньше результат — тем больше денег с клиента :) совершенно реальное исследование.

Так что в любом случае — палка о двух концах. Но когда речь идет о социальных виджетах всяких — я бы точно их убирал после загрузки — насколько бы медленнее они ни грузились. Не стоят они того, чтобы сидеть и на странице ждать их загрузки.

Картинки от Брендена и пост

Главная идея тут все равно — Вы не можете предсказать насколько долго будет отвечать любой внешний сервер и Вы не должны на них полагаться, поэтому все внешние скрипты отдайте extsrc.

Йои Хаджи,
вид уже отовсюду