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.重定向操作:页面 ...
随机推荐
- 一个Email
Email 1.接受表单数据并用单独变量保存起来,判断用户协议,这个是必须同意的.2.判断验证码,利用验证码类Captcha.3.判断用户名,密码,邮箱规则,利用Verify类验证.4.判断唯一性,邮 ...
- Java 内部类摘抄
关于Java的内部类,要说的东西实在太多,这篇博文中也无法一一具体说到,所以就挑些重点的讲.关于内部类的使用,你可能会疑问,为什么我们要使用内部类?为了回答这个问题,你需要知道一些关于内部类的重点.所 ...
- Jfinal连接SQLSERVER相关配置说明
driver=net.sourceforge.jtds.jdbc.Driver jdbcUrl = jdbc:sqlserver://localhost:1433;DatabaseName=test ...
- Shell--用户配置
vim /etc/profileexport PS1='\[\e[1;33m\]\h\[\e[m\] \t [\[\e[1;36m\]\w\[\e[m\]] [\u] ' export LANG= ...
- asp.net C# cookies 的使用方法
Response.Cookie("username").value="aa" 写入username=Request.Cookies("username ...
- vs
https://www.visualstudio.com/downloads/download-visual-studio-vs
- How to copy remote computer files quickly to local computer
if we want copy file from VM(Remote VM) to local computer. Always can not easy copy file so easy. no ...
- Java LinkedList 源码剖析
LinkedList同时实现了List接口和Deque接口,也就是说它既可以看作一个顺序容器,又可以看作一个队列(Queue),同时又可以看作一个栈(Stack).这样看来,LinkedList简直就 ...
- C# 部分语法总结(入门经典)
class Program { static void Main(string[] args) { init(); System.Console.ReadKey(); } #region 接口 /// ...
- MATLAB 画出三个通信小区cell边界示意图
d=1000; %两个小区中心间距离的一半 rcell=2*d/sqrt(3); %小区半径 ncell=3; %小区个数 cellposition=zeros(ncell,2); %初始化小区中心位 ...