探寻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 相关文章推荐
jquery 学习笔记一
Apr 07 Javascript
JavaScript实现在页面间传值的方法
Apr 07 Javascript
jQuery实现的瀑布流加载效果示例
Sep 13 Javascript
AngularJS实现DOM元素的显示与隐藏功能
Nov 22 Javascript
Bootstrap基本插件学习笔记之Tooltip提示工具(18)
Dec 08 Javascript
js实现3D图片展示效果
Mar 09 Javascript
AngularJs定时器$interval 和 $timeout详解
May 25 Javascript
node中koa中间件机制详解
Aug 22 Javascript
集合Bootstrap自定义confirm提示效果
Sep 19 Javascript
浅谈vue项目4rs vue-router上线后history模式遇到的坑
Sep 27 Javascript
微信小程序登录按钮遮罩浮层效果的实现方法
Dec 16 Javascript
vue使用keep-alive保持滚动条位置的实现方法
Apr 09 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
PHP中文汉字验证码
2007/04/08 PHP
PHP使用CURL获取302跳转后的地址实例
2014/05/04 PHP
PHP中使用虚代理实现延迟加载技术
2014/11/05 PHP
理解JavaScript的prototype属性
2012/02/11 Javascript
解读JavaScript中 For, While与递归的用法
2013/05/07 Javascript
javascript实现表格增删改操作实例详解
2015/05/15 Javascript
js如何实现淡入淡出效果
2020/11/18 Javascript
详解Node.js模板引擎Jade入门
2018/01/19 Javascript
深入剖析Node.js cluster模块
2018/05/23 Javascript
react中使用css的7中方式(最全总结)
2019/02/11 Javascript
解决ie11 SCRIPT5011:不能执行已释放Script的代码问题
2019/05/05 Javascript
vue实现记事本功能
2019/06/26 Javascript
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
2019/09/03 jQuery
layer.open回调获取弹出层参数的实现方法
2019/09/10 Javascript
JS函数参数的传递与同名参数实例分析
2020/03/16 Javascript
详解微信小程序工程化探索之webpack实战
2020/04/20 Javascript
Python 2.7.x 和 3.x 版本的重要区别小结
2014/11/28 Python
Python最长公共子串算法实例
2015/03/07 Python
Python程序中设置HTTP代理
2016/11/06 Python
mac安装scrapy并创建项目的实例讲解
2018/06/13 Python
在Python中实现替换字符串中的子串的示例
2018/10/31 Python
pyttsx3实现中文文字转语音的方法
2018/12/24 Python
详解python编译器和解释器的区别
2019/06/24 Python
django框架模型层功能、组成与用法分析
2019/07/30 Python
python tkinter组件使用详解
2019/09/16 Python
日本一家专门经营各种箱包的大型网站:Traveler Store
2016/08/03 全球购物
匡威帆布鞋美国官网:Converse美国
2016/08/22 全球购物
Chain Reaction Cycles芬兰:世界上最大的在线自行车商店
2017/12/06 全球购物
德国游戏机商店:Konsolenkost
2019/12/08 全球购物
事业单位请假制度
2014/01/13 职场文书
《浅水洼里的小鱼》听课反思
2014/02/28 职场文书
工作作风建设心得体会
2014/10/22 职场文书
2014年大班保育员工作总结
2014/12/02 职场文书
今日说法观后感
2015/06/08 职场文书
区域销售大会开幕词
2016/03/04 职场文书
Python sklearn分类决策树方法详解
2022/09/23 Python