一、页面的生命周期:
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清空文字时内存不能写造成卡死
分享到:
相关推荐
css样式调整方案 前台构架师必读 css兼容各种浏览器
自己遇见的一些常见的css兼容性问题。和css hack 自己总结出来后生产pdf文档带书签的。 CSS兼容性笔记 1 一 css hack 1 1.直接案例 1 2. hack写法列表 1 3.在IE7+浏览器中按照IE7文档模式 1 4. 注意 Html头部的声明...
而现在有种更加完美的方法能兼容IE5、IE6、IE7的CSS选择器解析不一样问题。那就是: ie7 - js 本插件包包含 ie7.s,ie8.js,ie9.JS,可以让ie6支持到更多的css3属性, 另附上插件包使用说明和官方最新插件下载地址和...
兼容性处理要点 1、DOCTYPE 影响 CSS 处理 2、FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width 3、FF: 支持 !important, IE 则忽略, 可用 !...
NULL 博文链接:https://angrycoder.iteye.com/blog/1138595
解决CSS3网页兼容性问题
IE和Firefox在css,JavaScript方面的兼容性
提供一些工具方法以便处理与css3相关兼容性的问题
simple-hint 提示信息。用css做的。兼容性IE 9
主要介绍了css与javascript跨浏览器兼容性,包括常见的css兼容性问题与javascript兼容性问题,以及IE与Firefox等常用浏览器的兼容性分析,需要的朋友可以参考下
兼容性良好的css3点点点loading动画提交效果
javascript+CSS版本贪吃蛇,兼容性没做处理,火狐、IE11下可以,其他版本没有测试
IE6、IE7、IE8对css和js支持方面差异的研究
能让用户量最多的两个浏览器兼容,是web程序员比较头疼的事情,里面包含了一些方法总结,比如CSS里面的hack,js里面的style.height等赋值都要有'px'才兼容火狐
javascript和css在IE和Firefox中的不同点及解决兼容性的方案,一共有二十五点
js 自动补全 及css样式,放在项目里直接引用可用 兼容性好 下拉框带滚动条的哦js 自动补全 及css样式,放在项目里直接引用可用 兼容性好 下拉框带滚动条的哦
最新最全的javascript和css浏览器兼容手册,欢迎有需要的下载,
通常使用html自带视频标签会有很多手机端兼容性,使用videojs 可以解决大部分设备的兼容性,目前我用的时候解决项目的需求
1)、CSS兼容 2)、JavaScript兼容 3)、HTML兼容 这三类也是前端的主要组成部分,都存在一定的兼容性问题,知己知彼,百战百胜,我们先了解浏览器的发动机—内核。 多年前我们一直为IE6兼容烦恼,为它没少加班;盼走...