探寻Javascript执行效率问题

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

赞 (0)

相关推荐

  • JavaScript的内存释放问题详解

    本文详细的讲解了JavaScript及IE浏览器对内存的管理和释放的时机和方法,希望对前端开发人员有所帮助. 一个内存释放的实例 复制代码 代码如下: <SCRIPT LANGUAGE="JavaScript"> <!-- strTest = "1"; for ( var i = 0; i < 25; i ++ ) { strTest += strTest; } alert(strTest); delete strTest; CollectG

  • JavaScript实现N皇后问题算法谜题解答

    谜题 N皇后问题.将N个皇后放置在NxN的国际象棋棋盘上,其中没有任何两个皇后处于同一行.同一列或同一对角线上,以使得它们不能互相攻击. 策略 回溯法. JavaScript解 以8皇后问题为例: 复制代码 代码如下: /**  * Created by cshao on 12/28/14.  */ function getNQueens(order) {   if (order < 4) {     console.log('N Queens problem apply for order b

  • JavaScript使用指针操作实现约瑟夫问题实例

    本文实例讲述了JavaScript使用指针操作实现约瑟夫问题的方法.分享给大家供大家参考.具体分析如下: 实现之前当然要自己来编写一些 JS 数组内部指针的操作函数,就像:reset(), current(), next(), prev(), search(), end() 这些函数,我们都要来自己实现,因为 JS 没有内置这些神奇的操作函数 Array.prototype.pointer = 0;//模拟数组内部指针 //Reset 函数,将数组内部指针归位(指向第一个元素) var rese

  • JavaScript中的关联数组问题

    复制代码 代码如下: var beatles = ["john","Paul","George","Ringo"]; 上面中的beatles数组是个传统数组典型的例子:每个元素的下标是一个数字,每增加一个元素,这个数字就依次增加1.第一个元素的下标是0,第二个元素的下标是1.以此类推. 如果在填充数组时只给出了元素的值,这个数组就将是一个传统数组,它的各个元素的下标将被自动创建和刷新. 可以通过在填充数组时为每个新元素明确地给

  • Javascript字符串浏览器兼容问题分析

    本文实例分析了Javascript字符串浏览器兼容问题.分享给大家供大家参考.具体分析如下: 先看下不兼容的写法,若我想获取某个字符串的第几位 复制代码 代码如下: var str='aavvvcc'; console.info(str[0]); 这种写法 在IE 7以下的浏览器都不兼容,以下提供浏览器全兼容的方式 复制代码 代码如下: var str='aavvvcc'; console.info(str.charAt(1)); 使用charAt() 就可以获取字符串中某个字符,并且全部兼容.

  • 深入分析Javascript跨域问题

    深入分析Javascript跨域问题

    跨域是什么? 假设a.com/get.html需要获取b.com/data.html中的数据,而这里a.com和b.com并不是同一台服务器,这就是跨域跨域会涉及到Javascript的同源策略,简单来说就是为了保护网站的安全,不被外域(非同源)服务器的js修改本网站内容. 引用一个表格,看一下引起跨因的条件有哪些: 但是有时候我们确实需要这么做,那么我们有哪些方法呢? 1.JsonP 提到跨域不能不先提及jsonp.jsonp其实是JavacScript Object Notation wit

  • JavaScript汉诺塔问题解决方法

    本文实例讲述了JavaScript汉诺塔问题解决方法.分享给大家供大家参考.具体实现方法如下: <script language="javascript"> var han=function (disc,src,aux,dst){ if(disc>0){ han(disc-1,src,dst,aux); document.writeln("move disc "+disc+" from "+src+" to "

  • 浅谈Javascript变量作用域问题

    Js中的变量作用域问题: 1.没有块级作用域.Js中的变量作用域不是以{}为界的,不像C/C++/Java. 如: 复制代码 代码如下: if(true){      var name = "qqyumidi";  }               alert(name);  // 结果:qqyumidi Js会将在if中定义的变量添加到当前的执行环境中,尤其在使用for循环时需要注意与其他语言的差异. 复制代码 代码如下: for(var i=0; i<10; i++){    

  • 探寻Javascript执行效率问题

    Javascript是一门非常灵活的语言,我们可以随心所欲的书写各种风格的代码,不同风格的代码也必然也会导致执行效率的差异,开发过程中零零散散地接触到许多提高代码性能的方法,整理一下平时比较常见并且容易规避的问题 Javascript自身执行效率 Javascript中的作用域链.闭包.原型继承.eval等特性,在提供各种神奇功能的同时也带来了各种效率问题,用之不慎就会导致执行效率低下. 1.全局导入 我们在编码过程中多多少少会使用到一些全局变量(window,document,自定义全局变量等

  • JavaScript执行效率与性能提升方案

    如何提升JavaScript执行效率与性能在前端开发中位于一个很重要的地方,这节来研究下如何在平时做项目过程中,提升JavaScript性能与运行效率. 循环 循环是很常用的一个控制结构,大部分东西要依靠它来完成,在JavaScript中,我们可以使用for(;;),while(),for(in)三种循环,事实上,这三种循环中for(in)的效率极差,因为他需要查询散列键,只要可以就应该尽量少用.for(;;)和while循环的性能应该说基本(平时使用时)等价. 而事实上,如何使用这两个循环,则

  • 提高JavaScript执行效率的23个实用技巧

    本文向大家分享23种JavaScript提高执行效率的小技巧.最佳实践等非常实用的内容.当然JavaScript的实用技巧不止这些,还有很多即好玩又能提高程序运行效率的技巧,以后我们会继续分享给大家. 文中所提供的代码片段都已经过最新版的Chrome 30测试,该浏览器使用V8 JavaScript引擎(V8 3.20.17.15). 1.使用逻辑符号&&或者||进行条件判断 var foo = 10; foo == 10 && doSomething(); // 如果 f

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

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

    为了提供新鲜.别致的用户体验,很多网站都会使用 JavaScript 来改善设计.验证表单.检查浏览器,以及Ajax请求,cookie操作等等,实现无刷新动态效果 .但是,要将大量内容在浏览器呈现,如果处理不好,网站性能将会急剧下降.所以我们有必要了解下,如何提高JavaScript的执行效率. JavaScript 函数 在JavaScript 中,函数在使用前会预编译.尽管有些时候下可以使用字符串代替函数,但是每次执行这段JavaScript 代码时都会重新解析,影响性能. 1.eval例子

  • Javascript执行效率全面总结

    Javascript是一门非常灵活的语言,我们可以随心所欲的书写各种风格的代码,不同风格的代码也必然也会导致执行效率的差异,开发过程中零零散散地接触到许多提高代码性能的方法,整理一下平时比较常见并且容易规避的问题 Javascript自身执行效率Javascript中的作用域链.闭包.原型继承.eval等特性,在提供各种神奇功能的同时也带来了各种效率问题,用之不慎就会导致执行效率低下. 1.全局导入我们在编码过程中多多少少会使用到一些全局变量(window,document,自定义全局变量等等)

  • JavaScript提高加载和执行效率的方法

    前言 无论当前 JavaScript 代码是内嵌还是在外链文件中,页面的下载和渲染都必须停下来等待脚本执行完成.JavaScript 执行过程耗时越久,浏览器等待响应用户输入的时间就越长.浏览器在下载和执行脚本时出现阻塞的原因在于,脚本可能会改变页面或 JavaScript 的命名空间,它们对后面页面内容造成影响. 一个典型的例子就是在页面中使用document.write() . JavaScript 代码内嵌示例 <html> <head> <title>Sourc

  • 30个提高Web程序执行效率的好经验分享

    尽量避免使用DOM.当需要反复使用DOM时,先把对DOM的引用存到JavaScript本地变量里再使用.使用设置innerHTML的方法来替换document.createElement/appendChild()方 法. eval()有问题,new Fuction()构造函数也是,尽量避免使用它们. 拒绝使用with语句. 它会导致当你引用这个变量时去额外的搜索这样的一个命名空间,with里的代码在编译时期是完全未知的. 使用for()循环替代for-in循 环.因为for-in循环在开始循环

  • JavaScript执行顺序详细介绍

    JavaScript执行顺序详细介绍

    之前从JavaScript引擎的解析机制来探索JavaScript的工作原理,下面我们以更形象的示例来说明JavaScript代码在页面中的执行顺序.如果说,JavaScript引擎的工作机制比较深奥是因为它属于底层行为,那么JavaScript代码执行顺序就比较形象了,因为我们可以直观感觉到这种执行顺序,当然JavaScript代码的执行顺序是比较复杂的,所以在深入JavaScript语言之前也有必要对其进行剖析.1.1  按HTML文档流顺序执行JavaScript代码首先,读者应该清楚,H

  • 探寻JavaScript中this指针指向

    探寻JavaScript中this指针指向 首先必须要说的是,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象(这句话有些问题,后面会解释为什么会有问题,虽然网上大部分的文章都是这样说的,虽然在很多情况下那样去理解不会出什么问题,但是实际上那样理解是不准确的,所以在你理解this的时候会有种琢磨不透的感觉),那么接下来我会深入的探讨这个问题. 为什么要学习this?如果你学过函数式编程,面向对象编程,那你肯定知

  • PHP 函数执行效率的小比较

    就是把原来的数组中的数都"拆"成"单"位的. 下面是自己写的一个函数: 复制代码 代码如下: function splitStrToArray_mine($array) { $new_array = array(); foreach($array as $value) { $value = (string)$value; $len = strlen($value); for($i = 0; $i < $len; $i ++){ array_push($new_

随机推荐