JS中的全局变量vs本地存储与DOM中的值,哪一个更有效？

Question

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

如果我需要将一些变量从服务器端语言(如php)发送到前端技术(如Angular/jquery文件,考虑到大量变量),哪一个会更好？

什么会对页面性能产生影响？

Answer 1

全局变量

全局变量存储在内存中并附加到窗口对象.如果您要使用大量变量,那么最好创建一个名称空间对象来充当容器.使用全局变量的一个问题是,如果存在名称冲突,则可以轻松覆盖它们.

这是一个简单的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是应用了相同原始规则的持久性密钥/值存储,以避免使用相同协议和域访问共享localStorage所需的问题.Web浏览器中"私有浏览"的不同实现意味着您不能依赖可用的功能并按预期工作.

Zendesk 的交叉存储包允许您跨域共享localStorage.

性能

全局变量> DOM值> LocalStorage> AJAX

• 全局变量存在于内存中.
• DOM值意味着走树可能很慢.
• LocalStorage意味着读/写磁盘.
• AJAX请求意味着您有额外的网络延迟.

Answer 2

为了提高效率:

• JS全局变量
• DOM
• localStorage和sessionStorage

DOM和Javascript全局都存储在RAM /系统内存中.Globals基本上只是原始存储,结构非常少,使得它们非常快.DOM是高度结构化的,每当它发生变化时,它就会发出一系列事件 - 这些事件(例如触发样式更新和变异事件 /变异观察者)会增加开销.

当网页关闭时(或者每当浏览器关闭或设备关闭时),它们都被完全破坏.

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

Javascript中的大多数数据都是临时的,因此大多数情况下,您都使用全局变量.

Answer 3

• 全局变量 - >可以在js或页面中访问值
• Localstorage - >可以在整个应用程序中访问值(所有页面).

Answer 4

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