javascript for循环设法提高性能

一般在javascript里对数组进行遍历一般是使用for循环，像下面一样


代码如下:

var arr = [];
for(var i=0; i<arr.length; i++){
//loop
}

这种代码最大的问题，就在于每次循环时都要通过 .操作符获取 .length，增加了开销。那么我们可以这样改进。


代码如下:

var arr = [];
for(var i=0, n=arr.length; i<n; i++){
//loop
}

这样子，先把 arr.length暂存到 n 变量中去。只在开始时获取一次。
但是这样就没问题了吗？貌似多定义了个无意义的变量 n 。好那继续改进


代码如下:

var arr = [];
for(var i=arr.length-1; i > -1; i--){
//loop
}

好这样子，我们把这个循环顺序倒过来，就把那个n去掉了，而使用了一个常量-1。
如果应用场景，允许不使用 for 循环的话。我们可在使用 while代替
善于使用这两种循环语句，以提高javascript的效率。


代码如下:

var arr = [];
var i=arr.length-1;
while(i--){
//loop arr[i]
}

或者


代码如下:

var arr = [];
var i=arr.length-1;
do {
// loop arr[i]
}while(--i)

这样代码更简洁，效率更好，特别是如果允许先执行一次循环体的情况下，使用do while效果很明显。
唯一的问题是把 i 移到循环外了。

赞 (0)

