Javascript优化技巧之短路表达式详细介绍

什么是短路表达式?

短路表达式:作为"&&"和"||"操作符的操作数表达式,这些表达式在进行求值时,只要最终的结果已经可以确定是真或假,求值过程便告终止,这称之为短路求值。这是这两个操作符的一个重要属性。

一个最简单的例子:

复制代码 代码如下:

foo = foo||bar;

这行代码是什么意思?答案:

复制代码 代码如下:

//如果foo存在,值不变,否则把bar的值赋给foo
if(!foo)
    foo = bar;

在javascript的逻辑运算中,0、""、null、false、undefined、NaN都会判定为false,而其他都为true。所以在上式的foo = foo||bar;中,||先计算第一个运算数,如果可以被转换成true,也就是表示foo已经存在有值,那么返回左边这个表达式的值,否则计算第二个运算数bar。

另外,即使||运算符的运算数不是布尔值,仍然可以将它看作布尔OR运算,因为无论它返回的值是什么类型,都可以被转换为布尔值。

当然,使用如下做法会更加严谨:

复制代码 代码如下:

if(foo)      //不够严谨
 
if(!!foo)    //更为严谨,!!可将其他类型的值转换为boolean类型

可以测试一下:

复制代码 代码如下:

var foo;
var number = 1;
var string = "string";
var obj = {};
var arr = [];
 
 
console.log(typeof(foo));  // undefined
console.log(typeof(number));  //number
console.log(typeof(string));  //string
console.log(typeof(obj));  //object  
console.log(typeof(arr));  //object
 
console.log(typeof(!!foo));  // boolean
console.log(typeof(!!number));  //boolean
console.log(typeof(!!string));  //boolean
console.log(typeof(!!obj));  //boolean
console.log(typeof(!!arr));  //boolean

利用这一点可以很好的符合,优化javascript工程一文中提到的,使脚本少运行或者不运行,以达到优化javascript的目的。但是需要注意的是,这样写帮我们精简了代码的同时,也带来了代码可读性的降低的缺点。所以比较好的做好是添加是适当的注释。

时间: 2015-03-26

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

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

巧用局部变量提升javascript性能

