有效提高JavaScript执行效率的几点知识


Posted in Javascript onJanuary 31, 2015

为了提供新鲜、别致的用户体验,很多网站都会使用 JavaScript 来改善设计、验证表单、检查浏览器,以及Ajax请求,cookie操作等等,实现无刷新动态效果 。但是,要将大量内容在浏览器呈现,如果处理不好,网站性能将会急剧下降。所以我们有必要了解下,如何提高JavaScript的执行效率。

JavaScript 函数

在JavaScript 中,函数在使用前会预编译。尽管有些时候下可以使用字符串代替函数,但是每次执行这段JavaScript 代码时都会重新解析,影响性能。

1、eval例子

eval('output=(input * input)');

// 建议改成:

eval(new function() { output=(input * input)});

2、setTimeout例子

setTimeout("alert(1)", 1000);

// 建议改成:

setTimeout(function(){alert(1)}, 1000);

使用函数代替字符串作参数确保新方法中的代码能被 JavaScript 编译器优化。

JavaScript作用域

JavaScript作用域链中的每个作用域都包含几个变量。理解作用域链很重要,这样才能利用它。

var localVar = "global"; //全局变量
function test() {
  var localVar = "local"; //局部变量
  //局部变量

  alert(localVar);
  //全局变量

  alert(this.localVar);
  //查找document在局部变量找不到,就查找全局变量

  var pageName = document.getElementById("pageName"); 

}

使用局部变量比使用全局变量快得多,因为在作用域链中越远,解析越慢。下图显示了作用域链结构:

有效提高JavaScript执行效率的几点知识

如果代码中有 with 或 try-catch 语句,作用域链会更复杂,如下图:

有效提高JavaScript执行效率的几点知识

JavaScript字符串

JavaScript中一个非常影响性能的函数是字符串连接,一般情况都是使用 + 号来实现拼接字符串。但是早期浏览器没有对这样的连接方式做优化,导致在连续创建和销毁字符串严重降低JavaScript执行效率。

var txt = "hello" + " " + "world";

建议改成:

var o = [];

o.push("hello");

o.push(" ");

o.push("world");

var txt = o.join();

我们再简单封装一下:

function StringBuffer(str) {

    var arr = [];

    arr.push(str || "");

    this.append = function(str) {

        arr.push(str);

        return this;

    };

    this.toString = function() {

        return arr.join("");

    };

};

然后这样子调用:

var txt = new StringBuffer();

txt.append("Hello");

txt.append(" ");

txt.append("World");

alert(txt.toString());

JavaScript DOM操作

HTML Document Object Model (DOM) 定义了访问和操作 HTML 文档的标准方法。它将 HTML 文档表示成节点树,其中包含元素、属性和文本内容。通过使用 HTML DOM,JavaScript 能访问 HTML 文档中所有节点并操作它们。

DOM重绘

每次修改到页面的DOM对象,都涉及到DOM重绘,浏览器都会重新渲染页面。所以降低DOM对象的修改次数,可以有效地提高JavaScript 的性能。

for (var i = 0; i < 1000; i++ ) {

  var elmt = document.createElement('p');

  elmt.innerHTML = i;

  document.body.appendChild(elmt);

}

建议改成:

var html = [];

for (var i = 0; i < 1000; i++) {

  html.push('<p>' + i + '</p>');

}

document.body.innerHTML = html.join('');

DOM访问

通过DOM可以访问到HTML文档中的每个节点。每次调用getElementById()、getElementsByTagName()等方法,都会重新查找并访问节点。所以将查找到的DOM节点缓存一下,也可以提高JavaScript 的性能。

document.getElementById("p2").style.color = "blue";

document.getElementById("p2").style.fontFamily = "Arial";

document.getElementById("p2").style.fontSize = "larger";

建议改成:

var elmt = document.getElementById("p2");

elmt.style.color = "blue";

elmt.style.fontFamily = "Arial";

elmt.style.fontSize = "larger";

DOM遍历

DOM遍历子元素通常都是按索引循环读取下一个子元素,在早期浏览器下这种读取方式执行效率很低,利用nextSibling方式可以提高js遍历DOM的效率。

var html = [];

var x = document.getElementsByTagName("p");//所有节点

for (var i = 0; i < x.length; i++)  {

  //todo

}

建议改成:

var html = [];

var x = document.getElementById("div");//上级节点

var node = x.firstChild;

while(node != null){

  //todo

  node = node.nextSibling;

}

JavaScript 内存释放

