Никогда не помещайте внешний Javascript в

Этому сообщению в блоге 6 лет! Скорее всего, его содержание устарело. Особенно если это технический.

Прежде всего, название, возможно, вводит в заблуждение. По сути, не помещайте простые теги сценариев, которые не являются асинхронными, в тег head.

Если вы поместите фрагмент javascript в заголовок HTML-страницы, браузер начнет загружать его, переходить по строкам HTML и загружать другие ресурсы, когда они встречаются с ними, такие как файлы CSS.

Затем, когда все javascript и CSS будут загружены, он начнет рендеринг страницы, а когда он это сделает, он загрузит любые изображения, на которые есть ссылки в HTML. Примерно в то же время он начнет отображать вещи на экране. Но этого не произойдет, пока не будут загружены CSS и Javascript.

Для повторения: экран браузера будет пустым. Загрузка изображений не начнется, если загрузка URL-адреса javascript, указанного в заголовке, застрянет.

Вот два совершенно хороших примера из обычной утренней охоты на новости:

Wired
Wired.com виновен

виноват getharvest
виноват getharvest.com

Вот что делает getharvest.com в своем HTML:

<! DOCTYPE html> <html lang = "en"> <head> <script type = "text / javascript"> var NREUMQ = NREUMQ || []; NREUMQ. push (["mark", "firstbyte", new Date (). getTime ()]); </ script> <script type = "text / javascript" src = "http: //c761485.r85.cf2.rackcdn. com / gascript.js "> </ script> ...

Почему он застревает при подключении к c761485.r85.cf2.rackcdn.com Я просто не знаю. Но это так. Интернет часто бывает таким. Вы просто не можете подключиться к отлично настроенным веб-серверам.

Update-то время-писчей этого текстом! Когда я писал этот текст, я дал getharvest.com второй шанс, полагая, что скорее всего белки в моих интернет-трубочках вернутся и будут работать на rackcdn.com, но затем [это произошло! / Static / cache / bd / 02 / bd02367be6bbe6d16444051619d88bee .jpg)

Итак, что нужно сделать ? Просто: не полагайтесь на внешние ресурсы. Например, можете ли вы переместить тег сценария Javascript в самое нижнее место HTML-страницы. Таким образом, он будет рендерить столько, сколько возможно, ожидая, пока ресурс Javascript отклеится. Или, почти в равной степени, вы можете оставить тег script в <head>, но затем в атрибуте async:

<script async type = "text / javascript" src = "http://c761485.r85.cf2.rackcdn.com/gascript.js"> </ script>

Еще одна вещь, которую вы можете сделать, это не использовать URL внешнего ресурса (он же является сторонним доменом). Вместо использования cdn.superfast.com/file.js вы используете /file.js. Конечно, этот модный CDN может быстрее обслуживать вещи, чем ваш сервер, но поиск домена CDN стоит еще одного поиска DNS, который мы знать может быть очень дорогим для этого первого впечатления.

Я знаю, что я, вероятно, виновен в этом новом в некоторых из моих (теперь) старых проектов. Например, если вы откроете aroundtheworldgame.com он не будет ничего отображать, пока ему не удастся подключиться к maps.googleapis.com и dn4avfivo8r6q.cloudfront.net, но это скорее приложение, а не веб-сайт.

Кстати ... я написал некоторый основной код, чтобы поиграть с тем, как это на самом деле работает. Я решил поднять это, если вы тоже хотите поэкспериментировать с этим: https://github.com/peterbe/slowpage

Предыдущая: Premailer теперь чтит специфику 21 марта 2013 г. Далее: "Вы имели в виду этот домен?" Автокоррекция для адресной строки браузера 05 апреля 2013 г. По ключевому слову: Отложить или асинхронизировать теги JavaScript. Это вопрос. 29 июня 2018 года Как я перестал беспокоиться о блокировке ввода-вывода торнадо 18 сентября 2012 г. Постоянное кэширование с обновлениями «забей и забудь» 14 декабря 2011 Слишком круто для меня? 25 сентября 2011 QUnit тестирует мой сайт jQuery Mobile в самом разгаре 17 марта 2011