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

Javascript自身执行效率

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

1、全局导入

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

  1. //1、作为参数传入模块
  2. (function(window,$){
  3. var xxx = window.xxx;
  4. $("#xxx1").xxx();
  5. $("#xxx2").xxx();
  6. })(window,jQuery);
  7. //2、暂存到局部变量
  8. function(){
  9. var doc = document;
  10. var global = window.global;
  11. }

2、eval以及类eval问题

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

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

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

  1. setTimtout("alert(1)",1000);
  2. setInterver("alert(1)",1000);
  3. (new Function("alert(1)"))();

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

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

  1. var f = (function(){
  2. var a = {name:"var3"};
  3. var b = ["var1","var2"];
  4. var c = document.getElementByTagName("li");
  5. //****其它变量
  6. //***一些运算
  7. var res = function(){
  8. alert(a.name);
  9. }
  10. return res;
  11. })()

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

  1. var f = (function(){
  2. var a = {name:"var3"};
  3. var b = ["var1","var2"];
  4. var c = document.getElementByTagName("li");
  5. //****其它变量
  6. //***一些运算
  7. //闭包返回前释放掉不再使用的变量
  8. b = c = null;
  9. var res = function(){
  10. alert(a.name);
  11. }
  12. return res;
  13. })()

Js操作dom的效率

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

1、减少reflow

什么是reflow?

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

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

减少reflow的方法

1.先将元素从document中删除,完成修改后再把元素放回原来的位置(当对某元素及其子元素进行大量reflow操作时,1,2两种方法效果才会比较明显)

2.将元素的display设置为”none”,完成修改后再把display修改为原来的值

3.修改多个样式属性时定义class类代替多次修改style属性(for certain同学推荐)

4.大量添加元素到页面时使用documentFragment

例如

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

上述代码会多次操作dom,效率比较低,可以改为下面的形式 创建documentFragment,将所有元素加入到docuemntFragment不会改变dom结构,最后将其添加到页面,只进行了一次reflow

  1. var frag = document.createDocumentFragment();
  2. for(var i=0;i<100:i++){
  3. var child = docuemnt.createElement("li");
  4. child.innerHtml = "child";
  5. frag.appendChild(child);
  6. }
  7. document.getElementById("parent").appendChild(frag);

2、暂存dom状态信息

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

  1. var lis = document.getElementByTagName("li");
  2. for(var i=1;i<lis.length;i++){  <="" span="" style="padding: 0px; margin: 0px;">
  3. //***
  4. }
  5. 上述方式会在每一次循环都去访问dom元素,我们可以简单将代码优化如下
  6. var lis = document.getElementByTagName("li");
  7. for(var i=1,j=lis.length ;i<j;i++){  <="" span="" style="padding: 0px; margin: 0px;">
  8. //***
  9. }

3、缩小选择器的查找范围

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

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

指定上下文:例如$("#parent .class"),$(".class",$el)等

4、使用事件委托

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

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

  1. $("ul li").bind("click",function(){
  2. alert($(this).attr("data"));
  3. })

上述写法其实是给所有的li元素都绑定了click事件来监听鼠标点击每一个元素的事件,这样页面上会有大量的事件监听器。

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

  1. $("ul").bind("click",function(e){
  2. if(e.target.nodeName.toLowerCase() ==="li"){
  3. alert($(e.target).attr("data"));
  4. }
  5. })

这样一来,我们就可以只添加一个事件监听器去捕获所有li上触发的事件,并做出相应的操作。

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

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

  1. $("div").delegate("button","click",function(){
  2. $("p").slideToggle();
  3. });

参数说明

参数

描述

childSelector

必需。规定要附加事件处理程序的一个或多个子元素。

event

必需。规定附加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。

data

可选。规定传递到函数的额外数据。

function

必需。规定当事件发生时运行的函数。

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

