LINUX.ORG.RU

Javascript: способов сделать больше, чем в perl? Выполнить код после загрузки страницы.

 ,


0

1

Вопрос такой. Сейчас делаю «тонкого» клиента для restful приложения, соответственно, после загрузки страницы-шаблона должны загрузиться пара json объектов и разместиться по форме страницы.

Мне хочется в конце страницы разместить <script></script> и всё туда накидать. Но во всех мануалах я вижу:

$(document).ready(function(){
код, выполняемый после загрузки
});


Это такое заболевание, которое вызывает любовь к «});», или это только для читабельности, или это ускоряет работу кода, или просто желание делать вообще всё только через события???

Вопрос в чём - как правильнее?

★★★★★

Последнее исправление: Shadow (всего исправлений: 2)

Код, который использует DOM (объекты на странице), надо пихать в document.ready. Код, который не использует DOM, например инициализация переменных, пусть даже и JSON-ом, вполне можно класть в <script></script>.

amomymous ★★★
()
Ответ на: комментарий от amomymous

А почему код в конце страницы всё равно иногда корректно работает с DOM? Это просто случайность?

Shadow ★★★★★
() автор топика
Ответ на: комментарий от Shadow

Я так понимаю, что это особенность работы браузеров, они строят дерево объектов и выполняют скрипты по мере того, как парсят документ. Если к моменту выполнения скрипта объекты уже есть, то все сработает, но полагаться на это не стоит.

amomymous ★★★
()

DOM строится по мере его разбора. Если ты попытаешься найти элемент до того, как он распарсится и окажется в DOM, ты получишь фигу. Если пихать скрипт в конец документа, то все нужные узлы уже будут там.

Пихать инлайн-скрипты плохо, надеюсь, что ты так не делаешь.

И вообще, твой пример для жквери. В общем случае (IE9+) на жабаскрипте это

document.addEventListener('DOMContentLoaded' my_domready_handler_function, false);
anonymous
()
Ответ на: комментарий от anonymous

Запятую верни, машина!

document.addEventListener('DOMContentLoaded', my_domready_handler_function, false);
anonymous
()

$(document).ready(); сильно тормозит. Выше уже писали, что это нужно для того чтобы дождаться готовности DOM. НО если ты размещаешь скрипт сразу перед закрывающимся </body>, то $(document).ready(); даже вреден. DOM к тому моменту уже готов, а «ready» наступит только через пару секунд.

Еще можно писать примерно так:

$(html).on('click', 'a.clickable', function() {
  alert('a.clickable clicked!');
});
Тогда будет работать даже если скрипт в начале страницы. Только у тебя при каждом клике в любом месте документа будет выполняться поиск элемента «a.clickable».

Black_Roland ★★★★
()
Ответ на: комментарий от Black_Roland

то $(document).ready(); даже вреден.
при каждом клике в любом месте документа будет выполняться поиск элемента «a.clickable»

А тогда нафига вот эти коллбэки, события, вот это всё, если можно просто

размещаешь скрипт сразу перед закрывающимся </body>

Это же html, в ней работающая программа уже уродство, поэтому как ни крути - лучше над функционалом и скоростью думать...

Shadow ★★★★★
() автор топика
Ответ на: комментарий от Shadow

есть простая рекомендация которой нужно следовать, стили в хеде, скрипты перед закрывающим body, тогда все что ты там городишь не нужно.

umren ★★★★★
()
Ответ на: комментарий от umren

Дык, я просто ищу примеры в нете и вижу всё наоборот... Понял, спасибо. Так и буду делать.

Shadow ★★★★★
() автор топика
Ответ на: комментарий от Shadow

Это не случайность, можно использовать.

zz ★★★★
()

Часто скрипты бросают одновременно в конец файла, но не потому что думают что это будет гарантировать загрузку DOM. Внутри них все равно правильный ready. Дело в том, что на доступность DOM до ready полагаться по стандарту нельзя.

