探索Javaｓｃｒｉｐｔ的效率

javaｓｃｒｉｐｔ是一种非常灵活的语言，我们可以编写各种风格的不同风格的代码，不可避免地会导致代码效率的差异，在开发过程中会接触到很多提高代码性能的方法，通常比较整齐，容易避免常见问题的出现。

自执行效率

作用域链，封闭特征原型继承，EVAL等在Javaｓｃｒｉｐｔ，提供各种神奇的功能，但也带来了各种各样的效率问题。粗心会导致执行效率低下。

1。全球进口

我们将使用更多或更少的全局变量，在编码过程中（窗口、文档、自定义等，Javaｓｃｒｉｐｔ的全局变量的作用域链）了解的人都知道，在局部范围内访问全局变量通过直接从范围上的范围链需要一层一层，和局部变量的访问效率是将以更快的速度和更高的，所以一些全局对象的高频率在局部范围内使用可以导入到本地范围，例如：

复制代码代码如下所示：

1，作为参数传入模块

函数（窗口，$）{

var = window.xxx XXX；

$（# XXX1）。Xxx（）；

$（# XXX2）。Xxx（）；

}（窗口，jQuery）；
2，对局部变量的临时存储

函数（）{

文档；

全局变量= window.global；

}
2、评价和评估等问题

我们都知道评价可以为JS代码执行字符串。据说执行eval代码比不使用eval代码慢100倍。

Javaｓｃｒｉｐｔ代码会执行之前的操作类似于预编译：首先创建当前对象的执行环境，并与VaR声明的变量设置为活动对象，但这一次，这些变量的赋值是不确定的，和那些与函数定义也添加到活动对象的属性，和他们的值是函数定义，然而，如果你使用eval，在eval代码实际上是不能够提前认识到它的上下文，它可以不进行分析和优化的提前，即没有预操作无法完成。因此，它的性能将大大降低。

事实上，eval很少使用了。在这里我想说两类eval（新功能{ }，setTimeout，setinterver）。

复制代码代码如下所示：

settimtout（警报（1）

setinterver（警报（1）

（新函数（（1）））（）；
这些类型的代码执行效率低，所以建议直接匿名方法或参考方法setTimeout方法。

三.释放关闭后不再引用的变量。

复制代码代码如下所示：

函数（）{（）

var a = {姓名：var3}；

var b = {var1

var c = document.getelementbytagname（礼）；

其他变量

操作

函数（）{（）

警报（a.name）；

}

返回水库；

}）
上面的代码是返回值的变量F立即返回闭包函数在一个水库，变量将保留所有关闭的变量（A，B，C）的参考，所以这两个变量将永远驻留在内存空间，尤其是在参考DOM的内存消耗元素将是很大的，我们在研究只使用一个变量的值，因此，在返回之前引入其他变量释放闭合

复制代码代码如下所示：

函数（）{（）

var a = {姓名：var3}；

var b = {var1

var c = document.getelementbytagname（礼）；

其他变量

操作

在返回未使用变量的发布/关闭之前

b =；

函数（）{（）

警报（a.name）；

}

返回水库；

}）
js操作DOM的效率

在web的开发过程中，前端执行效率的瓶颈始终在DOM操作上。DOM操作是非常昂贵的事情。如何在DOM操作过程中保存性能

1，减少回流

什么是回流焊

当DOM元素变化的特性（如颜色），浏览器通知渲染调整相应的元素，这是所谓的重绘。

如果更改涉及元素布局（如宽度），浏览器丢弃原始属性，重新计算并传递结果以呈现重新描述页面元素，这称为回流。

减少回流的方法

首先从文档中删除元素，然后完成修改并将元素返回到原来的位置。当对某一元素及其子元素进行回流操作时，1,2的两种方法将产生更明显的效果。

将元素的显示设置为零，然后在修改完成后将显示更改为原始值。

在修改多个样式属性时，定义类类，而不是多次修改样式属性（由某些建议）

使用documentfragment向页面添加大量元素时

例如

复制代码代码如下所示：

对于（var i = 0；i < 100：+ +）{

VaR的孩子= docuemnt.createelement（礼）；

child.innerhtml =孩子；

document.getelementbyid（母），AppendChild（孩子）；

}
当代码需要多次访问元素的状态信息时，我们可以在状态不变的情况下将它们存储在变量中，从而避免多次访问DOM的内存开销。一个典型的例子是：

在搜索DOM元素时，尽量避免页面元素的大区域遍历，尝试使用精确选择器或指定上下文来缩小查找范围，以jQuery为例。

模糊匹配选择器使用更少的：例如，$（{姓名* = '_fix}），多个选择器$（李。主动），如身份证和逐渐缩小范围，等。

指定背景：例如，$（#母。类），（美元。班

4。使用事件委托

使用场景：大量的记录列表，每个记录都需要绑定点击事件，在鼠标点击时实现一定的功能，这是我们平时对每个记录绑定的事件进行监控的做法，这种方法会导致页面中会有大量事件监听器，效率很低。

基本原理：我们都知道DOM规范中的事件是冒泡的。也就是说，如果任何事情不积极防止起泡，任何元素的事件将出现在顶部根据DOM树结构。事件对象还提供event.target（即是srcelement）指事件源。因此，即使我们在父元素上听到这个事件，我们也可以找到触发事件的最原始元素，这是授权的基本原则。

根据上面描述的监视事件的原理，让我们重写它。

当然，我们不必每次都做事件源的判断，我们可以把它抽象到工具类去做它。

语法是一个$（选择器）。代表（childselector、事件、数据、功能），例如：

复制代码代码如下所示：

$（div）。委托（）按钮

$（p）。SlideToggle（）；

}）；
参数描述（从w3school）

参数描述

childselector是必要的。它指定一个或多个事件处理程序添加子元素。

事件是必需的。指定一个或多个事件附加到一个元素。多个事件值被一个空格分隔。它必须是一个有效事件。

数据是可选的。指定传递给函数的附加数据。

函数是必需的，一个函数指定当事件发生时运行的函数。

提示的另一个优点：事件委托是，即使在事件绑定之后，也可以监视由动态添加的元素触发的事件，以便在动态添加到页面时不需要将事件绑定到每个元素。