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 相关文章推荐
用CSS+JS实现的进度条效果效果
Jun 05 Javascript
jQuery的实现原理的模拟代码 -3 事件处理
Aug 03 Javascript
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
May 07 Javascript
JS HTML5 音乐天气播放器(Ajax获取天气信息)
May 26 Javascript
javascript在子页面中函数无法调试问题解决方法
Jan 17 Javascript
JS实现网页标题随机显示名人名言的方法
Nov 03 Javascript
js实现点击按钮弹出上传文件的窗口
Dec 23 Javascript
d3.js入门教程之数据绑定详解
Apr 28 Javascript
vue.js实现价格格式化的方法
May 23 Javascript
node.js到底要不要加分号浅析
Jul 11 Javascript
JavaScript中的连续赋值问题实例分析
Jul 12 Javascript
微信小程序实现可长按移动控件
Nov 01 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.ini中文版(2)
2006/10/09 PHP
php 数学运算验证码实现代码
2009/10/11 PHP
领悟php接口中interface存在的意义
2013/06/27 PHP
PHP Session 变量的使用方法详解与实例代码
2013/09/11 PHP
php中的静态变量的基本用法
2014/03/20 PHP
PHP数组操作――获取数组最后一个值的方法
2015/04/14 PHP
php 函数中静态变量使用的问题实例分析
2020/03/05 PHP
Javascript在IE和FireFox中的不同表现简析
2012/12/03 Javascript
node.js中的http.response.end方法使用说明
2014/12/14 Javascript
jQuery实现向下滑出的平滑下拉菜单效果
2015/08/21 Javascript
javascript中Array()数组函数详解
2015/08/23 Javascript
JavaScript面向对象程序设计教程
2016/03/29 Javascript
JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)
2016/09/23 Javascript
JS命令模式例子之菜单程序
2016/10/10 Javascript
JS日程管理插件FullCalendar中文说明文档
2017/02/06 Javascript
详解node如何让一个端口同时支持https与http
2017/07/04 Javascript
9种改善AngularJS性能的方法
2017/11/28 Javascript
webpack 代码分离优化快速指北
2019/05/18 Javascript
Vue表单控件数据绑定方法详解
2020/02/05 Javascript
详解Java中String JSONObject JSONArray List转换
2020/11/13 Javascript
如何基于viewport vm适配移动端页面
2020/11/13 Javascript
python中的列表推导浅析
2014/04/26 Python
Python将图片批量从png格式转换至WebP格式
2020/08/22 Python
python使用xpath中遇到:到底是什么?
2018/01/04 Python
window7下的python2.7版本和python3.5版本的opencv-python安装过程
2019/10/24 Python
python 字段拆分详解
2019/12/17 Python
Python如何使用ElementTree解析xml
2020/10/12 Python
一款恶搞头像特效的制作过程 利用css3和jquery
2014/11/21 HTML / CSS
美国最大的船只买卖在线市场:Boat Trader
2018/08/04 全球购物
无工作经验者个人求职信范文
2013/12/22 职场文书
幼儿园教师教学反思
2014/02/06 职场文书
汽车销售员如何做职业生涯规划
2014/02/16 职场文书
2016年3月份红领巾广播稿
2015/12/21 职场文书
js实现上传图片到服务器
2021/04/11 Javascript
python图像处理基本操作总结(PIL库、Matplotlib及Numpy)
2021/06/08 Python
解析MySQL索引的作用
2022/03/03 MySQL