/**
高效 Javascript 编码
Fast Loops
循环是大多数脚本最基本的一个部分,在大多数情况下,循环不会有任何效率问题。
但是,通过优化循环条件,还是可以让循环运行的更快一些
看下面的几个例子
*/
for(var i = 0 ; i < document.getElementsByTagName('tr').length ; i++){
document.getElementsByTagName('tr')[i].className = "newclass";
document.getElementsByTagName('tr')[i].style.color = "red";
...
}
var rows = document.getElementsByTagName("tr");
for(var i = 0 ; i < rows.length ; i++){
rows[i].className = "newclass";
rows[i].style.color = "red";
...
}
/*
上面两个都不是高效的,getElementsByTagName返回一个动态的对象,而不是一个静态的数组。
每次循环的时候,解析器都会再次检查对象,并且需要重新计算出有多少对象被引用。
下面是一种好一些的方式来进行这种循环(下面的第一种通常是最好的方式)
*/
/**
这种写法稍微有点不太好理解
这种方式的理解需要彻底的了解for循环
for循环有两个分号,等于说可以传3个参数
第一段实际上就是用来定义变量的
第二段实际上就是传入一个表达式
第三段一般传入的递增或者递减
我们需要仔细分析的第二段
只要是个表达式
我们平常使用的是i>1 , i< 100之类的
仔细看下,这种东西实际上返回的不是false就是true
所以,我们在这个地方传入的是false或者true的boolean值就行了
而这段代码里面传入的是
row = rows[i]
实际上判断boolean值的就是row这个变量
只要变量row转换为boolean的时候为true就继续进行循环
而rows[i]的i超过一定大小之后rows[i]就是null
那么row也是null,null转换为boolean值的时候就是==false
所以会停止循环,也就是循环判断终止的条件
*/
var rows = document.getElementsByTagName("tr");
for(var i = 0 , row;row = rows[i];i++){
row.className = 'newclass';
row.style.color = 'color';
...
}
var rows = document.getElementsByTagName("tr");
for(var i = rows.length - 1; i > -1;i--){
var row = rows[i];
row.className = 'newclass';
row.style.color = 'color';
...
}
/*这下面这一种是我们经常能看到的,虽然做了变量缓存,但是增加了一个不必要的变量m,增加了内存的使用量*/
var rows = document.getElementsByTagName("tr");
for(var i = 0 , m = rows.length; i < m;i++){
var row = rows[i];
row.className = 'newclass';
row.style.color = 'color';
...
}
/*
Reduce reflow
每次我们添加一个元素到document中,浏览器必须重新reflow整个page,所有的元素都会被重新设置位置和渲染
你添加的元素次数越多,reflow的次数也就越多。
所以应该减少reflow的次数,这样页面的展现也就越快。
如果你需要添加一个新元素,并且这个元素有很多子节点。
应该先将子元素添加到新元素上面,然后才将新元素append到页面上
这样只需要一次的reflow
但是有一种情况
就是你添加一个节点,并且需要给他新加一些相邻节点
这种情况下可以新建一个fragment,然后将这些节点加入到fragment上面
最后将fragment添加到document中。
*/
/*
Assign multiple styles
我们通过js来修改元素的style的时候
经常会这么写
*/
oElement.style.position = "absolute";
oElement.style.top = "0px";
oElement.style.left = "0px";
...etc...
/*再看另外一种写法*/
oElement.setAttribute("style","position:absolute;top:0px;left:0px;...etc...");
/*这种方式也可以将reflow的次数降低到一次*/
分享到:
相关推荐
高效javascript,高效javascript,高效javascript
本书为高效JavaScript 英文原版 Back in the 1970s, when personal computers were first introduced, most of them came equipped with a simple programming language—usually a variant of BASIC—and ...
Simple-Template(sTemplate),支持原生js脚本和HTML代码混排的简单/高效JS模板引擎
CoffeeScript这一门编程语言构建在JavaScript之上,其被编译成高效的JavaScript,这样你就可以在web浏览器上运行它,或是通过诸如用于服务器端应用的Node.js一类的技术来使用它。编译过程通常都很简单,产生出来的...
详细 介绍了如何正确的提高javascript运行效率。包括一些js本身的擦做,一些dom影响,页面载入影响等
资源名称:JavaScript高效图形编程内容简介:《Javascript高效图形编程》是一本具有很强实操性的Javascript图书,全书共分10章,涵盖的主要内容有:Javascript的面向对象机制、Javascript...
JAVASCRIPT高效图形编程JAVASCRIPT高效图形编程JAVASCRIPT高效图形编程JAVASCRIPT高效图形编程JAVASCRIPT高效图形编程JAVASCRIPT高效图形编程
NULL 博文链接:https://xielin2008.iteye.com/blog/687406
经过优化的高效树,异步展开
在浏览器和Node.js上, Auditor都使您放心编写高效JavaScript代码。 除了优雅地添加标准JavaScript代码外,Auditor还具有对React,Jest和TypeScript的一流支持。 请参阅有关用法的。 安装 npm install --save-dev ...
JAVASCRIPT高效图形编程_.pdf
JavaScript高效图形编程(中),原书中文版本
JavaScript书籍包括JavaScript模式.pdf、JavaScript高效图形编程.pdf。
JavaScript最初设计令人感觉亲切。由于其语法让人联想到Java,并且具有许多脚本语言的共同特性(如函数、数组、字典和正则表达式),因此,具有少量编程经验的人...本书每个章节都涵盖了高效JavaScript编程的不同主题。
《JavaScript高效图形编程》是一本具有很强实操性的JavaScript图书,全书共分10章,涵盖的主要内容有:JavaScript的面向对象机制、JavaScript性能优化、jQuery和ExtJS库、高级UI设计、Web游戏开发、面向移动设备的...
jsfft, 小型高效的Javascript FFT实现 jsfft用于 node 或者浏览器的小型。高效的Javascript实现。用法JSFFT附带的可以运行于以下位置:const fft = require('jsfft');// Use the in-place ma
javascript图像、动画技术,小游戏示例代码,html5画布,phonegap
deePool:高效的JavaScript对象池
Node.js是一个Javascript运行环境(runtime environment),发布于2009年5月,由Ryan Dahl开发,实质是对...Node.js 使用事件驱动, 非阻塞I/O 模型而得以轻量和高效,非常适合在分布式设备上运行数据密集型的实时应用。