javascript中一个标识符所在的位置越深,它的读写速度也越慢.因此,函数中读写局部变量总是最快的,而读写全局变量通常是最慢的.一个好的经验法则是:如果某个跨作用域的值在函数中被引用一次以上,那么就把它存储到局部变量里. 例如: 复制代码 代码如下: <!-- 优化前 --> <script type="text/javascript"> function initUI () { var bd = document.body, links = documen

减少访问DOM的次数提升javascript性能

访问DOM元素是有代价的,修改DOM元素则更为昂贵,因为它会导致浏览器重新计算页面的几何变化. 当然,最坏的情况是在循环中访问修改元素,尤其是对HTML元素集合循环操作. 例如: 复制代码 代码如下: <!-- 优化前 --> <script type="text/javascript"> function innerHTMLLoop () { for(var count = 0; count < 15000; count++){ document.get

动态加载脚本提升javascript性能

通过文档对象模型(DOM),几乎可以用Javascript动态创建HTML中的所有 内容.其根本在于,<script>标签与页面中的其他元素并无差异:都能通过DOM引用,都能在文档中移动.删除,甚至被创建.用标准的DOM方法可以非常容易地创建一个新年的<script>元素: 复制代码 代码如下: <script type="text/javascript"> var script=document.createElement("script

angularjs的一些优化小技巧

关于优化ng的手段网上已经有很多了,核心都是从$$watchers这个作用域内部属性说起的,今天我来说点别的,本质还是不变的,因为这是ng的硬伤,不过我相信只要运用合适的手法,这些问题还是可以避免的. ng简介 angularjs简称ng,是google出品的mvvm框架,此在提高前端项目开发效率(实践中来看确实很能提高开发效率),以控制器,指令,服务来围绕整个项目,内部以独有的DI来解决三层之前的调用问题.更多的详情信息可以参考我之前写的ng源码分析. ng的硬伤 说到硬伤就要先说下它的简单的

nodejs的10个性能优化技巧

下面是我们使用Node.js时遵循的10个性能规则: 1. 避免使用同步代码 在设计上,Node.js是单线程的.为了能让一个单线程处理许多并发的请求,你可以永远不要让线程等待阻塞,同步或长时间运行的操作.Node.js的一个显著特征是:它从上到下的设计和实现都是为了实现异步.这让它非常适合用于事件型程序. 不幸的是,还是有可能会发生同步/阻塞的调用.例如,许多文件系统操作同时拥有同步和异步的版本,比如writeFile和writeFileSync.即使你用代码来控制同步方法,但还是有可能不注意

脚本合并提升javascript性能示例

每个<script>标签初始下载时都会阻塞页面渲染,所以减少页面包含的<script>标签数量有助于改善这一情况.这不仅仅针对外链脚本,内嵌脚本的数量同样也要限制.浏览器在解析HTML页面的过程中每遇到一个<script>标签,都会因执行脚本而导致一定的延时,因此最小化延迟时间将会明显改善页面的总体性能. 通常一个大型网站或网络应用需要依赖数个javascript文件.你可以把多个文件合并成一个,这样只需引用一个<script>标签,就可以减少性能消耗.文件

js性能优化技巧

性能优化:简而言之,就是在不影响系统运行正确性的前提下,使之运行地更快,完成特定功能所需的时间更短 http:超文本协议 它的最上层是应用层 传输层 网络层 物理层 请求信息:请求行 请求头 空行 消息体 响应信息:状态行和状态码 使用值类型的ToString方法: 在连接字符串时,经常使用"+"号直接将数字添加到字符串中.这种方法虽然简单,也可以得到正确结果,但是由于涉及到不同的数据类型,数字需要通过装箱操作转化为引用类型才可以添加到字符串中.但是装箱操作对性能影响较大,因为在进行这

13 个JavaScript 性能提升技巧分享

Daniel Clifford 在 Google I/O 2012 上做了一个精彩的演讲"Breaking the JavaScript Speed Limit with V8".在演讲中,他深入解释了13个简单的代码优化方法,可以让你的代码在 Chrome 的 V8 JavaScript 引擎编译/运行你的 JavaScript 代码更加快速.在演讲中,他解释了怎么优化,并且解释了原因.下面简明的列出了优化的要点: 1. 在构造函数中初始化所有的对象 2. 始终用相同的顺序初始化对象

JavaScript提升性能的常用技巧总结【经典】

本文讲述了JavaScript提升性能的常用技巧.分享给大家供大家参考,具体如下: 1.注意作用域 随着作用域链中的作用域数量的增加,访问当前作用域以外的变量的时间也在增加.访问全局变量总是要比访问局部变量慢,因为要遍历作用域链.  1). 避免全局查找   将在一个函数中会多次用到的全局对象存储为局部变量总是没错的. 2). 避免 with 语句  with会创建自己的作用域,因此会增加其中执行代码的作用域链的长度. 2.选择正确的方法 性能问题的一部分是和用于解决问题的算法或者方法有关的.

Javascript优化技巧(文件瘦身篇)

最近一直在研究 Javascript 相关的技术.在<Javascript 高级程序设计>有篇章节着重阐述了优化 Javascript 代码的重要性.相信有很多的 Javascript 开发人员在开发的同时或多或少的会接触到此类的问题. 在大部分情况下,代码的优化并不是实际开发中所需要着重的部分.但是一旦代码完成了以后,开发者总是期待自己的代码能够越短越高效越好.结合从书中获得的知识以及本人实际开发过程中的经验,下面说明本人所采取的一些花招(也算是照本宣科一下). 前言 相比脚本语言,编译型的

JS代码优化技巧之通俗版(减少js体积)

细读完这篇文章,够你优化大半天的了,关于JS优化方法大都脱离不了这三种方法. (网页总大小为155.k,而JS就占了100.3K) 是时候优化下JS了 关于JS优化的文章已经很多了,大多技术性很强,像什么变量.字符串.类型,就不做介绍了,也不需要介绍,我也不懂,你知道了也没用.大多数站长都是"拿来主义",我只需要告诉JS怎么放,删那里就可以了. 现在的网站都加的有统计代码.分享工具.评论列表.相关文章插件等工具,而要实现强大的功能,必须使用JS文件,正是这些JS插件,再增强了网站功能的

PHP小技巧之JS和CSS优化工具Minify的使用方法

一.实现合并和压缩多个JS和CSS文件的代码 HTML: 复制代码 代码如下: <link rel="stylesheet" type="text/css" href="cssmin.php?get=base,style1,style2,global&path=css/&v=20131023" /><script type="text/javascript" src="jsmin.p

JavaScript中对循环语句的优化技巧深入探讨

循环是所有编程语言中最为重要的机制之一,几乎任何拥有实际意义的计算机程序(排序.查询等)都里不开循环. 而循环也正是程序优化中非常让人头疼的一环,我们往往需要不断去优化程序的复杂度,却因循环而纠结在时间复杂度和空间复杂度之间的抉择. 在 javascript 中,有3种原生循环,for () {}, while () {}和do {} while (),其中最为常用的要数for () {}. 然而for正是 javascript 工程师们在优化程序时最容易忽略的一种循环. 我们先来回顾一下for

javascript中的循环语句for语句深入理解

程序实现中经常要用到循环语句,其中for循环是多数语言都有的.在javascript中,for循环有几种不同的使用情况,下面就分别来讲述我的理解. 第一种:(通常情况,循环执行相关操作) 复制代码 代码如下: var objA=document.getElementsByTagName("a"); var i,max; for(i=0,max=objA.length;i<max;i++){ objA[i].onclick=function(){ alert(this.innerH

Javascript中for循环语句的几种写法总结对比

前言 for循环我们在js遍历对象或数组时都会有用到了,今天我们一起来看一些关于for循环的一些使用例子了,具体的操作细节如下文介绍. 一般写法如下: for(var i = 0;i< arr.length;i++) { var a = arr[i]; //... } 这就是一个常见的,正序循环的for循环.这样写的缺点大家都明白:每次都从arr里取length与i来对比,浪费性能(而且,要是arr的长度是动态变化的,就会出现死循环).改进这个循环的办法是用变量保存arr.length: for

Oracle数据库中SQL语句的优化技巧

在SQL语句优化过程中,我们经常会用到hint,现总结一下在SQL优化过程中常见Oracle HINT的用法: 1. /*+ALL_ROWS*/ 表明对语句块选择基于开销的优化方法,并获得最佳吞吐量,使资源消耗最小化. 例如: SELECT /*+ALL+_ROWS*/ EMP_NO,EMP_NAM,DAT_IN FROM BSEMPMS WHERE EMP_NO='SCOTT'; 2. /*+FIRST_ROWS*/ 表明对语句块选择基于开销的优化方法,并获得最佳响应时间,使资源消耗最小化.

PHP中for循环语句的几种变型

PHP中for循环语句的几种变型 /google 的广告条--> for语句可以说是PHP(同时也是多种语言)的循环控制部份最基本的一个语句了,for语句的执行规律和基础用法在这里就不多说,可以参见PHP手册for语句部分.PHP手册中对它的语法定义如下: for (expr1; expr2; expr3)statement 下面说说for语句几种有用的变型. 1.无限循环 首先是人尽皆知的无限循环(亦可称"死循环").由于空表达式null在语法上是有效的,所以我们可以把for语

JavaScript中:表达式和语句的区别[译]

1.语句和表达式 JavaScript中的表达式和语句是有区别的.一个表达式会产生一个值,它可以放在任何需要一个值的地方,比如,作为一个函数调用的参数.下面的每行代码都是一个表达式: myvar3 + xmyfunc("a", "b")语句可以理解成一个行为.循环语句和if语句就是典型的语句.一个程序是由一系列语句组成的.JavaScript中某些需要语句的地方,你可以使用一个表达式来代替.这样的语句称之为表达式语句.但反过来不可以:你不能在一个需要表达式的地方放一

JavaScript中的标签语句用法分析

本文实例分析了JavaScript中的标签语句用法.分享给大家供大家参考.具体分析如下: 最近在看w3school,然后看到js部分, <!DOCTYPE html> <html> <body> <script> cars=["BMW","Volvo","Saab","Ford"]; list: { document.write(cars[0] + "<br>

java、python、JavaScript以及jquery循环语句的区别

一.概述     python中循环语句有两种,while,for: JavaScript中循环语句有四种,while,do/while,for,for/in jQuery循环语句each 二.java 循环语句          a.while while 的语法为: while(条件语句){ 代码块 }           或者: while (条件语句) 代码; while的含义非常简单,只要条件语句为真,就一直执行后面的代码,为假就停止不做了.例如: Scanner reader = n

JavaScript中while循环的基础使用教程

前言 在 JavaScript 语言中,当我们使用 while 循环时,只要指定条件为 true,循环就可以一直执行. 并且只要条件一直满足,就可以实现一个无限循环,例如: while(true){ console.log("1"); } 执行这个循环,就会无止境的输出1. while 语法及其使用 语法如下所示: while (condition) { // 要执行的代码块 } condition 是循环的条件,只有当循环条件成立时,才会执行花括号 {} 中的代码,如果条件不成立则不

JavaScript中的return语句简单介绍

return语句在js中非常的重要,不仅仅具有返回函数值的功能,还具有一些特殊的用法,下面就结合实例简单介绍一下return语句的作用. 一.用来返回控制和函数结果: 通常情况,return语句对于一个函数是很有必要的,因为往往需要函数在一系列的代码执行后会得到一个期望的返回值,而此值就是通过return语句返回,并且将控制权返回给主调函数. 语法格式: return 表达式 代码实例如下: function add(){ var a=1; var b=2; return a+b; } func