日期:2014-05-17  浏览次数:20622 次

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清空文字时内存不能写造成卡死