1.DOM结构及其优化:DOM是Document Object Model(文档对象模型)的缩写,DOM是中立与平台和语言的接口,它允许程序或脚本动态地访问更新文档的内容、样式以及结构。DOM包含核心DOM、XML DOM和HTML DOM,HTML DOM是关于如何获取、添加、修改和删除HTML元素的标准
在HTML DOM中HTML文档中所有内容都被视为节点,DOM被视为节点树的HTML: (1)整个文档视为一个文档节点(2)每个HTML元素视为元素节点(3)HTML元素中的文本视为文本节点(4)每个HTML属性为属性节点(5)注释为注释节点
HTML DOM将HTML视为文档视为树结构,这种结构称为节点树,树中元素的关系可以总结为父、子和同胞:(1)在节点树中,顶端节点称为根节点(2)除了根节点,每个节点都有父节点(parent)(3)一个节点可以拥有任意多个子节点(4)拥有相同父节点为同胞(兄弟或姐妹)节点
优化:(1)在对html元素集合进行操作时,尽可能的减少访问dom的次数,如:
for(var t=0;t<100;t++){
document.getElementById("here").innerHTML+='a';
}
优化之后:
var t="";
for(var t=0;t<100;t++){
t+="a";
}
document.getElementById("here").innerHTML+='t';
(2)innerHTML比DOM快:遍历数组比遍历集合快,因此如果将集合元素拷贝到数组中,那么访问它的属性更快,但是也会有额外步骤的消耗,而且会有很多次的遍历一次集合,因此应该评估在特定条件下,使用数组拷贝是否有效:
集合操作缓存到局部变量:
var aDiv=document.getElementsByTagName("div"),
div_len=aDiv.length
for(var i=0,a=[],div_len=aDiv.length;i<div_len;i++){
a[i]=aDiv[i];
}
多使用innerHTML
- 有两种在页面上创建
DOM
节点的方法:- 使用诸如
createElement()
和appendChild()
之类的DOM
方法。 - 使用
innerHTML
。- 当使用
innerHTML
设置为某个值时,后台会创建一个HTML
解释器,然后使用内部的DOM
调用来创建DOM
结构,而非基于JAVASCRIPT
的DOM
调用。由于内部方法是编译好的而非解释执行,故执行的更快。 >对于小的DOM
更改,两者效率差不多,但对于大的DOM
更改,innerHTML
要比标准的DOM
方法创建同样的DOM
结构快得多。
- 当使用
- 使用诸如
因此,当遍历一个集合时,首要优化原则是把集合存储在局部变量中,并把length缓存在循环外部,然后使用局部变量访问这些需要多次访问的元素。
遍历DOM时:使用children代替childNodes更快,因为集合项更少,HTML源码中的空白实际上是文本节点,而且它并不包含在children集合中,在所有浏览器中,children都比childNodes要更快;
浏览器下载完页面上的所有组件,HTML标记,javascript,css,图片---之后会解析并生成两个内部数据结构:
DOM树:表示页面结构
渲染树:表示DOM节点如何显示。
一旦DOM和渲染树构建完成,浏览器就开始显示页面元素。
当DOM的变化影响了元素的几何属性,浏览器需要重新计算元素的几何属性,同样其他元素的几何属性和位置也会因此受到影响。
重排:是引起DOM树重新计算的行为
重绘:一个元素外观的改变(如color)所触发的浏览器行为
重排和重绘操作都是代价昂贵的操作,会导致web应用程序UI反应迟钝。所以,应该尽可能 的减少这类操作的发生。
重排何时发生:(1)添加和删除可见的DOM元素(2)元素位置的改变(3)元素尺寸改变(外边距,内边距,边框厚度,宽度,高度)(4)内容的改变(文本改变或图片被另一个不同尺寸的图片代替)(5)页面渲染器初始化(6)浏览器窗口尺寸的改变
减少重排和重绘的方法:(1)分离读写操作(2)样式集中改变,如:添加一个类来集中改变样式(3)脱离文档流:使用absolute或者fixed,使其脱离文档流,不影响其他元素(4)使用display:none,先把他移除文档后再恢复,不使用 visibility(可见元素,也占据空间,display不可见元素也不占据空间),也不要改变 它的 z-index
2.布局:三栏布局:(1)浮动布局:浮动元素脱离文档流(左右中结构)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.left{
width: 300px;
float: left;
background-color: red;
height: 600px;
}
.right{
width: 300px;
float: right;
background-color: green;
height: 600px;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
<div class="content"></div>
</body>
</html>
(2)绝对定位布局:使用absolute使两边脱离文档流,用margin属性流出左右两边的宽度,中间自适应宽度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.left{
background-color: red;
height: 300px;
position: absolute;
width: 100px;
left: 0;
}
.right{
background-color: green;
height: 300px;
position: absolute;
width: 100px;
right: 0;
}
.content{
margin: 20px 200px;
background-color: yellow;
height: 300px;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
<div class="content"></div>
</body>
</html>
(3)圣杯布局:左中右三栏都进行浮动,把一个的浮动到最上面,然后通过设置左边的margin-left:-100%,右边的margin-left:-100px;把左右两栏放在两侧,之后给整体的mian加一个左右的外边距为左右两栏的宽度,最后给左右两栏加上相对 定位,使其向两侧移动两栏的宽度大小
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.left{
width: 100px;
height: 600px;
background-color: red;
float: left;
margin-left: -100%;
position: relative;
left: -100px;
}
.right{
float: left;
width: 100px;
height: 600px;
background-color: green;
margin-left: -100px;
position: relative;
right: -100px;
}
.content{
float: left;
height: 600px;
width: 100%;
background-color: yellow;
}
.main{
padding-left: 100px;
padding-right: 100px;
}
</style>
</head>
<body>
<div class="main">
<div class="content">我们我们我们我们我们我们我们我们我们</div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
(4)双飞翼布局:双飞翼布局和圣杯布局类似,给三栏都加了浮动,只是在处理后面覆盖的地方有所不同,双飞翼布局是给中间一栏设置了margin-left和margin-right,舍弃了与两栏重合的地方
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.main{
float: left;
width: 100%;
}
.content{
background-color: red;
height: 600px;
margin-left: 100px;
margin-right: 100px;
}
.left{
float: left;
background-color: green;
width: 100px;
height: 600px;
margin-left: -100%;
}
.right{
float: left;
background-color: yellow;
width: 100px;
height: 600px;
margin-left: -100px;
}
</style>
</head>
<body>
<div class="main">
<div class="content">我们我们我们我们我们我们我们我们我们我们我们</div>
</div>
<div class="left"></div>
<div class="right"></div>
</body>
</html>