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.重定向操作:页面 ...
随机推荐
- windows读取mac格式移动硬盘的方法
本文记录了一些window与mac数据在移动设备上互相拷贝的经验. 一.准备 家里有一台mac电脑,限于硬盘空间比较小,需要定期备份一些数据. 由于备份数据大小在20G左右,并且并没有压缩为一个压缩文 ...
- 关于公司VPN专线接入的一个案例
最近互通网络技术部门收到一到封邮件,是关于公司VPN接入的问题,问题如下: 条件:A区为办公地点1,其他办公电脑20台,并通过写字楼的宽带接口联通外网. B区为新办公地点2,预设应用.数据库.备份服务 ...
- Process 执行shell 脚本
概述: Process类是一个抽象类(所有的方法均是抽象的),封装了一个进程(即一个执行程序). Process 类提供了执行从进程输入.执行输出到进程.等待进程完成.检查进程的退出状态以及销毁(杀掉 ...
- 12个Linux进程管理命令介绍(转)
12个Linux进程管理命令介绍 [日期:2015-06-02] 来源:Linux中国 作者:Linux [字体:大 中 小] 执行中的程序在称作进程.当程序以可执行文件存放在存储中,并且运行的 ...
- 设计模式可复用面向对象软件设计基础之对象创建型模式—ABSTRACT FACTORY（ 抽象工厂）
意图 提供一个创建一系列相关或相互依赖对象的接口,而无需指定它们具体的类. 适用性 在以下情况可以使用 Abstract Factory模式 • 一个系统要独立于它的产品的创建.组合和表示时. • 一 ...
- Class 'Illuminate\Html\HtmlServiceProvider' not found或者form表单不能正常使用解决办法
在laravel框架中,form不能正常使用如何处理. 网上搜到的解决方案通常都是一致的,下面分类考虑: 1,打开根目录composer.json 文件, require 里面增加: 如果larave ...
- iOS 取绝对值函数
1.abs(a) 处理int类型a的取绝对值 2.fabsf(a) 处理float类型a的取绝对值 3.fabs(a) 处理double类型a的取绝对值
- grep及正则表达式
文本搜索工具:grep,egrep,fgrep GREP介绍 grep: 根据模式条件搜索文本,并将符合模式的文本行显示出来. 过滤条件:文本字符和正则表达式的元字符组合而成匹配条件 以正则表达式的 ...
- [转载]Firebird与MySQL:一个使用者的体会
老板要我开发一个LINUX平台上的数据库项目,要求一定要用开源免费数据库.我知道这个数据库必须能够上网操作,同时作为公司的核心骨干数据库,除了必须是稳定的存储数据库外还必须有很强的数据和数据库控管功能 ...
- Spring MVC 流程图（转）
Spring MVC工作流程图 图一 图二 Spring工作流程描述 1. 用户向服务器发送请求,请求被Spring 前端控制Servelt DispatcherServle ...