如何提高Javaｓｃｒｉｐｔ代码的性能

本来在写代码的可维护性总结性能的代码，几天，也决定更新一篇文章，每一天，因为我欠了太多不总结，学会不去总结真的很快忘记它记录在你的大脑留下了深刻的印象，特别是代码的可维护性，性能什么时候在你的头脑中，形成一种习惯，你！这里还有一个给初学者的建议：总结一下你学到了什么，因为它其实是学习新知识的。好了，进入我们的主题：如何提高js代码的性能。
1。优化的DOM交互

DOM与我们的页面密切相关。浏览器呈现页面是在解析之后呈现的DOM元素。DOM操作和互动，消耗大量的时间，因为他们经常需要重新渲染整个页面或部分。进一步说，一些看似细微的行动也会花很多时间来执行，因为DOM有很多信息要处理，所以我们应该优化DOM相关的操作尽可能加快网页浏览器的渲染。为什么一些DOM操作影响页面的性能，可以看看我写的一些关于浏览器的文章：

好的，我们有几种方法来优化DOM操作。

1.1站点更新最小化

DOM的实时更新是什么：它需要立即更新，对已在DOM部分页面显示部分显示。但是，每一次改变，无论是插入一个字符或一个片段，有一定的性能损失，因为浏览器需要重新更新，无数的大小。越来越多的网站更新，较长的代码，和更快的执行代码，如下：
var list = document.getelementbyid（'mylist），
项目，
我；
对于（i = 0；i < 10；i + +）{
项目= document.createlement（李的）；
list.appendchild（项目）；
item.appendchild（document.creattextnode（'Item' +我））；
}
此代码添加为mylist 10项的列表，没有添加一项到2更新的场景：添加元素并添加一个文本节点，那么这个操作是一个需要完成20个站点的更新，每次更新都会失去性能，可见此代码运行缓慢。

解决方案是通过使用文档片段间接更改DOM元素：
var list = document.getelementbyid（'mylist），
片段= document.creatdocumentfragment（），
项目，
我；
对于（i = 0；i < 10；i + +）{
项目= document.createlement（李的）；
fragment.appendchild（项目）；
item.appendchild（document.creattextnode（'Item' +我））；
}
list.appendchild（片段）；
这样的代码，只需要一个网站更新。记住，当文档片段是通过appendChild（），只有在文档片段的子节点添加到目标元素，和片段本身并不增加。

