поместить данные javascript в скрипт html: inline или атрибуты данных?

Question

Мне нужно отправить некоторые данные со страницы html в браузер, которые будут использованы JavaScript (такие как данные пользователя и т. Д.). я вижу два способа сделать это, и мне интересно, какой из них лучше (меньше блокирует браузер, лучше работает):

1. встроенный скрипт в html:

<script>var userData = {username:'joe',age:42,pet:'dog'}</script>`

атрибут 2.data в html:

<div id="user-data" style="display:none" data-username="joe" data-age="42" data-pet="dog"></div>` and code in external javascript file: `function getUserData() {..this extracts the data from the div and caches it...}

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

Answer 1

Одна из идей - рассмотреть возможность использования <script type="application/json"></script> для данных, которые вы хотите отправить вместе со своей страницей, если вы действительно не хотите использовать ajax.Затем довольно легко написать скрипт, который захватывает весь json со страницы как дополнительные данные страницы при загрузке страницы.Преимущества в том, что вы отложили выполнение, вы не вводите данные напрямую в глобальную область и не генерируете JavaScript на стороне сервера.

Answer 2

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

При этом производительность не снижается - нет «блокировки» браузера.

Answer 3

Практически нет разницы в производительности, по крайней мере, в отношении ваших пользователей.Использование тегов <script> было бы намного понятнее, поэтому я бы сказал, что так и есть.

Лучший способ добавить сценарии (внешние или внутренние) - поместить их в конец тега body.Это будет задерживать выполнение сценариев до тех пор, пока не будет загружена вся DOM, что не только повышает воспринимаемую производительность, но в большинстве случаев вам не понадобятся DOMContentLoaded обратные вызовы для получения элементов.