JavaScript 性能提升之路(推荐)


Posted in Javascript onApril 10, 2019

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

1、数据访问

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

JavaScript 性能提升之路(推荐)

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

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

function addTotrackData(){
  	var allChildrenNode=getAllChildrenDepartmentNodes();
  	for (var i = 0; i < allChildrenNode.length; i++) {
      for (var j=0,len=track.length;j<len;j++) {
        if (trackNode[j]["userId"] == allChildrenNode[i]) {
          trackNode[j]["isOnMap"] = true;
        }
      }
    }
  }

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

function addTotrackData(){
  	var allChildrenNode=getAllChildrenDepartmentNodes();
  	var track=trackNode;
  	for (var i = 0; i < allChildrenNode.length; i++) {
      for (var j=0,len=track.length;j<len;j++) {
        if (track[j]["userId"] == allChildrenNode[i]) {
          track[j]["isOnMap"] = true;
        }
      }
    }
  }

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

for (var j=0,len=track.length;j<len;j++)

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

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

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

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

2、Dom操作

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

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

//dom方式
  var str=""
  var dom=document.getElementById("test");
  var start1=new Date();
  for(var j=0;j<100000;j++){
  	var div=document.createElement("div");
  	div.innerText="test";
  	dom.append(div);					
  }
  var end1=new Date();
  console.log("dom方式:"+(end1-start1));//dom方式:356
  
  //inerHTML方式
  var content="";
  var start=new Date();
  for(var i=0;i<10000;i++){
    content=content+"<div>test</div>";
  }
  document.getElementById("test").innerHTML=content;
  var end=new Date();
  console.log("innerHTML方式:"+(end-start));//innerHTML方式:35

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

3、遍历children比childNodes更快。children不区分(包括)注释节点和空文本节点,所以快一些。

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

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

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

var el = document.getElementById('mydiv');
   //修改3次Dom
  el.style.borderLeft = '1px';
  el.style.borderRight = '2px';
  el.style.padding = '5px';
  //推荐只需要修改1次Dom
  el.style.cssText = 'border-left: 1px; border-right: 2px; padding: 5px;'

7、尽量避免写在HTML标签中写Style属性,使用外联样式便于维护和修改。

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

9、采用事件委托。元素连接事件句柄会影响页面性能,采用委托利用事件冒泡的性能减少元素连接事件。(事件挂接过程都是发生在onload或DOMContentReady)事件中。

3、循环

1、for-in是四种循环方法中速度最慢的一种,一般用于循环对象(需要查找自身属性还是原型属性)。不建议循环数组。除非要迭代遍历一个属性未知的对象,否则一般不用for-in。

2、改变循环条件的顺序来提高循环性能。

//推荐
  for(var i=items.length;i--;){
    //todo
  }
  //不推荐
  for(var i=0,len=items.length;i<len;i++){
    //todo
  }

3、通过减少循环体来优化性能。

以上所述是小编给大家介绍的JavaScript性能提升详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript 构造函数,公有,私有特权和静态成员定义方法
Nov 30 Javascript
javascript基础知识大集锦(二) 推荐收藏
Jan 13 Javascript
基于jQuery的可用于选项卡及幻灯的切换插件
Mar 28 Javascript
javascript中获取下个月一号,是星期几
Jun 01 Javascript
jquery实现公告翻滚效果
Feb 27 Javascript
JavaScript的String字符串对象常用操作总结
May 26 Javascript
原生JS实现图片左右轮播
Dec 30 Javascript
微信小程序 商城开发(ecshop )简单实例
Apr 07 Javascript
用vuex写了一个购物车H5页面的示例代码
Dec 04 Javascript
node之本地服务器图片上传的方法示例
Mar 26 Javascript
JavaScript实现旋转木马轮播图
Mar 16 Javascript
微信小程序中target和currentTarget的区别小结
Nov 06 Javascript
详解vue-cli3 中跨域解决方案
Apr 10 #Javascript
js中数组常用方法总结(推荐)
Apr 09 #Javascript
JS隐藏号码中间4位代码实例
Apr 09 #Javascript
vue 点击展开显示更多(点击收起部分隐藏)
Apr 09 #Javascript
详解axios中封装使用、拦截特定请求、判断所有请求加载完毕)
Apr 09 #Javascript
关于vue状态过渡transition不起作用的原因解决
Apr 09 #Javascript
vue实现文字横向无缝走马灯组件效果的实例代码
Apr 09 #Javascript
You might like
解析PHP中的unset究竟会不会释放内存
2013/07/18 PHP
PHP set_error_handler()函数使用详解(示例)
2013/11/12 PHP
PHP统计二维数组元素个数的方法
2013/11/12 PHP
PHP反射类ReflectionClass和ReflectionObject的使用方法
2013/11/13 PHP
PHP实现设计模式中的抽象工厂模式详解
2014/10/11 PHP
PHP实现HTML页面静态化的方法
2015/11/04 PHP
深入讲解PHP的Yii框架中的属性(Property)
2016/03/18 PHP
基于win2003虚拟机中apache服务器的访问
2017/08/01 PHP
ThinkPHP3.2框架自定义配置和加载用法示例
2018/06/14 PHP
基于jquery的商品展示放大镜
2010/08/07 Javascript
使用jquery获取网页中图片高度的两种方法
2013/09/26 Javascript
JavaScript 垃圾回收机制分析
2013/10/10 Javascript
javascript动态添加、修改、删除对象的属性与方法详解
2014/01/27 Javascript
JS常用字符串处理方法应用总结
2014/05/22 Javascript
JS+CSS实现的拖动分页效果实例
2015/05/11 Javascript
jquery 构造函数在表单提交过程中修改数据
2015/05/25 Javascript
js实现的彩色方块飞舞奇幻效果
2016/01/27 Javascript
浅谈js常用内置方法和对象
2016/09/24 Javascript
jquery Ajax 全局调用封装实例详解
2017/01/16 Javascript
jQuery制作图片旋转效果
2017/02/02 Javascript
jQury Ajax使用Token验证身份实例代码
2017/09/22 Javascript
jQuery中元素选择器(element)简单用法示例
2018/05/14 jQuery
解决在vue项目中webpack打包后字体不生效的问题
2018/09/01 Javascript
layui-table获得当前行的上/下一行数据的例子
2019/09/24 Javascript
vue3.0封装轮播图组件的步骤
2021/03/04 Vue.js
python 环境变量和import模块导入方法(详解)
2017/07/11 Python
Django添加KindEditor富文本编辑器的使用
2018/10/24 Python
pytorch三层全连接层实现手写字母识别方式
2020/01/14 Python
python实现杨辉三角的几种方法代码实例
2021/03/02 Python
利用CSS3实现自定义滚动条代码分享
2016/08/18 HTML / CSS
PHP如何与mysql建立链接
2013/05/05 面试题
学生请假条格式
2014/04/11 职场文书
网络销售员岗位职责
2015/04/11 职场文书
读《皮囊》有感:理解是对他人的最大的善举
2019/11/14 职场文书
MySQL索引知识的一些小妙招总结
2021/05/10 MySQL
MySQL为数据表建立索引的原则详解
2022/03/03 MySQL