探寻Javascript执行效率问题


Posted in Javascript onNovember 12, 2014

Javascript是一门非常灵活的语言,我们可以随心所欲的书写各种风格的代码,不同风格的代码也必然也会导致执行效率的差异,开发过程中零零散散地接触到许多提高代码性能的方法,整理一下平时比较常见并且容易规避的问题

 Javascript自身执行效率

Javascript中的作用域链、闭包、原型继承、eval等特性,在提供各种神奇功能的同时也带来了各种效率问题,用之不慎就会导致执行效率低下。

1、全局导入

我们在编码过程中多多少少会使用到一些全局变量(window,document,自定义全局变量等等),了解javascript作用域链的人都知道,在局部作用域中访问全局变量需要一层一层遍历整个作用域链直至顶级作用域,而局部变量的访问效率则会更快更高,因此在局部作用域中高频率使用一些全局对象时可以将其导入到局部作用域中,例如:

//1、作为参数传入模块 

 (function(window,$){ 

     var xxx = window.xxx; 

     $("#xxx1").xxx(); 

     $("#xxx2").xxx(); 

 })(window,jQuery); 

  

 //2、暂存到局部变量 

 function(){ 

     var doc = document; 

     var global = window.global; 

 }

 

2、eval以及类eval问题

我们都知道eval可以将一段字符串当做js代码来执行处理,据说使用eval执行的代码比不使用eval的代码慢100倍以上(具体效率我没有测试,有兴趣同学可以测试一下)

JavaScript 代码在执行前会进行类似“预编译”的操作:首先会创建一个当前执行环境下的活动对象,并将那些用 var 申明的变量设置为活动对象的属性,但是此时这些变量的赋值都是 undefined,并将那些以 function 定义的函数也添加为活动对象的属性,而且它们的值正是函数的定义。但是,如果你使用了“eval”,则“eval”中的代码(实际上为字符串)无法预先识别其上下文,无法被提前解析和优化,即无法进行预编译的操作。所以,其性能也会大幅度降低

其实现在大家一般都很少会用eval了,这里我想说的是两个类eval的场景(new Function{},setTimeout,setInterver)

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

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

(new Function("alert(1)"))();

上述几种类型代码执行效率都会比较低,因此建议直接传入匿名方法、或者方法的引用给setTimeout方法

3、闭包结束后释放掉不再被引用的变量

var f = (function(){ 

    var a = {name:"var3"}; 

    var b = ["var1","var2"]; 

    var c = document.getElementByTagName("li"); 

    //****其它变量 

    //***一些运算 

    var res = function(){ 

        alert(a.name); 

    } 

    return res; 

})()

上述代码中变量f的返回值是由一个立即执行函数构成的闭包中返回的方法res,该变量保留了对于这个闭包中所有变量(a,b,c等)的引用,因此这两个变量会一直驻留在内存空间中,尤其是对于dom元素的引用对内存的消耗会很大,而我们在res中只使用到了a变量的值,因此,在闭包返回前我们可以将其它变量释放

var f = (function(){ 

    var a = {name:"var3"}; 

    var b = ["var1","var2"]; 

    var c = document.getElementByTagName("li"); 

    //****其它变量 

    //***一些运算 

    //闭包返回前释放掉不再使用的变量 

    b = c = null; 

    var res = function(){ 

        alert(a.name); 

        } 

    return res; 

})()

 Js操作dom的效率

在web开发过程中,前端执行效率的瓶颈往往都是在dom操作上面,dom操作是一件很耗性能的事情,如何才能在dom操作过程中尽量节约性能呢?

1、减少reflow

什么是reflow?
当 DOM 元素的属性发生变化 (如 color) 时, 浏览器会通知 render 重新描绘相应的元素, 此过程称为 repaint。

如果该次变化涉及元素布局 (如 width), 浏览器则抛弃原有属性, 重新计算并把结果传递给 render 以重新描绘页面元素, 此过程称为 reflow。

减少reflow的方法
先将元素从document中删除,完成修改后再把元素放回原来的位置(当对某元素及其子元素进行大量reflow操作时,1,2两种方法效果才会比较明显)
将元素的display设置为”none”,完成修改后再把display修改为原来的值
修改多个样式属性时定义class类代替多次修改style属性(for certain同学推荐)
大量添加元素到页面时使用documentFragment

例如

for(var i=0;i<100:i++){
    var child = docuemnt.createElement("li");
    child.innerHtml = "child";
    document.getElementById("parent").appendChild(child);
}

 

当代码中需要多次访问元素的状态信息,在状态不变的情况下我们可以将其暂存到变量中,这样可以避免多次访问dom带来内存的开销,典型的例子就是:

查找dom元素时尽量避免大面积遍历页面元素,尽量使用精准选择器,或者指定上下文以缩小查找范围,以jquery为例

少用模糊匹配的选择器:例如$("[name*='_fix']"),多用诸如id以及逐步缩小范围的复合选择器$("li.active")等
指定上下文:例如$("#parent .class"),$(".class",$el)等

4、使用事件委托

使用场景:一个有大量记录的列表,每条记录都需要绑定点击事件,在鼠标点击后实现某些功能,我们通常的做法是给每条记录都绑定监听事件,这种做法会导致页面会有大量的事件监听器,效率比较低下。

