JavaScript性能提升之路(推荐)

　　

在平时工作做项目的过程中我们有时候会遇到页面加载很久才加载出来的情况,这样严重影响了用户的体验效果。虽然说有时候可能是因为网络问题,但有些时候确实是前端代码没有足够优化导致的,所以通过查阅相关资料并实践后,总结出如下知识点来提升性能。有什么写得不对的地方还希望各路大神指出并加以指点。

　　

　　

1,将所有脚本标签放在尽可能接近身体标签底部的位置,尽可能减少对整个页面下载的影响。

　　

JavaScript性能提升之路(推荐)

　　

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

　　

3,避免全局查询,如果一定要用到全局变量时,并且需要在某个函数中多次用到该全局变量时,可以定义一个局部变量指向全局变量,来缩短在作用域链中的查询深度。

　　 　　 　　函数addTotrackData () { 　　var allChildrenNode=getAllChildrenDepartmentNodes (); 　　(var=0;我& lt;allChildrenNode.length;我+ +){ 　　(var j=0, len=track.length; j之前 　　 　　

上面代码可以改写为如下所示

　　 　　 　　函数addTotrackData () { 　　var allChildrenNode=getAllChildrenDepartmentNodes (); 　　var跟踪=trackNode; 　　(var=0;我& lt;allChildrenNode.length;我+ +){ 　　(var j=0, len=track.length; j之前 　　 　　

4,将集合的长度属性用一个局部变量来保存,在迭代中使用该变量。

　　 　　 　　(var j=0, len=track.length; j 　　 　　

5,避免使用的表达式,因为它增加作用域链的长度。而且应当小心的对待try - catch的catch子句,它具有同样效果。

　　

6,一个属性或方法在原型链中的位置越深,它的访问速度就越慢。

　　

7声明变量时,多个变量合并声明,可以减少内存消耗。

　　 　　 　　var; 　　var b; 　　var c;//推荐 　　var a, b, c 　　 　　

　　

Dom(文档对象模型)是一个独立于语言的,使用xml和html文档操作的应用程序接口。在浏览器中的接口却是以javascript来实现的.Dom和javascript看成两座岛,两者之间通过一座收费的桥连接,一般建议尽量留在javascript岛上。

　　

1,用innerHTML代替DOM操作,减少DOM操作次数,优化javascript性能。

　　 　　//dom方式 　　var str=" " 　　dom var=. getelementbyid(“测试”); 　　var start1=new日期(); 　　(var j=0; j<100000; j + +) { 　　var div=document.createElement (" div "); 　　div.innerText=安馐浴? 　　dom.append (div); 　　｝ 　　var end1=new日期(); 　　console.log (“dom方式:" + (end1-start1));//dom方式:356//inerHTML方式 　　var内容=" "; 　　var=new开始日期(); 　　我(var=0; i<10000;我+ +){ 　　”内容=+ & lt; div> test
”; 　　｝ 　　. getelementbyid(“测试”).innerHTML=内容; 　　var=new结束日期(); 　　console.log (“innerHTML方式:" + (end-start));//innerHTML方式:35 　　之前 　　 　　

2,如果统一个Dom元素或集合被访问一次以上,最好使用一个局部变量来缓存此Dom成员,在循环中使用局部变量缓存集合引用和集合元素会提升速度。

　　

3,遍历的孩子比子节点的时候存在缺陷更快定格不区分(包括)注释节点和空文本节点,所以快一些。

　　

4,使用element.cloneNode (bool)复制节点,布尔值为假表示浅复制,只复制当前节点,布尔值为真时,表示深复制,还会复制其子节点。这种方式比document.createElement()速度要快一些。

　　

5,使用document.querySelector和document.querySelectorAll (“div.warning, div.notice”)来快速查找。因为它们返回一个节点列表,由符合条件的节点构成的类数组对象,而不是HTML集合(总是表现出存在性),避免了它所固有的性能问题(以及存在的逻辑问题).querySelectorAll (“div.warning, div.notice”)还可以进行联合查询。

　　

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

JavaScript性能提升之路(推荐)