相关推荐

  • 编写高性能的JavaScript 脚本的加载与执行

    脚本可以放在html页面的head里面,也可以放在body里面. 把脚本放在body中,当浏览器遇见<script>标签时, 浏览器不知道脚本会插入文本还是html标签,因此浏览器会停止分析html页面而去执行脚本.当使用src的方式添加脚本时,浏览器也会做同样的动作.在脚本处理的时候,页面呈现和用户交互将被完全阻止.脚本下载和执行阻塞了其他资源的下载,比如呈现页面使用的图片.(虽然很多浏览器实现了脚本并行下载的技术,但是这个问题依然没有解决) 脚本的位置 鉴于上面的理由,脚本应该始终放在页面

  • High Performance JavaScript(高性能JavaScript)读书笔记分析

    第一章:加载和执行 浏览器的JavaScript的引擎是编译器层的优化: 当浏览器执行JavaScript代码时,不能同时做其他任何事情(单一进程),意味着<script>标签每次出现都霸道地让页面等带脚本的解析和执行(每个文件必须等到前一个文件下载并执行完成才会开始下载),所以头部的JS和CSS用来渲染页面,交互行为(几乎所有)的JS放在<body>底部: 主流浏览器都允许并行下载JS. 减少外链脚本数量将会改善性能(合并JS) 任何网站都可以使用一个把制定文件合并处理后的URL

  • 你不知道的高性能JAVASCRIPT

    本文会分享一些高效的JavaScript的最佳实践,提高大家对JS的底层和实现原理的理解. 数据存储 计算机学科中有一个经典问题是通过改变数据存储的位置来获得最佳的读写性能,在JavaScript中,数据存储的位置会对代码性能产生重大影响. – 能使用{}创建对象就不要使用new Object,能使用[]创建数组就不要使用new Array.JS中字面量的访问速度要高于对象. – 变量在作用域链中的位置越深,访问所需实践越长.对于这种变量,可以通过缓存使用局部变量保存起来,减少对作用域链访问次数

  • 推荐 21 款优秀的高性能 Node.js 开发框架

    推荐 21 款优秀的高性能 Node.js 开发框架

    Node.js 框架可以帮助你开发出更友好的 web 应用.Node.js 框架的许多特性和功能也能开发出大型的 web 应用.下面我们来介绍 21 款最好的 Node.js 框架,帮助开发者快速开发 web 应用. Express Total total.js 是个 web 应用框架,使用 JavaScript,HTML,CSS 和 Node.js(MVC) web 应用框架来构建 web 网站和 web 应用. SOCKETSTREAM SOCKET KISS METEOR Meteor 是

  • 高性能WEB开发 JS、CSS的合并、压缩、缓存管理

    高性能WEB开发 JS、CSS的合并、压缩、缓存管理

    存在的问题: 合并.压缩文件主要有2方面的问题: 1. 每次发布的时候需要运行一下自己写的bat文件或者其他程序把文件按照自己的配置合并和压缩. 2. 因生产环境和开发环境需要加载的文件不一样,生产环境为了需要加载合并.压缩后的文件,而开发环境为了修改.调试方便,需要加载非合并.压缩的文件,所以我们常常需要在JSP中类似与下面的判断代码: 复制代码 代码如下: <c:if test="${env=='prod'}"> <script type="text/j

  • 高性能web开发 如何加载JS，JS应该放在什么位置？

    高性能web开发 如何加载JS，JS应该放在什么位置？

    外部JS的阻塞下载 所有浏览器在下载JS的时候,会阻止一切其他活动,比如其他资源的下载,内容的呈现等等.至到JS下载.解析.执行完毕后才开始继续并行下载其他资源并呈现内容. 有人会问:为什么JS不能像CSS.image一样并行下载了?这里需要简单介绍一下浏览器构造页面的原理, 当浏览器从服务器接收到了HTML文档,并把HTML在内存中转换成DOM树,在转换的过程中如果发现某个节点(node)上引用了CSS或者IMAGE,就会再发1个request去请求CSS或image,然后继续执行下面的转换,

  • JavaScript知识点总结之如何提高性能

    JavaScript的性能问题不容小觑,这就需要我们开发人员在编写JavaScript程序时多注意一些细节,本文非常详细的介绍了一下JavaScript性能优化方面的知识点,绝对是干货. 先给大家巩固下javascript基本语法: javascript基本语法 定义变量统一用var关键字 语法:var 变量名称=变量值 标示符:①.由字母数字下划线构成 不能以数字开头 不能是关键字 严格区分大小写 数据类型: 数值型:number 字符串:string 布尔型:boolean 特殊数据类型:u

  • JavaScript提高性能知识点汇总

    一.针对js文件的加载位置 在HTML文件中,<script>标签是可以加在<head>区域和<body>区域的.这里鉴于JavaScript执行和UI渲染的单线程原因,如果js文件载入会阻塞后面对于页面的解析过程,页面会等到js文件完全加载并运行后才继续执行该做的操作.那么问题就来了,这样可能会出现页面空白or卡顿现象.作为一名前端开发,重要的不仅仅止于实现了需求,应该还有优质的用户体验.那么我们就需要消除用户枯燥的等待,针对这个问题,这里有本兽想到的两种解决方案:

  • javascript for循环设法提高性能

    一般在javascript里对数组进行遍历一般是使用for循环,像下面一样 复制代码 代码如下: var arr = []; for(var i=0; i<arr.length; i++){ //loop } 这种代码最大的问题,就在于每次循环时都要通过 .操作符获取 .length,增加了开销.那么我们可以这样改进. 复制代码 代码如下: var arr = []; for(var i=0, n=arr.length; i<n; i++){ //loop } 这样子,先把 arr.lengt

  • JavaScript 总结几个提高性能知识点(推荐)

    前段时间花时间看了大半的<High Performance JavaScript>这本书啊,然后就开始忙项目了,庆幸最忙的一周已经熬过去了.由于空不出时间,这个月写的学习笔记也不多,忙完最苦X的一周,这两天晚上也算是挑灯夜读了...终于是在残血之际将这本书shut down了... 既然读完了,总归是要学到些什么的.说说对这本书的看法先吧,整体的来说,内容还是不错的,就是感觉有点老了(作为前端小白,也可能是自身水平有限,未能体会到其中真意).看这本书的过程中也是写了挺多代码用以测试的,并且对本

  • Javascript 加载和执行-性能提高篇

    Js的阻塞性 Javascript 在浏览器中的性能问题,可能是最重要的可用性问题 Js的阻塞性 浏览器用单一进程来处理UI进程和Js的执行 不管是内嵌的还是外链的,下载并立即执行 因为它有可能会修改页面 页面生存周期的概念 瀑布图中看到了下载时间和executing time 在head中加入script 和link body加载到前不会输出任何东西,因此会看到空白页面 复制代码 代码如下: <script type="text/javascript"> document

  • 跟我学习javascript的循环

    1.优先使用数组而不是Object类型来表示有顺序的集合 ECMAScript标准并没有规定对JavaScript的Object类型中的属性的存储顺序. 但是在使用for..in循环对Object中的属性进行遍历的时候,确实是需要依赖于某种顺序的.正因为ECMAScript没有对这个顺序进行明确地规范,所以每个JavaScript执行引擎都能够根据自身的特点进行实现,那么在不同的执行环境中就不能保证for..in循环的行为一致性了. 比如,以下代码在调用report方法时的结果就是不确定的: f

  • 详解JavaScript for循环中发送AJAX请求问题

    详解JavaScript for循环中发送AJAX请求问题

    首先说,出现这个问题的场景是很少见的,因为有太多更好解决方法.今天搞ajax的时候,一个有趣的地方,,每个迭代中都要发送一个get请求,因为迭代的速度太快,一个请求还没有完成就进行下一个迭代,在chrome和ff上,除最后一个请求外,其它请求都被取消了.所以该怎么办呢?设置延时(不太好)还是其他办法?  办法有很多,比如设置休眠,迭代等等, 我采用的是另外两种解决办法.  一.同步的ajax请求,而ajax请求默认是异步的,所以要设置为false. function creatXMLHttpRe

  • javascript for循环性能测试示例

    本文实例讲述了javascript for循环性能测试.分享给大家供大家参考,具体如下: for循环,如何使用效率更高,下面举例来说明: // 先定义一个测试数组 var arr = [0,1,2,3,4,5,6,7,8,9]; // 执行测试 test1(); test2(); test3(); function test1(){ console.time('test1'); for(var i = 0; i < arr.length; i ++) { } console.timeEnd('t

  • javascript事件循环event loop的简单模型解释与应用分析

    本文实例讲述了javascript事件循环event loop的简单模型解释与应用.分享给大家供大家参考,具体如下: js是单线程的,但是event loop的出现,使得js拥有可以处理高并发的性能.那么怎么理解event loop呢?网上百度一堆文章,什么heap,stack,micro queue,macro queue,让初学者直接懵掉.这里采用很通俗的理解方式介绍下event loop. event loop顾名思义是事件循环,既然是循环,那循环的是什么呢? 对于一个js文件, 1,执行

  • 详细谈谈JavaScript中循环之间的差异

    目录 前言 可枚举的属性 可迭代对象 在 forEach 与 map 方法 链式调用 性能 结论 前言 在 JavaScript 中使用循环时,需要正确定义两个关键内容:可枚举属性(enumerable properties)和可迭代对象(iterable objects). 可枚举的属性 可枚举对象的一个定义特征是,当我们通过赋值运算符将属性赋值给对象时,我们将内部可枚举标志(enumerable)设置为 true.这是默认值. 但是,我们可以通过将其设置为 false 来更改此行为. 经验法

  • JavaScript for循环 if判断语句(学习笔记)

    今天学习了JavaScript里面的for循环以及if的判断语句 for(初始值:循环条件:操作){ 满足条件要执行的代码语句 } 初始值:循环前的初始化变量,通常为赋值表达式:建议用var赋值,可以加快运行速度. 循环条件:每次循环前要计算的条件,是运算符类别中的条件运算符,返回值为true或false,当返回值为true时执行循环,为false时退出循环.(往往是i>=n;或用逻辑运算符) 操作:每循环一次以后要计算的表达式,通常是递增++或递减--等赋值表达式. for语句中的三个参数,第

随机推荐