基本原理:我们都知道dom规范中事件是会冒泡的,也就是说在不主动阻止事件冒泡的情况下任何一个元素的事件都会按照dom树的结构逐级冒泡至顶端。而event对象中也提供了event.target(IE下是srcElement)指向事件源,因此我们即使在父级元素上监听该事件也可以找到触发该事件的最原始的元素,这就是委托的基本原理。废话不多说,上示例

根据上面介绍的监听事件的原理我们来改写一下

当然,我们不必每次都做事件源的判断工作,可以将其抽象一下交给工具类来完成。jquery中的delegate()方法就实现了该功能

语法是这样的$(selector).delegate(childSelector,event,data,function),例如:

$("div").delegate("button","click",function(){ 

  $("p").slideToggle(); 

});

参数说明(引自w3school)
参数 描述
childSelector 必需。规定要附加事件处理程序的一个或多个子元素。
event 必需。规定附加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。
data 可选。规定传递到函数的额外数据。
function 必需。规定当事件发生时运行的函数。

Tips:事件委托还有一个好处就是,即使在事件绑定之后动态添加的元素上触发的事件同样可以监听到哦,这样就不用在每次动态加入元素到页面后都为其绑定事件了

Javascript 相关文章推荐
js URL参数的拼接方法比较
Feb 15 Javascript
jquery实现的简单二级菜单效果代码
Sep 22 Javascript
js实现选项卡内容切换以及折叠和展开效果【推荐】
Jan 08 Javascript
JavaScript requestAnimationFrame动画详解
Sep 14 Javascript
浅析JavaScript中的特殊数据类型
Dec 15 Javascript
微信小程序form表单组件示例代码
Jul 15 Javascript
layui结合form,table的全选、反选v1.0示例讲解
Aug 15 Javascript
require.js 加载过程与使用方法介绍
Oct 30 Javascript
详解微信小程序-扫一扫 wx.scanCode() 扫码大变身
Apr 30 Javascript
微信公众号获取用户地理位置并列出附近的门店的示例代码
Jul 25 Javascript
Vue中rem与postcss-pxtorem的应用详解
Nov 20 Javascript
基于js实现数组相邻元素上移下移
May 19 Javascript
推荐8款jQuery轻量级树形Tree插件
Nov 12 #Javascript
推荐10个2014年最佳的jQuery视频插件
Nov 12 #Javascript
JavaScript中提前声明变量或函数例子
Nov 12 #Javascript
浅谈jQuery中 wrap() wrapAll() 与 wrapInner()的差异
Nov 12 #Javascript
js在IE与firefox的差异集锦
Nov 11 #Javascript
超炫的jquery仿flash导航栏特效
Nov 11 #Javascript
推荐JavaScript实现继承的最佳方式
Nov 11 #Javascript
You might like
第十节 抽象方法和抽象类 [10]
2006/10/09 PHP
Codeigniter中禁止A Database Error Occurred错误提示的方法
2014/06/12 PHP
JavaScript脚本性能的优化方法
2007/02/02 Javascript
ASP小贴士/ASP Tips javascript tips可以当桌面
2009/12/10 Javascript
获取元素距离浏览器周边的位置的方法getBoundingClientRect
2013/04/17 Javascript
JQuery实现鼠标移动到图片上显示边框效果
2014/01/09 Javascript
LABjs、RequireJS、SeaJS的区别
2014/03/04 Javascript
JS将光标聚焦在文本最后的实现代码
2014/03/28 Javascript
基于Jquery+div+css实现弹出登录窗口(代码超简单)
2015/10/27 Javascript
jquery判断对象是否为空并遍历对象的简单实例
2016/07/26 Javascript
Avalonjs 实现简单购物车功能(实例代码)
2017/02/07 Javascript
实现一个完整的Node.js RESTful API的示例
2017/09/29 Javascript
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
2019/11/29 Javascript
Vue+element-ui添加自定义右键菜单的方法示例
2020/12/08 Vue.js
[05:08]DOTA2-DPC中国联赛3月6日Recap集锦
2021/03/11 DOTA
python实现同时给多个变量赋值的方法
2015/04/30 Python
python爬虫框架talonspider简单介绍
2017/06/09 Python
Python实战小程序利用matplotlib模块画图代码分享
2017/12/09 Python
Python数字图像处理之霍夫线变换实现详解
2018/01/12 Python
Python利用正则表达式实现计算器算法思路解析
2018/04/25 Python
Python类绑定方法及非绑定方法实例解析
2020/10/09 Python
Windows环境下Python3.6.8 importError: DLLload failed:找不到指定的模块
2020/11/01 Python
CSS3动画之流彩文字效果+图片模糊效果+边框伸展效果实现代码合集
2017/08/18 HTML / CSS
详解CSS3阴影 box-shadow的使用和技巧总结
2016/12/03 HTML / CSS
荷兰演唱会和体育比赛订票网站:viagogo荷兰
2018/04/08 全球购物
亿阳信通股份有限公司笔试题(C#)
2016/03/04 面试题
学校卫生检查制度
2014/02/03 职场文书
创建省级文明单位实施方案
2014/02/27 职场文书
人力资源部经理的岗位职责
2014/03/04 职场文书
校园文明标语
2014/06/13 职场文书
力学专业求职信
2014/07/23 职场文书
幼师个人总结范文
2015/02/28 职场文书
大学新生入学感想
2015/08/07 职场文书
Lombok的详细使用及优缺点总结
2021/07/15 Java/Android
Java中的继承、多态以及封装
2022/04/11 Java/Android
TS 类型兼容教程示例详解
2022/09/23 Javascript