js DOM优化相关探索
我在这尝试两个方面：-->DOM与js
-->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<;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或别的浏览器不一定会一样喔，欢迎留言一起钻研。
js DOM优化相关探索的更多相关文章
- JS DOM视频相关的知识
1.实现点击a标签改变图片时,如果a的href属性有一个目标网址,但是点击又必须跳转到另外一张图,往往会最后跳转到目标网址,可以在onclick事件函数中加入ruturn false,阻止跳转到页面. ...
- DOM的相关优化
为什么要进行DOM优化? DOM对象本身也是一个js对象,所以严格来说,并不是操作这个对象慢,而是说操作了这个对象后,会触发一些浏览器行为,比如布局(layout)和绘制(paint). 首先先说一些 ...
- JS DOM操作（创建、遍历、获取、操作、删除节点）
创建节点 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="u ...
- DOM优化
一:DOM与浏览器: 重排:改变页面的内容. 重绘:浏览器显示的内容. 添加顺序:尽量在appendchild之前. 合并DOM操作-利用csstext, 缓存布局信息 文档碎片. 二 DOM 与事件 ...
- js css优化-- 合并和压缩
在项目框架中,首先要引用很多css和js文件,80%的用户响应时间都是浪费在前端.而这些时间主要又是因为下载图片.样式表.JavaScript脚本.flash等文件造成的.减少这些资源文件的Reque ...
- js 性能优化 篇一
JS性能优化 摘自:http://www.china125.com/design/js/3631.htm 首先,由于JS是一种解释型语言,执行速度要比编译型语言慢得多.(注:,Chrome是第一款内 ...
- js性能优化文章集锦
总结的js性能优化方面的小知识http://www.it165.net/pro/html/201503/35336.html 如何优化你的JS代码http://www.php100.com/html/ ...
- JS DOM（文档对象模型）与BOM（浏览器对象模型）
在JS中,对DOM(Document Object Model)对象和BOM(Browser Object Model )对象的操作是非常重要的内容.DOM主要包括HTML文档的属性和方法,像对HTM ...
- JS、JQ相关小技巧积攒
JS.JQ相关小技巧积攒,以备不时之需. 1.js 获取时间差:时间戳相减.new Date().getTime() 获得毫秒数,除以(1000*60*60*24) 获得天数. 2.重定向操作:页面 ...
随机推荐
- 深入理解php底层：php生命周期 [转]
1.PHP的运行模式: PHP两种运行模式是WEB模式.CLI模式.无论哪种模式,PHP工作原理都是一样的,作为一种SAPI运行. 1.当我们在终端敲入php这个命令的时候,它使用的是CLI. 它就像 ...
- [学习笔记]坚果云网盘，SVN异地代码管理
SVN的好处不必多说了.但是如果希望有一份自己的用来学习和储备的代码仓库,那么能够异地同步是必不可少的了. 参考作者Mike_QSJ的文章,但是实际上做了很大的改动.一方面使用更常见的windows系 ...
- 利用(Tcmalloc) google-perftools优化Nginx和MySQL性能
一.安装libunwind wget http://download.savannah.gnu.org/releases/libunwind/libunwind-1.1.tar.gz 本地下载:htt ...
- 从Elo Rating System谈到层次分析法
1. Elo Rating System Elo Rating System对于很多人来说比较陌生,根据wikipedia上的解释:Elo评分系统是一种用于计算对抗比赛(例如象棋对弈)中对手双方技能水 ...
- 关于C#怎么固定窗口大小属性详解
原文地址:http://zhidao.baidu.com/link?url=aDqlJMuABC8IxXz5drmZcPIHHlTKX2mrfIpyRZNFp0IAB6RSxT24B2XXMRCK1e ...
- SaaS模式给用户带来的优势
这两年SaaS服务在中国越来越受欢迎,企业正在从使用本地化软件向SaaS服务转变.由于企业用户人力成本的上升.移动终端设备的兴起以及共享经济对企业的影响,企业采用经营设备.软件的方式也在逐渐发生着变化 ...
- 【转】scp 命令格式
SCP 命令 \ svn 删除所有的 .svn文件 find . -name .svn -type d -exec rm -fr {} \; linux之cp/scp命令+scp命令详解 名称 ...
- 使用DataOutputStream写入int类型数字不能显示
前段时间做Android系统项目需要使用DataOutputStream数据流向文件里写入数据,写入的有String类型和int类型.写入之后在代码中使用DataInputStream读出是没有问题的 ...
- EditPlus 3.1
User:GNU Serial:918A8-20DD8-44ZA1-B0W4A-13T66
- 设置代码Code高亮显示成蓝色
下面方法是让设置的关键字高亮显示,考虑到了注释与字符串的影响,所以备用,以便将来能够用到. private static void ColorizeCode(RichTextBox rtb) { st ...