我正在实现一个nokia/google地图，我必须在其中存储500个标记。我通过循环遍历php数组并使用数据属性将其放入无序列表来接收信息（名称、纬度、经度、标记组和图像）。然后我使用jQuery循环遍历那些li元素，并用标记信息填充地图。
这很好，但在dom中有一个包含500个隐藏元素的列表似乎是我在性能问题上的开销。
在使用内联javascript和php元素将标记直接插入地图之前，这对我来说是一种糟糕的做法，因为我必须在不同的情况下使用地图，而且我有很多重复的代码。
现在，有没有比拥有500个包含所需标记信息的dom元素更好的方法来存档呢？
一些想法：
1） 我可以创建一个包含所有500个标记信息的JSON数组，并将其保存在一个数据属性中。不确定是否存在一些浏览器限制，因为对于单个数据属性来说，这是一个巨大的数据量。此外，由于json编码/解码，性能可能会更差。
2） 我可以创建一个带有所需标记信息的JSON/XML/KML文件，并通过AJAX访问该文件。在我的情况下，这是一项更大的工作，ajax请求可能比dom解析需要更长的时间。
3） 再次使用内联JS（在我的案例中，由于缺乏可重用代码，这确实是一种糟糕的做法。）
有什么想法吗？有人测试过类似的案例来检查性能吗？
我认为您在这里有一些选择，并且您已经在脑海中有了一些。在我看来，AJAX是最具语义的选项，将来会给您带来更少的问题。
为了提高性能，您可以尝试减少重新绘制事件。考虑在添加500个标记之前隐藏整个地图，并在添加完成后显示它们。
例如，为了便于使用，您可以显示加载gif。
它已经帮了我很多。
正如@DoXicK所说，如果你的标记是静态内容，你可以使用JSONP策略在你的身体中导入脚本标记。
将json直接输出到脚本标记中是最简单的选项：
<script>
var data = <?php echo json_encode($data);?>;
</script>
但是ajax也是一个简单的jquery：
var data;
$.get('somefile.php', function(data){
data=data;
});
somefile.php：
header('Content-Type: application/json');
echo json_encode($data);