关于JavaScript代码的执行效率总结的更多相关文章

  1. JavaScript代码内部执行顺序

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. javascript代码解释执行过程

    javascript是由浏览器解释执行的脚本语言,不同于java c,需要先编译后运行,javascript 由浏览器js解释器进行解释执行,总的过程分为两大块,预编译期和执行期 下面的几个demo解 ...

  3. JavaScript代码不执行

    一天先后有两个同事问我为啥他的js代码出现了莫名其妙的问题 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "h ...

  4. 优化javaScript代码,提高执行效率

    今天看完书,总结了一下可以如何优化 JavaScript . 1.合并js文件 为优化性能,可以把多个js文件(css文件也可以)合并成极少数大文件.跟十个5k的js文件相比,合并成一个50k的文件更 ...

  5. 怎么样加快JavaScript加载和执行效率

    概览 无论当前 JavaScript 代码是内嵌还是在外链文件中,页面的下载和渲染都必须停下来等待脚本执行完成.JavaScript 执行过程耗时越久,浏览器等待响应用户输入的时间就越长.浏览器在下载 ...

  6. Javascript执行效率总结

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

  7. 高性能WEB开发:Javascript自身执行效率

    Javascript中的作用域链.闭包.原型继承.eval等特性,在提供各种神奇功能的同时也带来了各种效率问题,用之不慎就会导致执行效率低下. 1.全局导入 我们在编码过程中多多少少会使用到一些全局变 ...

  8. 加快JavaScript加载和执行效率

    JavaScript 在浏览器中的性能成为开发者所面临的最重要的可用性问题.而这个问题又因 JavaScript 的阻塞特性变的复杂,也就是说当浏览器在执行 JavaScript 代码时,不能同时做其 ...

  9. JAVA中执行JavaScript代码并获取返回值

    JAVA中执行JavaScript代码并获取返回值 场景描述 实现思路 技术要点 代码实现 测试方法 运行结果 改进空间 场景描述 今天在CSDN上偶然看到一个帖子对于一段字符串 “var p=‘xx ...

随机推荐

  1. Alpha阶段敏捷冲刺⑧

    1.提供当天站立式会议照片一张. 每个人的工作 (有work item 的ID),并将其记录在码云项目管理中: 昨天已完成的工作. 报表能和账单数据结合起来 工作中遇到的困难. 后端和程序的交互还是没 ...

  2. Hadoop初探

    本文转自:https://blog.csdn.net/column/details/14334.html 前言 Hadoop是什么? 用百科上的话说:“Hadoop是一个由Apache基金会所开发的分 ...

  3. VMIC

    1. wmic 的简介 wmic -? [全局开关] <命令> 可以使用以下全局开关: /NAMESPACE 别名在其上操作的命名空间的路径. /ROLE 包含别名定义的角色的路径. /N ...

  4. Fastqc使用说明

    用FastQC检查二代测序原始数据的质量 2013-01-28 21:28:10|  分类: Bioinformatics |  标签:bioinformatics  deep-seq   |举报 | ...

  5. [转帖]InfiniBand 主流厂商 和 产品分析

    InfiniBand 主流厂商 和 产品分析   Mellanox成立于1999年,总部设在美国加州和以色列,Mellanox公司是服务器和存储端到端连接InfiniBand解决方案的领先供应商.20 ...

  6. [转帖]CentOS基础命令大全

    https://www.toutiao.com/i6601298434651587085/ 1.关机 (系统的关机.重启以及登出 ) 的命令 shutdown -h now 关闭系统(1) init ...

  7. log4j2分析总结(一)

    现在公司用log4j2 进行日志记录,我也看了相关的资料,现在进行记录学习总结下 整体结构 Appenders里设置日志的输出方式.级别和格式 Loggers里设置全局的级别和绑定appenders里 ...

  8. Java并发编程之线程创建和启动(Thread、Runnable、Callable和Future)

    这一系列的文章暂不涉及Java多线程开发中的底层原理以及JMM.JVM部分的解析(将另文总结),主要关注实际编码中Java并发编程的核心知识点和应知应会部分. 说在前面,Java并发编程的实质,是线程 ...

  9. Java面试题大汇总

    前言 关于赢在面试的Java题系列基本收集整理完成了,所有题目都是经过精心挑选的,很基础又考验求职者的基本功,应该说被面试到的几率很大.这里整理挑选出来供大家面试前拿来看一看,所有题目整理自网络,有一 ...

  10. 计算机网络【7】—— TCP的精髓

    参考文献: http://blog.chinaunix.net/uid-26275986-id-4109679.html TCP协议作为一个可靠的面向流的传输协议,其可靠性和流量控制由滑动窗口协议保证 ...