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.重定向操作:页面 ...
随机推荐
- Linux下使用Eclipse开发Hadoop应用程序
在前面一篇文章中介绍了如果在完全分布式的环境下搭建Hadoop0.20.2,现在就再利用这个环境完成开发. 首先用hadoop这个用户登录linux系统(hadoop用户在前面一篇文章中创建的),然后 ...
- virtual 修饰符 C# .NET
virtual 关键字用于修饰方法.属性.索引器或事件声明,并且允许在派生类中重写这些对象. 例如,此方法可被任何继承它的类重写. (C#参考) public virtual double Area( ...
- 大前端学习笔记整理【六】this关键字详解
前言 在上一篇博客里我总结了下辨认this指向的四种方式,但是有师兄抛出一个问题来,我发现那些this的指向并不能说明更复杂的情况,先看下这段代码 var a = { name: 'a', getNa ...
- Enterprise app deployment on iOS 7.1 by github
在iOS7.1以上版本通过Url分发企业应用时,需要采用SSL方式分发plist.如果采用http方式,就会报“无法安装应用程序,因为"example.com"的证书无效.”正确的 ...
- spring in action 第五章基于注解搭建SpringMvc环境
request的生命历程
- Ubuntu下命令行方式对PDF文件进行缩放、合并、拆分
安装软件: sudo aptitude install ghostscript 然后执行命令: gs -dNOPAUSE -dBATCH -sDEVICE=pdfwrite -dCompatibili ...
- flask_用户信息和头像
一.用户信息页 1.创建视图函数(microblog.py) @app.route('/user/<nickname>') @login_required def user(nicknam ...
- JAVA里面的IO流（二）方法1、输入流
- 8.2 辅助 xUtils 3.0
主要有四大模块: DbUtils模块: android中的orm(对象关系映射)框架,一行代码就可以进行增删改查: 支持事务,默认关闭: 可通过注解自定义表名,列名,外键,唯一性约束,NOT NULL ...
- C++是一把很奇怪的刀
C++是一把很奇怪的刀,首尾都是刀刃.用刀能出什么,还是要看拿刀的人.