在做项目的过程中，我们有时会遇到页面长时间加载的情况，严重影响用户体验。虽然有时候可能是因为网络问题，有时候是因为前端代码优化不够。因此，在查阅相关数据和练习后，总结以下知识点以提高成绩。如有不妥，望各路大神指点指点。

1.数据存取

1.将所有脚本标签尽量放在靠近body标签的底部，这样可以最大限度地减少对整个页面下载的影响。

2.尽量少用全局变量。因为变量在范围链中的位置越深，访问时间就越长。局部变量位于作用域链中的第一个对象，而全局变量总是位于作用域链的最后一环，所以全局变量总是最慢的。

3.避免全局查询。如果全局变量必须使用，并且需要在某个函数中多次使用，可以定义一个局部变量指向全局变量，以缩短范围链中的查询深度。

函数addTotrackData(){ var all children node=getallchilddepartmentnodes()；for(var I=0；I all children node . length；i ) { for (var j=0，len=track.lengthjlenj){ if(track node[j][' userId ']==all children node[I]){ track node[j][' isomap ']=true；}}}}以上代码可以改写如下

函数addTotrackData(){ var all children node=getallchilddepartmentnodes()；var track=trackNodefor(var I=0；I all children node . length；i ) { for (var j=0，len=track.lengthjlenj){ if(track[j][' userId ']==all children node[I]){ track[j][' isomap ']=true；}}} }4.用局部变量保存集合的长度属性，并在迭代中使用该变量。

for (var j=0，len=track.lengthjlenJ) 5。避免与表达式一起使用，因为它会增加范围链的长度。此外，应谨慎对待试捕条款，这也有同样的效果。

6.属性或方法在原型链中的位置越深，其访问速度就越慢。

7.声明变量时，多个变量一起声明，可以减少内存消耗。

风险值a；风险值b；风险值c；//推荐var a、b、c2、Dom操作

Dom (Document Object Model)是一个独立于语言的应用程序接口，它使用xml和html文档进行操作。浏览器中的界面是用javascript实现的。Dom和javascript被视为两个孤岛，通过一个收费桥连接起来。一般建议尽量留在javascript岛。

1.用innerHTML替换DOM操作，减少DOM操作的数量，优化javascript性能。

//dom模式var str=' ' var DOM=document . getelementbyid(' test ')；var start1=新日期()；for(var j=0；j100000j){ var div=document . create element(' div ')；div.innerText=' testDOM . append(div)；} var end1=新日期()；console . log(' DOM mode : '(end 1-start 1))；//dom模式：356//IneHTML模式var content=var start=新日期()；for(var I=0；i10000I){ content=content ' div test/div '；} document.getElementById('test ')。innerHTML=内容；var end=新日期()；Console.log('innerHTML模式： '(end-start))；//innerHTML方法：352。如果一个统一的Dom元素或集合被多次访问，最好使用一个局部变量来缓存这个Dom成员。使用局部变量在循环中缓存集合引用和集合元素将提高速度。

3.遍历子节点比遍历子节点更快。孩子不会区分(包含)注释节点和空文本节点，所以速度更快。

4.使用element.cloneNode(bool)复制节点。如果bool为false，表示浅复制，只复制当前节点；如果bool为true，则表示深度复制，其子节点也将被复制。此方法比document.createElement()更快。

5.使用document.querySelector和document . query selector all(' div . warning，div.notice ')快速搜索。因为它们返回的是由限定节点组成的NodeList——类数组对象，而不是HTML集合(总是显示存在)，所以避免了其固有的性能问题(以及存在的逻辑问题)。Queryselectorall ('div。警告，div。notice’)也可以执行联合查询。

6.修改样式时，可以使用div.style.cssText一起修改样式，也可以使用类修改样式(便于维护)。

var El=document . getelementbyid(' my div ')；//修改Dom el.style.borderLeft=' 1px '三次；El . style . borderright=' 2px '；El . style . padding=' 5px '；//建议只修改一次domel . style . CSS text=' border-left : 1px；border-right : 2px；padding: 5px'7.尽量避免在HTML标签中写入Style属性，使用外展样式便于维护和修改。

8.避免图片和iFrame的空Src。空的Src会重新加载当前页面，影响速度和效率。

9.事件委托。元素连接事件的句柄会影响页面性能，事件冒泡的性能用来减少元素连接事件。(事件挂钩过程发生在onload或DOMContentReady)事件中。

3.流通

1.for-in是四种循环方法中最慢的一种，一般用于循环对象(是查找自己的属性还是原型属性)。不建议使用圆形数组。除非您想迭代一个具有未知属性的对象，否则通常不需要-in。

2.更改循环条件的顺序以提高循环性能。

//推荐用于(var i=items.lengthI-；){//todo} //不建议使用for(var I=0，len=items.length伊琳；I ){ //todo} 3。通过减少周期数来优化性能。

以上就是边肖介绍的JavaScript性能提升的详细讲解和集成，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！