js 优化次数过多的循环 考虑到性能问题

假设要生成一千万个随机数，常规的做法如下：


代码如下:

var numbers = [];
for (var i = 0; i < 10000000; i++) {
　　numbers.push(Math.random());
}

然而，在IE下执行这段代码时，却弹出了一个窗口提示用户是否停止这段脚本。出现这种情况，首先想到的是优化循环体。但明显地，循环体很简单，没什么优化的余地。即使把循环体清空，提示仍然存在。于是，我得出了一个结论：在IE下，一旦循环次数超过了某个特定值，就会弹出停止脚本的提示。

原因找到了，该如何解决呢？我首先想到的是把一千万次循环分成若干个次数较少的循环。比如分成一百次，每次执行十万次循环：


代码如下:

for (var i = 0, j; i < 100; i++) {
　　for (j = 0; j < 100000; j++) {
　　　　......
　　}
}

IE没有我们想象中笨，它知道总的循环次数还是一千万次。因此，得把这一百个十万次循环分开执行。虽然Javascript是单线程的，但也可以通过setTimeout或setInterval模拟多线程。整段代码优化如下：


代码如下:

var numbers = [];
function begin() {
　　for (var i = 0; i < 100000; i++) {
　　　　numbers.push(Math.random());
　　}
　　if (numbers.length < 10000000) { // 是否已完成
　　　　setTimeout(begin, 0);
　　} else {
　　　　alert("complete");
　　}
}
begin();

赞 (0)

