JS CSS兼容性处理

一、页面的生命周期：
	request------->加载------->展现------->销毁
JQuery应用each:
	$.each
	遍历数组
		$.each(array , function(index , item) {} )
	遍历对象
		$.each(json , function(key , value) {} )
	遍历元素
		$.each($(“.class”) , function(index , item) {
			this.val();
		} )
跳出循环
	return false;  ≈  break
	return true;  ≈ continue

$.live
   事件委派适用于对还不存在的页面元素添加监听
   $(“.btn”).live(“click” , function(){ … } );
   $(“<button class=“btn”>确认</button>”).appendTo(“#div”);

$.data
  用于储存页面需要用的数据，类似于java中的Map
  $(“#tmpData”).data(“state” , “addnew”);
  …
  if($(“#tmpData”).data(“state”) == “addnew”){ … }

二、JS性能：
1.避免嵌入页面的JS
	JS下载过程中会阻塞其后JS的下载和渲染
	嵌入JS执行过程会阻塞页面所有内容渲染，而引用JS只阻塞之后的页面渲染
	浏览器会等所有样式下载完成再执行JS
2.避免频繁的DOM更新或遍历
	DOM结构更新浏览器会重新渲染
	更新处理时间 document.write > createElement() > cloneNode()
	使用更精确的选择器

三、布局：
1. 文档流
	将窗体自上而下分成很多行，并在每行从左到右排列元素
	元素类型(display)
		none : 隐藏并从文档流中删除（visibility: hidden 只隐藏）
		inline : 内联元素，只能容纳文本和其他内联元素，不换行（比如a）
		block : 块级元素，前后换行的容器（比如div，table）
		inline-block : 不换行的容器
	可以通过css改变元素的类型
	内联元素通过 vertical-align 属性设置与父元素对齐方式
2.浮动(float)
	浮动最先为了段首下沉和文字环绕设计
	浮动元素仍然占用文档流（与绝对定位区别）
	块级元素本来独占一行，在水平方向延伸到边界，浮动以后宽度缩减到最小内容宽度
	一行容不下以后，右侧元素换行（寻找最靠上的可容纳空间，与内联元素之间换行不同）
	父元素如果只包含浮动元素，高度会塌缩为0
	利用clear清除浮动（left , right , both）
四、兼容性： 
1. IE下load子页面样式加载延迟
	在父页面预先引入样式文件
	在加载时将样式文件添加到head中
2. IE6下浮动引起的bug
	浮动容器内元素（如图片）超过宽度时推开右侧浮动元素，设置overflow:hidden即可
	对浮动元素设置与浮动方向相同的magin属性时，会有双倍边距，设置display:inline即可
3.IE卡死问题
	IE6使用AlphaImageLoader滤镜加载png图片，如果图片加载失败，页面可能卡死
	样式中使用死循环表达式造成卡死 _height:expression((this.clientHeight < 450)?"450px":"auto")
	服务器启用gzip压缩时，IE6不能正确解压造成卡死
	IE8下，选中TD中文字，JS清空文字时内存不能写造成卡死