JS 中的全局变量 vs 本地存储 vs DOM 中的值，哪个更高效？ [关闭]

Posted 2023-02-24

【中文标题】JS 中的全局变量 vs 本地存储 vs DOM 中的值，哪个更高效？ [关闭]

【英文标题】：global variables in JS vs local storage vs values in DOM, which one will be more efficient? [closed]

【发布时间】：2017-05-28 12:05:49

【问题描述】：

javascript中的全局变量与页面文档中的值或本地存储中的值有什么区别？

考虑到大量变量，如果我需要将一些变量从像 php 这样的服务器端语言发送到像 Angular/jquery 这样的文件这样的前端技术，哪一个会更好？ p>

对页面性能会有什么影响？

【参考方案1】：

全局变量

全局变量存储在内存中并附加到 window 对象。如果您要使用大量变量，那么最好创建一个命名空间对象来充当容器。使用全局变量的一个问题是，如果发生名称冲突，它们很容易被覆盖。

这是一个简单的 myNamespace 对象的非破坏性创建：

var myNamespace = window.myNamespace || ;
myNamespace.variable = 'Some value';

根据您的情况，您可能希望通过使用服务器端应用程序生成 JSON 并将其插入到脚本片段中的 html 中来填充命名空间。

看到您用 PHP 标记了您的问题，我将使用 PHP 的 json_encode 添加一个小示例：

<?php
  $book = array(
    "title" => "Eloquent JavaScript",
    "author" => "Marijn Haverbeke",
    "edition" => 2
  );
?>
<script>
var myNamespace = '<?php echo json_encode($book, JSON_PRETTY_PRINT) ?>';
/* var myNamespace = 
    "title": "Eloquent JavaScript",
    "author": "Marijn Haverbeke",
    "edition": 2
  ;
*/
</script>

JSON_PRETTY_PRINT 参数是可选的，它通过添加许多您可能不想要的空格以可读格式打印 JSON。使用这种方法，一旦浏览器解析了 JavaScript，代码命名空间对象就会被填充。

另一种方法是使用函数来填充命名空间对象。在下面的代码片段中，myNamespace 被分配了由接收参数命名空间的 IIFE 返回的值。参数的值是 window.myNamespace 或空对象，具体取决于之前是否声明了 myNamespace。在这个函数中，AJAX 调用可用于填充命名空间对象的属性。

var myNamespace = (function(namespace) 
  namespace.a = (function()  return ... )();
  namespace.b = (function()  return ... )();
  return namespace;
)(window.myNamespace || );

使用 AJAX 填充命名空间会增加加载内容的网络请求数。

DOM 值

DOM 值是 HTML 代码中的所有内容，包括属性。

<img src="path/to/image.jpg" id="myId" class="myClass" title="My title" data-owner="Joe Bloggs" data-year="2017" />

DOM 元素有一个 attributes 属性，它包含所有的属性名称和值。检索数据将比直接从全局变量中获取数据要慢，因为每个document.getElement... 调用都意味着遍历 DOM 树。

var attrs = document.getElementById('unique-id').attributes;
// returns NamedNodeMap 0: id, 1: class, 2: data-owner, 3: data-year, 4: title ...

Array.prototype.slice.call 可以将结果转换为可以迭代的数组：

Array.prototype.slice.call(document.getElementById('myId').attributes)
    .forEach(function(item) 
      console.log(item.name + ': '+ item.value);
    );

// class: myClass
// data-owner: Joe Bloggs
// data-year: 2017
// id: myId
// src: path/to/image.jpg
// title: My title

本地存储

localStorage 是应用了同源规则的持久键/值存储，以避免您需要使用相同的协议和域来访问共享的 localStorage 的问题。网络浏览器中“私人浏览”的不同实现意味着您不能依赖该功能可用并按预期工作。

来自 Zendesk 的 cross-storage 包允许您跨域共享 localStorage。

性能

全局变量 > DOM 值 > LocalStorage > AJAX

全局变量在内存中。 DOM 值意味着走树可能会很慢。 Lo​​calStorage 表示读取/写入磁盘。 AJAX 请求意味着您有额外的网络延迟。

【讨论】：

感谢您的意见

【参考方案2】：

按效率排序：

JS 全局变量 DOM localStorage 和 sessionStorage

DOM 和 Javascript 全局变量都存储在 RAM/系统内存中。全局变量本质上只是结构非常少的原始存储，因此速度非常快。 DOM 是高度结构化的，每当它发生变化时，它都会发出一系列事件——这些事件（例如触发样式更新和mutation events/ 突变观察者）会增加开销。

无论何时关闭网页（或关闭浏览器或关闭设备），它们都会完全销毁。

然而，localStorage 存储在硬盘上。它具有每次使用时都会写入磁盘的所有开销，但它是持久 - 如果浏览器关闭或设备关闭，您放入其中的数据仍然可用.它最适合用于例如缓存文件。

Javascript 中的大多数数据是完全临时的，所以大多数时候，您会使用全局变量。

【讨论】：

感谢您的意见

sessionStorage 呢？它与 globals 和 localStorage 相比如何？

【参考方案3】：

全局变量->值可以在js或者页面中访问 Lo​​calstorage -> 可以在整个应用程序（所有页面）中访问值。

【讨论】：

全局变量与本地存储的好方法。

【参考方案4】：

更多的是需求问题。如果您想在所有页面中使用这些值并在不同会话之间持久化，那么建议使用localStorage。但是，如果您希望在会话之间销毁数据，建议使用 sessionStorage。如果您不想要 DOM 的开销，那么您可以使用变量。您可以从 DOM 中初始化它们，但不要从 DOM 中重复读取。

【讨论】：

感谢您的意见

@Abhishek 欢迎您。请接受其中一个答案，以便将来的访问者立即看到问题已解决。

这里所有的答案都很棒，我现在接受一个在本质上更具解释性的答案。

@Abhishek，谢谢，接受的答案确实很好。