提高JS性能注意事项(转载)
1. DOM
1.1 使用DocumentFragment优化多次append
说明:添加多个dom元素时,先将元素append到DocumentFragment中,最后统一将DocumentFragment添加到页面。
该做法可以减少页面渲染dom元素的次数。经IE和Fx下测试,在append1000个元素时,效率能提高10%-30%,Fx下提升较为明显。
服用前:
for (var i = 0; i < 1000; i++) {
var el = document.createElement('p');
el.innerHTML = i;
document.body.appendChild(el);
}
服用后:
var frag = document.createDocumentFragment();
for (var i = 0; i < 1000; i++) {
var el = document.createElement('p');
el.innerHTML = i;
frag.appendChild(el);
}
document.body.appendChild(frag);
1.2 通过模板元素clone,替代createElement
说明:通过一个模板dom对象cloneNode,效率比直接创建element高。
性能提高不明显,约为10%左右。在低于100个元素create和append操作时,没有优势。
服用前:
var frag = document.createDocumentFragment();
for (var i = 0; i < 1000; i++) {
var el = document.createElement('p');
el.innerHTML = i;
frag.appendChild(el);
}
document.body.appendChild(frag);
服用后:
var frag = document.createDocumentFragment();
var pEl = document.getElementsByTagName('p')[0];
for (var i = 0; i < 1000; i++) {
var el = pEl.cloneNode(false);
el.innerHTML = i;
frag.appendChild(el);
}
document.body.appendChild(frag);
1.3 使用一次innerHTML赋值代替构建dom元素
说明:根据数据构建列表样式的时候,使用设置列表容器innerHTML的方式,比构建dom元素并append到页面中的方式,效率有数量级上的提高。
服用前:
var frag = document.createDocumentFragment();
for (var i = 0; i < 1000; i++) {
var el = document.createElement('p');
el.innerHTML = i;
frag.appendChild(el);
}
document.body.appendChild(frag);
服用后:
var html = [];
for (var i = 0; i < 1000; i++) {
html.push('<p>' + i + '</p>');
}
document.body.innerHTML = html.join('');
1.4 使用firstChild和nextSibling代替childNodes遍历dom元素
说明:约能获得30%-50%的性能提高。逆向遍历时使用lastChild和previousSibling。
服用前:
var nodes = element.childNodes;
for (var i = 0, l = nodes.length; i < l; i++) {
var node = nodes[i];
……
}
服用后:
var node = element.firstChild;
while (node) {
……
node = node.nextSibling;
}
2. 字符串
2.1 使用Array做为StringBuffer,代替字符串拼接的操作
说明:IE在对字符串拼接的时候,会创建临时的String对象;经测试,在IE下,当拼接的字符串越来越大时,运行效率会急剧下降。Fx和Opera都对字符串拼接操作进行了优化;经测试,在Fx下,使用Array的join方式执行时间约为直接字符串拼接的1.4倍。
服用前:
var now = new Date();
var str = '';
for (var i = 0; i < 10000; i++) {
str += '123456789123456789';
}
alert(new Date() - now);
服用后:
var now = new Date();
var strBuffer = [];
for (var i = 0; i < 10000; i++) {
strBuffer.push('123456789123456789');
}
var str = strBuffer.join('');
alert(new Date() - now);
3. 循环语句
3.1 将循环控制量保存到局部变量
说明:对数组和列表对象的遍历时,提前将length保存到局部变量中,避免在循环的每一步重复取值。
服用前:
var list = document.getElementsByTagName('p');
for (var i = 0; i < list.length; i++) {
……
}
服用后:
var list = document.getElementsByTagName('p');
for (var i = 0, l = list.length; i < l; i++) {
……
}
3.2 顺序无关的遍历时,用while替代for
说明:该方法可以减少局部变量的使用。比起效率优化,更能直接看到的是字符数量的优化。该做法有程序员强迫症的嫌疑。
服用前:
var arr = [1,2,3,4,5,6,7];
var sum = 0;
for (var i = 0, l = arr.length; i < l; i++) {
sum += arr[i];
}
服用后:
var arr = [1,2,3,4,5,6,7];
var sum = 0, l = arr.length;
while (l--) {
sum += arr[l];
}
4. 条件分支
4.1 将条件分支,按可能性顺序从高到低排列
说明:可以减少解释器对条件的探测次数。
4.2 在同一条件子的多(>2)条件分支时,使用switch优于if
说明:switch分支选择的效率高于if,在IE下尤为明显。4分支的测试,IE下switch的执行时间约为if的一半。
4.3 使用三目运算符替代条件分支
服用前:
if (a > b) {
num = a;
} else {
num = b;
}
服用后:
num = a > b ? a : b;
5. 定时器
5.1 需要不断执行的时候,优先考虑使用setInterval
说明:setTimeout每一次都会初始化一个定时器。setInterval只会在开始的时候初始化一个定时器
服用前:
var timeoutTimes = 0;
function timeout () {
timeoutTimes++;
if (timeoutTimes < 10) {
setTimeout(timeout, 10);
}
}
timeout();
服用后:
var intervalTimes = 0;
function interval () {
intervalTimes++;
if (intervalTimes >= 10) {
clearInterval(interv);
}
}
var interv = setInterval(interval, 10);
5.2 使用function而不是string
说明:如果把字符串作为setTimeout和setInterval的参数,浏览器会先用这个字符串构建一个function。
服用前:
var num = 0;
setTimeout('num++', 10);
服用后:
var num = 0;
function addNum () {
num++;
}
setTimeout(addNum, 10);
6. 其他
6.1 尽量不使用动态语法元素
说明:eval、Function、execScript等语句会再次使用javascript解析引擎进行解析,需要消耗大量的执行时间。
6.2 重复使用的调用结果,事先保存到局部变量
说明:避免多次取值的调用开销。
服用前:
var h1 = element1.clientHeight + num1;
var h2 = element1.clientHeight + num2;
服用后:
var eleHeight = element1.clientHeight;
var h1 = eleHeight + num1;
var h2 = eleHeight + num2;
6.3 使用直接量
说明:
var a = new Array(param,param,...) -> var a = []
var foo = new Object() -> var foo = {}
var reg = new RegExp() -> var reg = /.../
6.4 避免使用with
说明: with虽然可以缩短代码量,但是会在运行时构造一个新的scope。
OperaDev上还有这样的解释,使用with语句会使得解释器无法在语法解析阶段对代码进行优化。对此说法,无法验证。
服用前:
with (a.b.c.d) {
property1 = 1;
property2 = 2;
}
服用后:
var obj = a.b.c.d;
obj.property1 = 1;
obj.property2 = 2;
6.5 巧用||和&&布尔运算符
重要程度:
服用前:
function eventHandler (e) {
if(!e) e = window.event;
}
服用后:
function eventHandler (e) {
e = e || window.event;
}
服用前:
if (myobj) {
doSomething(myobj);
}
服用后:
myobj && doSomething(myobj);
6.6 类型转换
说明:
1). 数字转换成字符串,应用"" + 1,性能上:("" +) > String() > .toString() > new String();
2). 浮点数转换成整型,不使用parseInt(), parseInt()是用于将字符串转换成数字,而不是浮点数和整型之间的转换,建议使用Math.floor()或者Math.round()
3). 对于自定义的对象,推荐显式调用toString()。内部操作在尝试所有可能性之后,会尝试对象的toString()方法尝试能否转化为String。
二.内存管理
2.1 循环引用
说明:如果循环引用中包含DOM对象或者ActiveX对象,那么就会发生内存泄露。内存泄露的后果是在浏览器关闭前,即使是刷新页面,这部分内存不会被浏览器释放。
简单的循环引用:
var el = document.getElementById('MyElement');
var func = function () {…}
el.func = func;
func.element = el;
但是通常不会出现这种情况。通常循环引用发生在为dom元素添加闭包作为expendo的时候。
如:
function init() {
var el = document.getElementById('MyElement');
el.onclick = function () {……}
}
init();
init在执行的时候,当前上下文我们叫做context。这个时候,context引用了el,el引用了function,function引用了context。这时候形成了一个循环引用。
下面2种方法可以解决循环引用:
1) 置空dom对象
服用前:
function init() {
var el = document.getElementById('MyElement');
el.onclick = function () {……}
}
init();
服用后:
function init() {
var el = document.getElementById('MyElement');
el.onclick = function () {……}
el = null;
}
init();
将el置空,context中不包含对dom对象的引用,从而打断循环应用。
如果我们需要将dom对象返回,可以用如下方法:
服用前:
function init() {
var el = document.getElementById('MyElement');
el.onclick = function () {……}
return el;
}
init();
服用后:
function init() {
var el = document.getElementById('MyElement');
el.onclick = function () {……}
try{
return el;
} finally {
el = null;
}
}
init();
2) 构造新的context
服用前:
function init() {
var el = document.getElementById('MyElement');
el.onclick = function () {……}
}
init();
服用后:
function elClickHandler() {……}
function init() {
var el = document.getElementById('MyElement');
el.onclick = elClickHandler;
}
init();
把function抽到新的context中,这样,function的context就不包含对el的引用,从而打断循环引用。
2.2 通过javascript创建的dom对象,必须append到页面中
说明:IE下,脚本创建的dom对象,如果没有append到页面中,刷新页面,这部分内存是不会回收的!
示例代码:
function create () {
var gc = document.getElementById('GC');
for (var i = 0; i < 5000 ; i++)
{
var el = document.createElement('div');
el.innerHTML = "test";
//下面这句可以注释掉,看看浏览器在任务管理器中,点击按钮然后刷新后的内存变化
gc.appendChild(el);
}
}
2.3 释放dom元素占用的内存
说明:
将dom元素的innerHTML设置为空字符串,可以释放其子元素占用的内存。
在rich应用中,用户也许会在一个页面上停留很长时间,可以使用该方法释放积累得越来越多的dom元素使用的内存。
2.4 释放javascript对象
说明:在rich应用中,随着实例化对象数量的增加,内存消耗会越来越大。所以应当及时释放对对象的引用,让GC能够回收这些内存控件。
对象:obj = null
对象属性:delete obj.myproperty
数组item:使用数组的splice方法释放数组中不用的item
2.5 避免string的隐式装箱
说明:对string的方法调用,比如'xxx'.length,浏览器会进行一个隐式的装箱操作,将字符串先转换成一个String对象。推荐对声明有可能使用String实例方法的字符串时,采用如下写法:
var myString = new String('Hello World');
本文转自温景良博客园博客,原文链接:http://www.cnblogs.com/wenjl520/archive/2008/10/23/1318080.html,如需转载请自行联系原作者
提高JS性能注意事项(转载)相关推荐
- google统计ga.js本地化提高网站性能
Google分析代码到底会不会影响网页性能?本地托管ga.js是否可行?本文提供本地服务器托管ga.js的基本思路与实现方法. Google Anlytics 分析代码是异步加载的,一般来讲不会影响网 ...
- 我总结的js性能优化的小知识
阅读目录 前言 避免全局查找 定时器 字符串连接 避免with语句 数字转换成字符串 浮点数转换成整型 各种类型转换 多个类型声明 插入迭代器 使用直接量 使用DocumentFragment优化多次 ...
- OneAPM大讲堂 | 提高JavaScript性能的30个技巧
文章系国内领先的 ITOM 管理平台供应商 OneAPM 编译呈现. 您是网站管理员还是网页开发人员?想创建超快速的网站吗? 今天我们来看看 JavaScript,这项神奇而又复杂的技术.它使网站内容 ...
- 扩有mysql的磁盘_为提高MySQL性能而在磁盘IO方面的设置
提起MySQL数据库在硬件方面的优化无非是CPU.内存和IO.下面我们着重梳理一下关于磁盘I/O方面的优化. 1.磁盘冗余阵列RAID RAID(Redundant Array of Inexpens ...
- jQuery性能优化指南(转载)
现在jquery应用的越来越多, 有些同学在享受爽快淋漓coding时就将性能问题忽略了, 比如我. jquery虽在诸多的js类库中性能表现还算优秀, 但毕竟不是在用原生的javascript开发, ...
- java 调用 js性能_太快了,太变态了:什么会影响Java中的方法调用性能?
java 调用 js性能 那么这是怎么回事? 让我们从一个简短的故事开始. 几周前,我提议对Java核心libs邮件列表进行更改 ,以覆盖当前final一些方法. 这刺激了一些讨论主题-其中之一是其中 ...
- link标签的几个用法,帮助提高页面性能
写在前面 本文首发于公众号:符合预期的CoyPan HTML 中****元素规定了外部资源与当前文档的关系.最常见的用法,是用来链接一个外部的样式表,比如: <link href="m ...
- 关于提高网站性能的几点建议(二)
在 上一篇 中,从HTTP请求到页面渲染几个方面对提高网站性能提出了几点建议,本文是学习Steve Sounders的另外一本书<高性能网站建设进阶指南>之后,从JavaScript性能的 ...
- 网页性能优化{雅虎[转载]}
雅虎团队经验:网站页面性能优化的34条黄金守则 1.尽量减少HTTP请求次数 终端用户响应的时间中,有80%用于下载各项内容.这部分时间包括下载页面中的图像.样式表.脚本.Flash等.通 ...
最新文章
- linux系统管理工具sar(一)
- 一个嵌入式硬件驱动模块通常应包括哪些函数?
- html制作动态坐标轴,HTML5 canvas制作动态随机星图
- fodera开机启动优化
- avogadro_Avogadro
- Android四大组件之BroadCast(续)
- (转)msys2使用教程
- JAXB众所周知的秘密
- 本周任务asp.net 1.1老系统移植升级到asp.net 2.0,又是一个浩大的工程啊?
- 爬虫python能做什么-Python除了能做爬虫之外还能做什么?
- 养生之道之一_吃喝相关[转载]
- Fiddler的安装和使用教程(详细)
- 利用Email包实现邮件的群收发功能
- 概率论考点之概率的性质(全概公式及贝叶斯公式)
- 百度云不限速破解详细教程附工具
- Sen2Cor+SNAP处理Sentinel数据
- 我的世界服务器启动txt文件,我的世界服务器开启设置全攻略 我的世界开服图文详细教程...
- 【算法训练营学习笔记-Week06】一遍不懂就多刷几遍
- 计算机配置ppt制作,做ppt.ps要用什么样的配置的手提电脑做
- Java collection集合截断