js DOM优化相关探索
2014-09-25 13:18
190 查看
我在这尝试两个方面:-->DOM与js
-->DOM与浏览器
(最近在秒味视频上学到不少,哈哈哈)
一、DOM与js
1.js与dom的交互问题
频繁的与dom交互,是一件浪费时间与金钱的事情,这就需要我们尽量改进自己的代码,让我们想做的事情尽量在js中做的差不多了在去跟dom打交道。
下面的小例子就说明了问题:
(在chrome下)
这个时间的对比还是比较明显的喔。 对了,这console.time()和console.timeEnd()还挺好用的吧,其实console 还有好多亮瞎人眼的方法,可以自行google或百度脑补。
<------STOP START------->:
写到上面代码时,用到了window.onload,然后这里暂时说点别的,看下面的代码:
对吧,这只会alert('2')嘛,也就是说window.onload不能同时加载多个函数,后面的会覆盖掉前面的。
那怎么办呢? 这有一个简单易用的方法:
这样就可以1和2都弹窗了。
不过更加庆幸的是,我们还有更好的方法来为 一个事件指派多个处理程序了那就是addEventListener和attachEvent:
就是ie中可能执行顺序会有点不一样而已啦。
<------STOP END------->
2.在于dom交互时innerHTML与dom方法(像appendChild()这样的方法)之间的效率比较:
下面是时间对比:
chrome:
FF:
奇异的事实证明两个浏览器下都是dom方法运行速度比较快。在我以前的认知里面两个浏览器的表现不应该是一致的,感觉ff下innerHTML应该会比dom快的。
此处也求高人指点。
3.我们知道与dom相关的行为都会牵扯到时间问题,那么怎么减少dom操作呢?
---->使用节点克隆
虽然相差不大,但是还是不一样的:
chrome:
--->尽量使用局部变量
下面两种写法也是会影响效率的,因为每次都要获取aLi.length集合也是要代价的,保存成局部变量会好些那。
在上面添加10000个节点例子中尝试:
同样的下面两种写法也是有区别的:
---->还有就是尽量只是用获取元素节点的方法:
二、dom与浏览器
1.添加操作(尽量在appendChild前添加操作)
还是有一定的差别喔,可以自己动手试一下。
2.合并dom操作(利用cssText)
3.缓存布局信息:
我这里一般测试时间都是在chrome下,有的ff或别的浏览器不一定会一样喔,欢迎留言一起钻研。
-->DOM与浏览器
(最近在秒味视频上学到不少,哈哈哈)
一、DOM与js
1.js与dom的交互问题
频繁的与dom交互,是一件浪费时间与金钱的事情,这就需要我们尽量改进自己的代码,让我们想做的事情尽量在js中做的差不多了在去跟dom打交道。
下面的小例子就说明了问题:
<!DOCTYPE html> <html lang="zh"> <head> <meta charset=utf-8> <title>dom优化相关</title> </head> <style> </style> <body> <div id="div1"></div> <script> window.onload = function(){ var nDiv = document.getElementById('div1'); var str = ''; /*console.time("innerHTML10000个a所用的时间"); //每次循环dom都与js交互,太浪费时间啦 for(var i=0;i<10000;i++){ nDiv.innerHTML += 'a'; } console.timeEnd("innerHTML10000个a所用的时间");*/ console.time("获得10000个a之后innerHTML所用的时间"); //这种就减少了js与dom的交互,大量的循环只在js中实现 for(var i=0;i<10000;i++){ str += 'a'; } nDiv.innerHTML = str; console.timeEnd("获得10000个a之后innerHTML所用的时间"); } </script> </body> </html>
(在chrome下)
这个时间的对比还是比较明显的喔。 对了,这console.time()和console.timeEnd()还挺好用的吧,其实console 还有好多亮瞎人眼的方法,可以自行google或百度脑补。
<------STOP START------->:
写到上面代码时,用到了window.onload,然后这里暂时说点别的,看下面的代码:
function t(){ alert("1") } function b(){ alert("2") } window.onload =t ; window.onload =b ;
对吧,这只会alert('2')嘛,也就是说window.onload不能同时加载多个函数,后面的会覆盖掉前面的。
那怎么办呢? 这有一个简单易用的方法:
function t(){ alert("1") } function b(){ alert("2") } window.onload = function(){ t(); b(); }
这样就可以1和2都弹窗了。
不过更加庆幸的是,我们还有更好的方法来为 一个事件指派多个处理程序了那就是addEventListener和attachEvent:
if(window.attachEvent){ window.attachEvent('onload',function(){ alert('ie1'); }); window.attachEvent('onload',function(){ alert('ie2'); }); }else{ window.addEventListener('load',function(){ alert('1'); }); window.addEventListener('load',function(){ alert('2'); }); }
就是ie中可能执行顺序会有点不一样而已啦。
<------STOP END------->
2.在于dom交互时innerHTML与dom方法(像appendChild()这样的方法)之间的效率比较:
<!DOCTYPE html> <html lang="zh"> <head> <meta charset=utf-8> <title>dom优化相关</title> </head> <style> </style> <body> <div id="div1"></div> <ul id="oul"></ul> <script> window.onload = function(){ var UL = document.getElementById('oul'); var str=''; console.time('dom操作所用时间'); for(var i=0;i<10000;i++){ var LI = document.createElement('li'); UL.appendChild(LI); } console.timeEnd('dom操作所用时间'); console.time('innerHTML操作所用时间'); for(var i=0;i<10000;i++){ str += '<li></li>'; } UL.innerHTML = str; console.timeEnd('innerHTML操作所用时间'); } </script> </body> </html>
下面是时间对比:
chrome:
FF:
奇异的事实证明两个浏览器下都是dom方法运行速度比较快。在我以前的认知里面两个浏览器的表现不应该是一致的,感觉ff下innerHTML应该会比dom快的。
此处也求高人指点。
3.我们知道与dom相关的行为都会牵扯到时间问题,那么怎么减少dom操作呢?
---->使用节点克隆
<!DOCTYPE html> <html lang="zh"> <head> <meta charset=utf-8> <title>dom优化相关</title> </head> <style> </style> <body> <div id="div1"></div> <ul id="oul"></ul> <script> window.onload = function(){ var UL = document.getElementById('oul'); var str=''; /*console.time('dom操作所用时间'); for(var i=0;i<10000;i++){ var LI = document.createElement('li'); LI.innerHTML = 'li'; UL.appendChild(LI); } console.timeEnd('dom操作所用时间');*/ console.time('克隆节点所用时间'); var LI = document.createElement('li'); LI.innerHTML = 'li'; for(var i=0;i<10000;i++){ var newLi = LI.cloneNode(true); UL.appendChild(LI); } console.timeEnd('克隆节点所用时间'); } </script> </body> </html>
虽然相差不大,但是还是不一样的:
chrome:
--->尽量使用局部变量
下面两种写法也是会影响效率的,因为每次都要获取aLi.length集合也是要代价的,保存成局部变量会好些那。
for(var i=0;i<aLi.length;i++){ aLi[i].innerHTML = 'li'; }
var len = aLi.length; for(var i=0;i<len;i++){ aLi[i].innerHTML = 'li'; }
在上面添加10000个节点例子中尝试:
同样的下面两种写法也是有区别的:
var Div = document.getElementById(); var LI = document.getElementById(); var Input = document.getElementById(); //改成下面这样会比较好 var doc = document; var Div = doc.getElementById(); var LI = doc.getElementById(); var Input = doc.getElementById();
---->还有就是尽量只是用获取元素节点的方法:
childNodes -->元素节点、文本节点 children--> 元素节点 (利用querySelectorAll) var oul = document.getElementById('uli'); var ali = oul.getElementById('li'); --> var aLi = document.querySelectorAll('#uli li');
二、dom与浏览器
1.添加操作(尽量在appendChild前添加操作)
<!DOCTYPE html> <html lang="zh"> <head> <meta charset=utf-8> <title>dom优化相关</title> </head> <style> #div1 { width: 100px; height: 100px; background: red; position: absolute; } </style> <body> <div id="div1"></div> <ul id="oul"></ul> <script> window.onload = function(){ var oul = document.getElementById('oul'); console.time('dom操作时间'); for(var i=0;i<10000;i++){ var oli = document.createElement('li'); //注意下面两句的位置 //oul.appendChild(oli); //oli.innerHTML = 'li'; oli.innerHTML = 'li'; oul.appendChild(oli); } } console.timeEnd('dom操作时间'); } </script> </body> </html>
还是有一定的差别喔,可以自己动手试一下。
2.合并dom操作(利用cssText)
window.onload = function(){ var oul = document.getElementById('oul'); console.time('dom操作时间'); for(var i=0;i<10000;i++){ var oli = document.createElement('li'); //事实上我们总以为下面第二种方法会更好些,时间会更短,但是,分别在FF和chrome中测试的话,还是有点奇妙的。(chrome中神奇的第二种更快些) oli.style.width = '100px'; oli.style.height = '100px'; oli.style.background = 'red'; //oli.style.cssText = 'width:100px;height:100px;background:red'; } console.timeEnd('dom操作时间'); }
3.缓存布局信息:
window.onload = function(){ var oDiv = document.getElementById('div1'); var l = oDiv.offsetLeft; var t = oDiv.offsetTop; //setInterval(function(){ // oDiv.style.left = oDiv.offsetLeft + 1 + 'px'; // oDiv.style.top = oDiv.offsetTop + 1 + 'px'; //},30); //把总是会用到的布局信息缓存起来,这样就不用总是频繁的去访问dom了 setInterval(function(){ l++; t++; oDiv.style.left = l + 1 + 'px'; oDiv.style.top = t + 1 + 'px'; },30); }
我这里一般测试时间都是在chrome下,有的ff或别的浏览器不一定会一样喔,欢迎留言一起钻研。
相关文章推荐
- 关于数据处理相关的优化
- PHP程序加速探索[6]--代码优化
- 请问mysql优化相关
- Oracle Freelist和HWM原理探讨及相关性能优化
- Asp.net性能优化总结[关于数据处理相关的优化]
- Asp.net性能优化总结[关于数据处理相关的优化]
- 关于数据处理相关的优化
- 优化MOSS系统资源的一些相关设置
- [收集|整理]优化SQL Server数据库相关注意事项
- MMX汇编优化相关下载
- 关于asp.net 性能——关于数据处理相关的优化(转)
- MySQL优化全攻略-相关数据库命令
- 关于数据处理相关的优化
- 关于asp.net 性能——关于数据处理相关的优化(转)
- 基于相关关键字搜索引擎优化的网站排名分析项目
- 数据处理相关的优化
- php代码优化及php相关问题总结
- Oracle Freelist和HWM原理探讨及相关性能优化
- MySQL优化全攻略-相关数据库命令
- [算法优化]优化阶乘算法的探索