将javascript数据放在html：内联脚本或数据属性中？

Question

我需要将一些带有html页面的数据发送到浏览器，这将由javascript使用（诸如用户详细信息之类的东西）。 我看到了两种方法来做，但我想知道哪种方法更好（减少浏览器的阻塞，提高性能）：

1. html中的内联脚本：

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

2. html中的data属性：

<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...}

我知道内嵌脚本标签将阻止浏览器，另一方面，它们的解析速度可能比我稍后在javascript中进行解析时要快得多。

Answer 1

一种想法是，如果您确实不想使用Ajax，则考虑对要与页面一起发送的数据使用<script type="application/json"></script> 。 然后编写一个脚本，该脚本在页面加载时从页面中获取所有json作为附加页面数据非常容易。 这样做的好处是推迟了执行的时间，不会将数据直接注入全局范围，也不会在服务器端生成JavaScript。

Answer 2

至少就您的用户而言，性能几乎没有区别。 使用<script>标记会更清洁，所以我会说。

添加脚本（外部或内部）的最佳方法是将它们放在body标签的底部。 这将延迟脚本的执行，直到加载整个DOM，这不仅可以提高感知的性能，而且在大多数情况下，您不需要DOMContentLoaded回调即可获取元素。

Answer 3

如果数据与DOM元素直接相关，那么我将使用第二种方法...但是，如果数据是独立的，则第一种方法将是我的工作方式。

两者都不会影响性能-浏览器没有“阻塞”。