html与css知识点总结（二）

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>

html与css知识点总结（二）

猜你喜欢