在web应用中,随着DOM对象数量的增加,内存消耗会越来越大。所以应当及时释放对象的引用,让浏览器能够回收这些内存。

释放DOM占用的内存

document.getElementById("test").innerHTML = "";

将DOM元素的innerHTML设置为空字符串,可以释放其子元素占用的内存。

释放javascript对象

//对象:

obj = null

//对象属性:

delete obj.property

//数组元素:

arr.splice(0,3);//删除前3个元素
Javascript 相关文章推荐
对Jquery中的ajax再封装,简化操作示例
Feb 12 Javascript
jquery实现弹出层遮罩效果的简单实例
Mar 03 Javascript
JavaScript取得WEB安全颜色列表的方法
Jul 14 Javascript
javascript控制图片播放的实现代码
Jul 29 Javascript
Node.js批量给图片加水印的方法
Nov 15 Javascript
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
Jan 19 Javascript
利用js判断手机是否安装某个app的多种方案
Feb 13 Javascript
COM组件中调用JavaScript函数详解及实例
Feb 23 Javascript
JavaScript实现三级联动菜单实例代码
Jun 26 Javascript
基于React+Redux的SSR实现方法
Jul 03 Javascript
vue-cli2打包前和打包后的css前缀不一致的问题解决
Aug 24 Javascript
vue单页面实现当前页面刷新或跳转时提示保存
Nov 02 Javascript
JavaScript日期时间与时间戳的转换函数分享
Jan 31 #Javascript
JavaScript监听和禁用浏览器回车事件实例
Jan 31 #Javascript
JavaScript编程中容易出BUG的几点小知识
Jan 31 #Javascript
JavaScript实现的双向跨域插件分享
Jan 31 #Javascript
JavaScript判断变量是否为空的自定义函数分享
Jan 31 #Javascript
分享两个手机访问pc网站自动跳转手机端网站代码
Dec 24 #Javascript
js判断登录与否并确定跳转页面的方法
Jan 30 #Javascript
You might like
PHP 中文乱码解决办法总结分析
2009/07/30 PHP
php调用C代码的实现方法
2014/03/11 PHP
JavaScript通过setTimeout实时显示当前时间的方法
2015/04/16 Javascript
jQuery弹出层插件Lightbox_me使用指南
2015/04/21 Javascript
JavaScript获取客户端IP的方法(新方法)
2016/03/11 Javascript
jQuery实现图片向左向右切换效果的简单实例
2016/05/18 Javascript
超实用的JavaScript代码段 附使用方法
2016/05/22 Javascript
Bootstrap表单布局样式代码
2016/05/31 Javascript
基于Javascript实现文件实时加载进度的方法
2016/10/12 Javascript
jQuery插件zTree实现的多选树效果示例
2017/03/08 Javascript
ionic实现底部分享功能
2017/05/11 Javascript
vue用addRoutes实现动态路由的示例
2017/09/15 Javascript
js处理包含中文的字符串实例
2017/10/11 Javascript
jQuery实现移动端笔触canvas电子签名
2020/05/21 jQuery
javascript canvas实现简易时钟例子
2020/09/05 Javascript
详解Python使用tensorflow入门指南
2018/02/09 Python
python编写暴力破解zip文档程序的实例讲解
2018/04/24 Python
Python函数基础实例详解【函数嵌套,命名空间,函数对象,闭包函数等】
2019/03/30 Python
python操作文件的参数整理
2019/06/11 Python
python pandas时序处理相关功能详解
2019/07/03 Python
python numpy存取文件的方式
2020/04/01 Python
scrapy实践之翻页爬取的实现
2021/01/05 Python
水芝澳美国官网:H2O Plus
2016/10/15 全球购物
全球500多个机场的接送服务:Suntransfers
2019/06/03 全球购物
都柏林通行卡/城市通票:The Dublin Pass
2020/02/16 全球购物
英国健身专家:WIT Fitness
2021/02/09 全球购物
外贸业务员求职自荐信分享
2013/09/21 职场文书
高中自我评价分享
2013/12/05 职场文书
初二物理教学反思
2014/01/29 职场文书
《鸟的天堂》教学反思
2014/02/27 职场文书
个人委托书格式
2014/04/04 职场文书
ktv筹备计划书
2014/05/03 职场文书
舞蹈社团活动总结
2015/05/07 职场文书
关于食品安全的演讲稿范文(三篇)
2019/10/21 职场文书
解决Django transaction进行事务管理踩过的坑
2021/04/24 Python
详解Vue项目的打包方式(生成dist文件)
2022/01/18 Vue.js