把javascript数据放入html：inline脚本或数据属性中？

我需要将一些数据与html页面一起发送到浏览器，这些数据将被javascript（像用户的详细信息等）所使用。我看到两种方法可以做到这一点，我不知道哪一个更好（块浏览器少，性能更好）：把javascript数据放入html：inline脚本或数据属性中？

1.inline脚本的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...}

我知道，内嵌脚本标签将阻止浏览器，而另一方面，他们很可能是解析时相比，我将做到这一点在JavaScript后快得多。

来源

2012-03-14 gabor

如果您正在进行严肃处理（您不是）或正在发出HTTP请求（数据是内联的，所以您没有），则阻塞仅起作用。 – Quentin 2012-03-14 13:09:15

数据似乎并不是关于div元素本身，所以它肯定没有意义。 – Quentin 2012-03-14 13:09:51

你的两个选择是注射和阿贾克斯，我会推荐阿贾克斯。 – jbabey 2012-03-14 13:11:03

如果你真的不想使用ajax，你可以考虑使用<script type="application/json"></script>来与你的页面一起发送数据。然后编写一个脚本，在页面加载时抓取页面中的所有json作为附加页面数据，这非常容易。您获得的好处推迟了执行，您不会将数据直接注入全局范围，也不会在服务器端生成JavaScript。

来源

2012-03-14 13:19:46

这很好。但如果数据包含用户提交的数据，则正确地转义数据很重要。你基本上必须用'\ u003c \ u002f'替换''}' – gabor 2012-03-16 09:33:03

性能几乎没有差异，至少就您的用户而言。使用<script>标签会更干净，所以我会说这样做。

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

来源

2012-03-14 13:11:42

该代码只是将数据分配给一个变量。不涉及DOM操作，因此在DOM准备就绪之前不需要延迟执行。 – Quentin 2012-03-14 13:14:09

@Quentin我们不知道其他地方的代码是否可以这样做，但无论如何，这是一个好习惯。 – 2012-03-14 13:15:43

这通常是正确的做法，但有很多例外。一切都需要在上下文中进行。 – Quentin 2012-03-14 13:19:48

如果数据直接关系到一个DOM元素，那么我会使用第二种方法......但是，如果该数据是独立的第一种方法将是这样，我会去....

有没有任何性能问题 - 浏览器没有“阻塞”。

来源

2012-03-14 13:27:59 ManseUK

把javascript数据放入html：inline脚本或数据属性中？

回答

相关问题