Почему же кидают кучу script в конец? Просто хотят показать DOM пользователю, а потом начать его колбасить через JS. Иначе все время загрузки, парсинга скриптов и инициализации глобальных обьектов пользователь будет видеть белый лист. Вот этого избегают, так как у пользователя остается субьективное ощущение медленной загрузки страницы.

vertexua ★★★★★
()

Можно взять coffee и написать

$ ->
  # код, выполняемый после загрузки

Минифицировать со всеми зависимостями в один main.js и подгружать его с помощью <script async src='main.js'></script>. И при этом script-тег помещать в <head>. Подробней об async можно почитать здесь и здесь.

А еще лучше вообще рендерить на сервере, если есть такая возможность.

Дело в том, что на доступность DOM до ready полагаться по стандарту нельзя.

Плюсую.

Anatolik ★★
()
Последнее исправление: Anatolik (всего исправлений: 1)
Ответ на: комментарий от Shadow

1. Не всегда удобно куски скрипта высовывать наружу в страницу. И часто это просто невозможно, например для библиотек.
2. Если важна скорость загрузки, то лучше грузить скрипты параллельно со страницей, не дожидаясь пока она отрендерится. И некоторые операции можно тоже до загрузки страницы делать.
3. Вставка скрипта в конец не гарантирует готовность дома.
4. Если надо вставить несколько скриптов, то без флага async они поблочатся и станут выполняться последовательно, а это тоже не всегда хорошо. А если пометить скрипты асинхронными, то без ready нельзя гарантировать их готовность.

В общем, есть много случаев, когда без ready медленно и гиморно. И есть случаи, когда втыкать скрипты в конец дешево и сердито. Надо прочто хорошо представлять, какого профита хочется достись в конкретном случае.

Vit ★★★★★
()
Ответ на: комментарий от Deleted

Но когда я гуглил, чуть ли ни каждый третий пример таким страдал. Вот я и решил, что такое - «хороший тон».

Shadow ★★★★★
() автор топика
Ответ на: комментарий от vertexua

Дело в том, что на доступность DOM до ready полагаться по стандарту нельзя.

Реквестирую пруф.

Deleted
()
Ответ на: комментарий от Shadow

Вполне возможно, что они решали какую-то иную задачу, иначе это несколько странно.

Deleted
()
Ответ на: комментарий от Shadow

А тогда нафига вот эти коллбэки, события, вот это всё, если можно просто

При написании плагина с автоинициализацией нельзя полагаться на то, что скрипт будет всегда в конце, кто-то может и в head подключить. Этот как один из примеров.

Black_Roland ★★★★
()
Ответ на: комментарий от vertexua

Они так делают просто чтобы не париться. Потому что асинхронную загрузку с нужными приоритетами сделать сложнее и не всегда надо.

А чтобы юзер не видел белую страницу, достаточно CSS в начало и до скриптов поставить. Тело страницы при любом раскладе скачивается в первую очередь. Потом то что в теле и потом то что навтыкали скриптами.

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

Vit ★★★★★
()

Что за бред? Кто ж так на jQuery пишет? Там просто

$(completedHandler);

completedHandler = function(){console.info("Страница загружена")};

menangen ★★★★★
()
Ответ на: комментарий от Deleted

С кликами это вообще не проблема. Это ж не скроллинг и не мышевозилово.

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

Vit ★★★★★
()
Ответ на: комментарий от Shadow

Дом строится браузером определённое время. Если это время меньше времени компиляции js и запуска его в твоей v8/spider monkey машине, то всё будет работать хорошо, но чаще всего запуск js кода выполняется раньше создания дерева Дом, и весь код js, который использует элементы из Дом (кнопки, заголовки, таблицы) не может получить доступ к ним, т.к. они ещё не созданы браузером для доступа v8 к dom.

menangen ★★★★★
()
Ответ на: комментарий от anonymous

Книги дэвида фланагана и документация по v8.

menangen ★★★★★
()

Делай проще: грузи в iframe и оттуда выполняй жабкоскрипт. Не извращайся дополнительной подгрузкой жабкоскрипта.

anonymous
()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.