符合中小企业对网站设计、功能常规化式的企业展示型网站建设
本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...
商城网站建设因基本功能的需求不同费用上面也有很大的差别...
手机微信网站开发、微信官网、微信商城网站...
我们一般用循环来遍历数组,而循环一直是 JavaScript
成都创新互联是专业的北湖网站建设公司,北湖接单;提供网站建设、网站制作,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行北湖网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!
性能问题的常见来源,有时循环用得不好会严重降低代码的运行速度。例如,遍历数组时,我们会很自然地写出下面这种代码:
// 未优化的代码1
var array = [0,1,2,3,4,5,6,7,8,9];
// for-in 循环
for (var val in array) {
fn(val);
}
还有这一种常见写法:
// 未优化的代码2
var array = [0,1,2,3,4,5,6,7,8,9];
// for 循环
for (var i=0; i array.length; i++) {
fn(array[i]);
}
这两个方法看上去似乎不错,而且语义上也很容易理解。但是这两个方法都有性能问题:
“未优化的代码1”中,for-in 需要分析出 array 的每个属性,这个操作的性能开销很大,用在 key
已知的数组上是非常不划算的。所以尽量不要用 for-in,除非你不清楚要处理哪些属性,例如 JSON 对象这样的情况。
“未优化的代码2”中,循环每执行一次,都要检查一次 array.length 的值,读属性要比读局部变量慢,尤其是当 array
里存放的都是 DOM 元素(像 array =
document.getElementByClassName("class");),因为每次读 array.length
都要扫描一遍页面上 class="class" 的元素,速度更是慢得抓狂。
假如你的任务是从页面上 100 个复选框中,找出选中的复选框的 value,并把它们放入一个数组的话,在 IE
上可能得花上半秒才能完成。结果就是,用户在列表里选择了自己要的项目,点击提交后起码要过半秒才会有反应,直观感觉就是很卡。
我们绝不能接受这样的结果,所以我们需要加快循环终止条件的计算速度。先把数组的长度先查出来,存进一个局部变量,那么循环的速度将会大大提高:
// 快速的代码
var array = [0,1,2,3,4,5,6,7,8,9];
// for 循环
var length = array.length;
for (var i=0; i
length; i++) {
fn(array[i]);
}
现在只需要读取一次 array.length 的值,遍历数组的过程大大加快了。
不过我们还可以让它更快。如果循环终止条件不需要进行比较运算,那么循环的速度还可以更快:
// 最快的代码
var array = [0,1,2,3,4,5,6,7,8,9];
// for 循环
for (var i = array.length; i--;)
{
fn(array[i]);
}
把数组下标改成向 0 递减,循环终止条件只需要判断 i 是否为 0
就行了。因为循环增量和循环终止条件结合在一起,所以可以写成更简单的 while 循环:
// 最快且优雅的代码
var array = [0,1,2,3,4,5,6,7,8,9];
// while 循环
var i = array.length;
while (i--) {
fn(array[i]);
}
这个问题涉及到JS闭包的概念,闭包的概念比较晦涩,以我的表达能力,想要给你讲通不容易,尝试一下吧,希望你能理解我说的。
尽管 i 是存在于块级作用域中,但是 arr[i] 也存在于块级作用域中, 所以 arr[i] 是可以访问到 i的,这个可以理解吧。
当你把一个匿名方法赋值给 arr[i] 时,匿名方法也是可以访问到 i 的,并且在匿名方法的方法体中保存了对 i 的引用,所以尽管for循环结束了,但是,引用依然存在。因为你在定义这个匿名方法的时候就持有了 i。
后期这个i是始终不会被释放的,也就是说会造成我们常说的内存泄露。因为后期尽管你不再调用arr[0]或arr[1]方法,但对i的引用始终存在。就好比是占着茅坑不拉屎,你不用,但是却把坑给占着,导致别人也用不了。这样的话内存就白白的被浪费掉了一个,也就是内存泄露。
好吧,希望你能理解,不懂再问吧
补充:
上面这段代码的原理是一样的。
以下html代码包括页面的css,以及纯 js 生成 li 的代码注释
!DOCTYPE html
html
head
title检测/title
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
!-- ul li 的样式,为了好看,要加上哦~~~ --
style type="text/css"
ul { border-right:1px solid green; border-bottom:1px solid green; width:404px; overflow:hidden; list-style:none; padding:0px; margin:0px; }
ul li { float:left; width:100px; height:100px; line-height:100px; text-align:center; margin:0 auto; padding:0px; border-left:1px solid green; border-top:1px solid green; }
/style
script type="text/javascript"
window.onload = function () {
// 获得 ul
var ul = document.getElementById("ul");
for (var i = 0; i 12; i++) {
var math = Math.random(); // 随机生成 0-1 之间的数,如果小于等于0.5则生成空的,否则生成内容
var li = document.createElement("li");
if (math = 0.5) {
li.innerHTML = "";
} else {
li.innerHTML = "内容";
}
// 为 ul 添加 li 节点
ul.appendChild(li);
}
}
/script
/head
body
ul id="ul"
/ul
/body
/html