即使在当今时代，当硬件性能得到显着提升时，遵循Javascript规范并在编写JavaScript代码时注意一些性能知识有助于提高可维护性并优化代码性能。接下来，我们将介绍一些提高JavaScript性能的方法。
我强烈推荐一些编写高性能JavaScript的技巧。
介绍
随着计算机硬件不断升级，许多开发人员忽略了一些性能知识，因为他们认为JavaScript的性能优化对于网页的执行效率并不明显。但是，在某些情况下，未经优化的JavaScript代码不可避免地会影响用户体验。因此，即使在重要的硬件电流改进时，如果您遵循Javascript规范并在编写JavaScript代码时注意一些性能知识，那么提高可维护性和优化代码性能将是一个很大的帮助。接下来，我们将介绍一些提高JavaScript性能的方法。
1，加载并运行JS文件
（1）将标签贴在标签的底部。
（2）合并多个js文件会降低页面的标签性能。
（3）使用defer属性，加载后续文档元素的过程在加载script.js的同时完成，但在解析完所有元素之后，script.js在DOMContentLoaded事件发生之前完成。
（4）使用async属性加载和呈现后续文档元素的过程与加载和执行script.js同时完成。
（5）当骰子启动时动态加载脚本文件，文件下载和执行过程不会阻止页面上的其他进程。
Var script=document.createElement（'script'）；
Script.type='text/javascript'；
Script.src='file.js'；
document.getElementsByTagName（'head'）[0] .appendChild（script）；
2.深化标识符所在的范围链
带标识符的作用域链的范围越深，标识符解析性能越慢。因此，改进性能的启发式规则是：如果在函数中多次引用跨范围值，请将其存储在局部变量中。函数fun1（）{
//通过在局部变量中存储对全局变量的引用，然后使用此局部变量而不是全局变量来改进
//表现；否则，它将在整个范围链中每次遍历（3次）。
Document var doc=document；
Var bd=doc.body；
Var link=doc.getElementsByTagName（'a'）；
doc.getElementById（'btn'）。 onclick=function（）{
Console.log（'btn'）；
}
}
3，避免过长的原型链继承
原型链中的方法或属性越深，搜索越慢，因此避免使用N层原型链。
4，对象成员嵌套太深
嵌套的对象嵌套成员对象越多，读取越慢。因此，根据我的经验，最好的规则是：如果您的函数需要多次读取对象属性，则最好将属性值存储在局部变量中，以避免多次查找的性能开销。
函数f（）{
//DOM对象属性在以下函数中使用了3次，因此它们首先存储在局部变量中。
//in使用此本地变量为您的下一个继任者提高性能。
Var dom=YaHOO.util.Dom；
If（Dom.hasClass（element，'selected'））{
Dom.removeClass（elemet，'selected'）；
和其他人{
Dom.addClass（elemet，'selected'）；
}
}
5，DOM操作
使用js访问和操作DOM会降低性能。
（1）尽量减少DOM访问次数。
（2）如果需要多次访问DOM节点，请使用局部变量来存储引用。
（3）您必须小心处理HTML集合，因为它们实时链接主文档。我们可以将集合的长度缓存为变量并重复使用它。
（4）重新排序发生在：
要添加或删除可见的DOM元素，请参阅JavaScript系统学习DOM系列文章了解DOM节点关系。
元素位置变化；
更改元素大小（包括边距，填充，边框粗细，宽度，高度等）；更改内容（例如，文字更改或照片由另一张不同尺寸的照片更改）；
页面渲染器初始化；
更改浏览器窗口大小
重新排序可以减少到
注意并避免上述工作，这将导致重新安排。
获得布局信息后，将重新排列强制渲染队列。例如，要获取offsetTop，offsetLeft，offsetWidthoffsetHeight，``scrollTop，scrollLeft，scrollWidth，scrollHeight，clientTop等布局信息，您应该避免使用以下工作方法或属性或缓存布局信息。clientLeft，clientWidth，clientHeight，getComputedStyle（）等；
如果你是批量编辑样式，我建议修改类来做这样的事情：
函数f（）{
//我们建议使用
Var el1=document.getElementById（'mydiv'）；
el1.className='mydiv'；
//不推荐
Var el2=document.getElementById（'mydiv'）；
El2.style.border='1px'；
El2.style.padding='2px'；
El2.style.margin='3px'；
}
.mydiv {
边界: 1px；
填充: 2px；
保证金: 3px；
}
如果您需要批量修改DOM，可以按照以下步骤减少重绘和重新排列的次数：
从文档流创建元素（请参阅JavaScript系统以学习DOM系列中的隐藏元素，复制元素，DocumentFragment，DocumentFragment）
应用多项更改。
将元素导入文档
使用事件委托，因为提供了DOM元素（事件可以按层次结构冒泡并由父元素捕获。事件代理允许您将处理程序绑定到外部元素并处理子元素中使用的事件。）是）。事件绑定以及浏览器跟踪每个事件处理程序的需求会消耗性能。
6，挂绳连接
Str +='1'+'2'；
Str=str +'one'+'two'；
后一种方法产生的临时字符串比前者少，因此建议使用后者，因为性能会相应提高。7，字面直接使用
使用文字是创建文字和数组的好主意。使用文字不仅可以优化性能，还可以节省代码。
Var obj={
名称:'汤姆'，
年龄: 15，
性别:'男性'
}
8，数组长度缓存
如果需要遍历数组，则应首先缓存数组的长度，将数组的长度放在局部变量中，而不是多次查询数组的长度。
For（letlet i=0，len=arr.lenght； i＆lt； len； i ++）{
.
}
9，循环比较
JS提供了三种循环：for（；），while（），for（in）。因为你必须查询散列键，所以（in）是这三个循环中效率最低的，因此对于（in）循环应该很少使用，而for（；），while（）循环的性能基本上是平的。
10，少用评价
您可以尽可能少地使用eval，每次使用eval都需要花费大量时间，但是您可以使用JS当前支持的闭包来实现函数模板。
11，字符串转换
如果需要将数字转换为字母，请使用以下方法： ''+ 1在性能方面，将数字转换为字母时，我有以下公式： （''+）＆gt；
String（）＆gt；
.toString（）＆gt；
新字符串（）。 String（）是一个内部函数，所以它很快。toString（）尝试查询原型中的函数，因此速度变慢.New String（）需要重新创建最慢的字符串对象。
12，整形浮点数转换
如果需要将浮点数转换为整数，则应使用Math.floor（）或Math.round（）。此方法不是使用parseInt（），而是将字符串转换为数字。由于Math是一个内部对象，Math.floor（）实际上并没有很多查询方法和调用时间，而且它是最快的。
上海IT外包服务网 链接：http://www.linemore.com
中文
电话咨询
微信咨询
公众号