相关推荐

  • JS优化与惰性载入函数实例分析

    本文实例讲述了JS优化与惰性载入函数.分享给大家供大家参考,具体如下: 惰性载入函数 由于现在浏览器之间的差异,为了实现跨浏览器工作,很多函数要书写大量if语句或者try-catch-语句.当每次调用函数时,都要对每个if分支或try语句进行检查,这样会使得浏览器反应变慢.实际上,当我们用某个浏览器打开网页时,就决定了某个if分支或try语句是可用的,没有必要每次调用都检查.为了解决以上问题,JavaScript中出现一种名为惰性载入的技巧. 惰性载入表示函数执行的分支仅会发生一次.有两种实现惰

  • JavaScript性能优化之函数节流（throttle）与函数去抖（debounce）

    函数节流,简单地讲,就是让一个函数无法在很短的时间间隔内连续调用,只有当上一次函数执行后过了你规定的时间间隔,才能进行下一次该函数的调用. 函数节流的原理挺简单的,估计大家都想到了,那就是定时器.当我触发一个时间时,先setTimout让这个事件延迟一会再执行,如果在这个时间间隔内又触发了事件,那我们就clear掉原来的定时器,再setTimeout一个新的定时器延迟一会执行,就这样. 以下场景往往由于事件频繁被触发,因而频繁执行DOM操作.资源加载等重行为,导致UI停顿甚至浏览器崩溃. 1.

  • JavaScript AJAX之惰性载入函数

    在JS中有些内存只需执行一遍即可,如浏览器类型检测是最常用的一个功能,因为我们使用Ajax的时候需要检测浏览器的内置的XHR.我们可以在第一次检测的时候记录下类型,往后在使用Ajax的时候就不需要再去检测浏览器类型了.在JS中就算只有一个if也总比没有if的语句效率要高. 普通Ajax方法 复制代码 代码如下: /**  * JS惰性函数  */   function ajax(){     if(typeof XMLHttpRequest != "undefined"){      

  • JavaScript也谈内存优化

    JavaScript也谈内存优化

    相对C/C++ 而言,我们所用的JavaScript 在内存这一方面的处理已经让我们在开发中更注重业务逻辑的编写.但是随着业务的不断复杂化,单页面应用.移动HTML5 应用和Node.js 程序等等的发展,JavaScript 中的内存问题所导致的卡顿.内存溢出等现象也变得不再陌生. 这篇文章将从JavaScript 的语言层面进行内存的使用和优化的探讨.从大家熟悉或略有耳闻的方面,到大家大多数时候不会注意到的地方,我们一一进行剖析. 1. 语言层面的内存管理 1.1 作用域 作用域(scope

  • JavaScript 函数惰性载入的实现及其优点介绍

    最近看JavaScript高级程序设计,大有收获,接下来几天写一下读书笔记.之前写了一篇Ajax初步理解的随笔,里面有个函数用来创建XmlHttpRequest对象,浏览器兼容性原因,写出的代码通过大量if判断或者try,catch语句将函数引导到正确代码处. 复制代码 代码如下: <script type="text/javascript"> function createXHR(){ var xhr = null; try { // Firefox, Opera 8.0

  • javascript日期处理函数，性能优化批处理

    javascript日期处理函数，性能优化批处理

    其实网上写javascript日期格式化的博文很多,大体都看了看,都还不错.唯一遗憾的是只顾着实现了功能,没对函数进行性能优化. 俗话说:不要重复造轮子.google上找了一个比较不错的日期格式化函数,来开始我的优化之旅吧! google上找的这个日期函数化函数,估计大家都很眼熟,以前我也一直在用.先看看优化后和优化前的效率对比吧! 1.优化之前的toDate函数(字符串转换成Date对象),重复执行1万次,耗时660毫秒 2.优化之前的dateFormat函数(Date对象格式化成字符串),重

  • JS性能优化笔记搜索整理

    通过网上查找资料了解关于性能优化方面的内容,现简单整理,仅供大家在优化的过程中参考使用,如有什么问题请及时提出,再做出相应的补充修改. 一. 让代码简洁:一些简略的表达方式也会产生很好的优化 eg:x=x+1;在不影响功能的情况下可以简写为x++; 二. 变量名方法名尽量在不影响语意的情况下简单.(可以选择首字母命名) eg:定义数组的长度可以取名为:ArrLen而不需要取为ArrayLength. 三. 关于JS的循环,循环是一种常用的流程控制. JS提供了三种循环:for(;;).while

  • Javascript中产生固定结果的函数优化技巧

    Javascript中产生固定结果的函数优化技巧

    分享一个Javascript编写函数的优化技巧. 适用的函数应该要满足以下条件: 产生固定结果页面中多次调用 复杂或较耗时 代码和分析如下: Java代码: 复制代码 代码如下: //产生固定结果并且在页面中多次调用的函数 function check() { //模拟耗时操作 var begin = Date.now(); //ECMAScript5添加的,若不支持请改成 +new Date(); var ONE_SECOND = 1000, result = false; while(tru

  • js性能优化 如何更快速加载你的JavaScript页面

    确保代码尽量简洁 不要什么都依赖JavaScript.不要编写重复性的脚本.要把JavaScript当作糖果工具,只是起到美化作用.别给你的网站添加大量的JavaScript代码.只有必要的时候用一下.只有确实能改善用户体验的时候用一下. 尽量减少DOM访问 使用JavaScript访问DOM元素很容易,代码更容易阅读,但是速度很慢.下面介绍几个要点:限制使用JavaScript来修饰网页布局,把针对访问元素的引用缓存起来.有时,当你的网站依赖大量的DOM改动时,就应该考虑限制你的标记.这是改用

  • javascript教程:关于if简写语句优化的方法

    UglifyJS是一个对javascript进行压缩和美化的工具,在它的文档说明中,我看到了几种关于if语句优化的方法.尽管我还没使用它去做一些尝试性的测试,但从这里可以看到它的确对js作了美化的工作.也许有人认为if语句就那么简单,能优化到什么程度?但是看看以下的几种方式,你也许会改变看法. 一.使用常见的三元操作符 if (foo) bar(); else baz(); ==> foo?bar():baz();if (!foo) bar(); else baz(); ==> foo?baz

  • 利用函数的惰性载入提高javascript代码执行效率

    在 javascript 代码中,因为各浏览器之间的行为的差异,我们经常会在函数中包含了大量的 if 语句,以检查浏览器特性,解决不同浏览器的兼容问题. 例如,我们最常见的为 dom 节点添加事件的函数: 复制代码 代码如下: function addEvent (type, element, fun) { if (element.addEventListener) { element.addEventListener(type, fun, false); } else if(element.a

  • nodejs的10个性能优化技巧

    nodejs的10个性能优化技巧

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

  • javascript for循环从入门到偏门(效率优化+奇特用法)

    一,for循环的基本写法 代码如下: 复制代码 代码如下: //例一for(var i=1;i<=10;i++) { alert(i); } 这段代码太简单了,我都不好意思拿出手.代码的执行结果是依次弹出1到10,PS:在早期的IE如IE6中,你把10改成10000,就能让用户一直点确定什么也不能干了哈哈--不要说是我出的主意. 由于这是一篇基础课程,所以我们回归正题来详细分析一下这段代码吧. for循环的结构都是类似的,任意一个for循环都是这样的: for(开始前;循环进行的条件;循环一次结

随机推荐