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.重定向操作:页面 ...
随机推荐
- spring知识大全（3）
4 Spring对持久层的支持 Spring对持久层的支持:① JDBC,② O/R Mapping(Hibernate,TopLink等) 一.Spring对持久层支持采用的策略: 1.Spring ...
- CentOS下搭建SVN
1.安装svn yum -y install subversion 2.创建hydata目录 mkdir -p /var/svn/hydata 3.创建 m 目录 mkdir -p /var/svn/ ...
- linux mysql操作命令
1.linux下启动mysql的命令:mysqladmin start/ect/init.d/mysql start (前面为mysql的安装路径) 2.linux下重启mysql的命令:mysqla ...
- 16.iOS APP图标和启动画面尺寸
1. 桌面图标 (app icon) for iPhone6 plus(@3x) : 180 x 180 for iPhone 6/5s/5/4s/4(@2x) : 120 x 120 2. 系统搜索 ...
- LoopbackJS 生成对应 Oracle 视图的model
StrongLoop Arc 工具中的discover model 目前只能discover 表, Oracle数据库中的视图经测试并不能显示在列表中. 无奈之下,暂时只能采取替代方案. 解决方法: ...
- Slide-卡盘效果
<div style="width:950px;height:705px;"> <div class="J_TWidget" data-wid ...
- flask_单元测试
我们现在可以试着在控制台向数据库添加一个用户: In[2]: import model; In[3]: from microblog import db; In[4]: u=model.User(ni ...
- C#内存释放
看微软件的宣传说NET会自动回收内存.以前一直以为NET会自动回收也没有去细看. 近来发现NET下的winForm程序,默认情况下不会自动释放内存.如果是循执行的程序内存会不断增大.具体会大到多少没有 ...
- C# 实现 任意多边形切割折线算法
1. 内容简介 本文旨在解决任意多边形切割折线,获取切割之后的折线集合. 本文实现的算法内容包括:判断两条线段是否相交,如若相交,获取交点集合.对线上的点集,按斜率方向排序.判断点是否在多边形内 ...
- Windows 商店应用中使用 Office 365 API Tools
本篇我们介绍一个API 工具,用于在 Windows Store App 中使用 Office 365 API. 首先来说一下本文的背景: 使用 SharePoint 做过开发的同学们应该都知道,Sh ...