现在，你应该明白，你使用周期直接DOM节点增删改如何浏览器对不起`（一_ U）。

1.2使用innerHTML

In addition to the method of combining creatElement () and appendChild () used in the above code to create a DOM element, it is also created by assigning a value to the innerHTML.For small DOM changes, the efficiency of the two methods is almost the same, but for a large number of DOM nodes, the latter is much faster than the former.Why do you pinch it

因为当我们分配到innerHTML，背景将创建一个HTML解析器，然后使用DOM创建DOM的内部结构，而不是基于DOM调用Javaｓｃｒｉｐｔ，因为内部的方法是编译而不是解释，所以代码快很多！

重写上面的例子innerHTML：
var list = document.getelementbyid（'mylist），
html = ，声明一个空字符串
我；
对于（i = 0；i < 10；i + +）{
HTML = 'Item' +我+；
}
list.innerhtml = / / HTML；这里记得innerHTML HTML四后面的字母为大写！
这种方式也只有一个现场更新，性能比上一个更好，虽然字符串的连接上有一些性能损失。

1.3使用事件代理事件委托

事件处理程序为Web应用程序提供交互功能，所以许多开发人员会不加区别地向页面添加一个处理程序，这是一个问题，事件处理程序的页面将直接关系到页面的整体性能。为什么要捏它呢

首先，事件处理程序对应至少一个函数。js中的每个函数都是一个对象，它占用内存。内存中的对象越多，性能就越差。

其次，我们必须预先指定所有事件处理程序，这会导致DOM访问时间的增加，这将延迟整个页面的交互时间，而页面对用户操作的响应相对较慢。

因此，减少事件处理程序也可以使我们的页面更好！使用事件委托是必要的。

事件委托的原则实际上是一个事件冒泡，只有一个事件处理程序可以管理所有的某种类型的操作事件。例如：单击事件已经出现文件的水平，也就是说我们不需要添加的每个元素的事件，只需要添加事件处理程序可在一个更高层次的元素，然后使用事件对象（事件）的属性或方法来判断当前点击的元素，然后做出相应的反应。我不谈论它。初学者可以自己查找事件。

2。范围很重要

当谈到范围啊，很容易想到的范围链（作用域链），我们知道如何寻找一个变量，执行环境应沿此变量的搜索范围，有很多的范围链变量，那么我们必须遍历需要时间，和更多的你找到更多的时间，如果我们能减少这一时间，我们可以提高代码的效率，是不是

太聪明了，好吧，我看看我这次能减少些什么：

2.1避免全局查找

这是性能优化的重点，它还指出，您查找时间越多，找到全局变量和函数的次数就越多：
功能updateui（）{
VaR IMGS = document.getelementbytagname（'img）；
对于（var i = 0，LNG = imgs.length；我< LNG；i++）{
我imgss { }。标题= document.title +图像+我；
}
var msg = docuement.getelementbyid（'msg）；
msg.innerhtml =更新完成。；
}
This code is normal!我以前经常这样做，但是我们可以仔细找到，这个代码有三个引用全局变量的文档，如果我们页面上有很多图片，那么for循环中的文档将执行数百次，每次需要查找范围链时，时间都到哪里去了，我没有…停止..！。

我们可以在函数中创建一个局部变量来保存对文档的引用，这样我们就不需要运行全局变量来引用函数中任何地方的文档，这提高了代码的性能，并查看了代码：
功能updateui（）{
文档将存储在本地变量文档中。
VaR IMGS = doc.getelementbytagname（'img）；
对于（var i = 0，LNG = imgs.length；我< LNG；i++）{
我imgss { }。标题= doc.title +图像+我；
}
var msg = doc.getelementbyid（'msg）；
msg.innerhtml =更新完成。；
}
因此，在开发中，如果我们经常在函数中使用全局变量，则将其保存在本地变量中！

2.2避免使用语句

使用语句扩展范围，同时查找变量，我们一般不使用，所以不要扩展！

三.最佳周期

循环是编程中常见的一种做法。它在JS中随处可见。循环执行重复执行相同的代码，执行时间累积。因此，优化圆形体的编码也可以大大缩短执行时间。如何优化四条道路。

3.1减少迭代

我们编写一般方法的迭代器（条件）（VaR I = 0；i < 10；+ +），从0开始，增加到一定的值。然而，在许多情况下，使用一个贬值的迭代器在循环中效率更高。我测试它，如果循环不复杂，两个近似相同！
值迭代——低效率
对于（var i = 0；i < items.length；i++）{
DoSomething（项{我}）；
}
迭代-高效率的/损害
对于（var i = items.length - 1；我> = 0；我--）{
DoSomething（项{我}）；
}
3.2简化的终止条件

由于每个周期都要计算终止条件，所以必须确保其执行尽可能多，这主要是为了避免查找其他DOM元素及其属性。
参见终止条件，每个周期都需要查询项和长度属性。
对于（var i = 0；i < items.length；i++）{
DoSomething（项{我}）；
}

items.length / /将保存局部变量的液化天然气的价值。
对于（var i = 0，LNG = items.length；i < LNG；i++）{
DoSomething（项{我}）；
}
3.3简化循环体

原因及以上，避免了流通机构的大量集约化经营。

这实际上是上面提到的：1.1尽量减少网站更新。这是相同的优化方式。你可以回去看看。

4。基本算法的优化

在计算机中，算法的复杂性用o表示：

o（1）：常量，不管有多少个值，执行时间是恒定的，例如简单值和存储在变量中的值。

O（log n）：对数，总执行时间和数量，但不一定要得到每个值，例如：二分法查找

O（n）：线性，与总执行时间和数量直接相关，如：遍历

O（n * n）：平方，总执行时间和数量，每个值至少是n次，如：插入排序

好的，根据上面的知识，我们可以优化Javaｓｃｒｉｐｔ的一些算法：
VaR值= 5；
var总和=值+ 10；
警报（和）；
这个代码执行4个常量值：一个数字5，一个变量值，一个数字10，一个变量和，这个代码的算法复杂度是O（1）：
VaR值= { 10,5 }；
var =值{ { 0 } } +值{ 1 }；
警报（和）；
在Javaｓｃｒｉｐｔ中访问数组元素也是O（1）操作，与简单的变量查找效率相同。
VaR值= {一}：10：10，两；
VaR和= value.one + value.two；
警报（和）；
它表示访问对象上的属性比访问数组和变量的效率要低。因为这是一个O（n）操作。您需要在对象的原型链中找到这个属性，而且需要更多的时间。

好吧，看看这是不是光的感觉。实际上，我们前面提到的是在局部变量中保存常用的全局属性。根据这个原则，访问全局属性是一个O（n）操作，访问变量是O（1）的操作。大声告诉我，挖掘机在哪里

5。最小化语句数

上面提到的优化几乎都与精简优化语句有关。是的，我认为代码的质量和数量是性能的标准，前面提到了一些与代码质量相关的优化，并讨论了代码数量的优化。

5.1简化变量声明
在5 5变量声明语句中
var计数= 5；
VaR的颜色'；
VaR值= {1,2,3}；
var现在=新日期（）；

在1个语句中声明5个变量，每个变量用逗号分隔。
var计数= 5，
颜色='，
价值= {1,2,3}，
现在=新日期（）；

5.2使用数组和对象文字
创建两个对象——没有好方法
四个语句
var =新数组（）；
值{ 0 } = 123；
值{ 1 } = 456；
值{ 2 } = 789；
24个语句
var =新对象（）；
person.name = 'jozo；
person.age = 21；
person.sayname =函数（）{
警报（这个名字）；
}；
创建两个对象——推荐的方式
1个语句
var值= { 123456789 }
两个1个语句
var
名称：'jozo，
年龄：21岁，
sayname：函数（）{
警报（这个名字）；
}；
6。其他

写累了，如果有不正确的地方请改正哦，还有其他一些优化，下一篇文章要继续！